Intent of this article is to show a simple SVG demo that has CSS and JQuery as icing on the cake

.

SVG = Scalable Vector Graphics

SVG provides a means to create vector graphics using markup language that is almost supported by all major modern web browsers including Mozilla Firefox, Internet Explorer 9, Google Chrome, Opera, and Safari. With giving a touch of scripting language, you can create cool graphics for web. Folowing is the code I wrote for creating SVG & JQuery Smiley .

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">
.eyes,#mouth{
fill:#000000;
stroke:white;
stroke-width:1
}
</style>
<script>
var open=true;
$(function(){
//mouth
setInterval(
function(){
        open = !open;
        $("#mouth").attr("rx",open?10:3);
          }
,250);
//eyes
setInterval(
function(){
        $(".eyes").attr("ry",open?1:5);
          }
,300);
});
</script>
</head>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="200" width="600">
<ellipse cx="100" cy="80" rx="80" ry="70" style="fill:yellow;stroke:red;stroke-width:10" />
<ellipse class="eyes" cx="80" cy="45" rx="5" ry="5" />
<ellipse class="eyes" cx="120" cy="45" rx="5" ry="5" style="" />
<ellipse cx="100" cy="80" rx="5" ry="15" style="fill:black;stroke:white;stroke-width:1" />
<ellipse id="mouth" cx="100" cy="115" rx="15" ry="5"/>
<text x="200" y="60" font-size="20">I've no business with Images...!</text>
<text x="200" y="80" font-size="20"> JQuery and SVG created me...!</text>
</svg> </html>