svg是一种开放标准的矢量图形语言，是可缩放的矢量图形格式。svg格式的图像可任意放大图形显示，而且边缘异常清晰，生成的文件很小，方便传输，文字在svg图像中保留可编辑和可搜寻的状态，没有字体的限制，所以十分适合用于设计高分辨率的Web图形页面。
svg是目前十分流行的图像文件格式了,svg严格来说应该是一种开放标准的矢量图形语言，使用svg格式我们可以直接用代码来描绘图像，可以用任何文字处理工具打开svg图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器(如火狐浏览器)来观看。使用svg格式可让你设计激动人心的、高分辨率的Web图形页面。
svg格式具备目前网络流行的jpg和png等格式无法具备的优势：可以任意放大图形显示，但绝不会以牺牲图像质量为代价;可在svg图像中保留可编辑和可搜寻的状态;平均来讲，svg文件比其它格式的图像文件要小很多，因而下载也很快。
简单来说就是既可以当图片来显示，又可以当作文字来显示，而且他的大小比起png，jpg又小得多
至于为什么要用svg，理由也是多种多样，有时候感觉很重要，像我，喜欢上svg，只是因为看到一幅svg版的中国地图。
//myfirst.svg
<svg xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink”>
<text x=”0″ y=”15″ fill=”red”>下面是长方形</text>
<rect x=”0″ y=”24″ width=”300″ height=”100″ fill=”yellow”></rect>
<text x=”0″ y=”164″>下面是带有透明度的圆形</text>
<circle cx=”50″ cy=”244″ r=”40″ opacity=”0.3″></circle>
</svg>
效果如下：
这效果也没什么。是的
接下来是我们的html文件：
index.html:
<!– <polygon points=”100,10 40,180 190,60 10,60 160,180″–>
<!–<text x=”0″ y=”15″ fill=”red”>I love SVG</text>–>
<!–<a xlink:href=”http://www.w3cschool.cc/svg/” target=”_blank”>–>
<!–<text x=”0″ y=”15″ fill=”red”>I love SVG</text>–>
<!–</a>–>
<!–动画–>
<!–<rect x=”20″ y=”20″ width=”250″ height=”250″ style=”fill:blue”>–>
<!–<animate attributeType=”CSS” attributeName=”opacity” from=”1″ to=”0″ dur=”5s” repeatCount=”indefinite” />–>
<!–</rect>–>
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title></title>
</head>
<body>
<!–当用图片显示的时候不需要使用object对象，只需要是哟个image对象–>
<!–<img id=”myimg” src=”myfirst.svg” style=”width: 100%;” />–>
<button id=”clickme”>clickme</button>
<object id=”myobject” data=”myfirst.svg”></object>
<script src=”a.js”></script>
</body>
</html>
其中有a。js文件，那么久上文件：
a.js
document.getElementById(“clickme”).addEventListener(“click”, function() {
//以下是在js中操作svg的方法
document.getElementById(“myobject”).getSVGDocument().getElementById(“myrect”).setAttribute(“fill”, “yellow”);
});
a。js提供了使用svg节点的方法，对了，由于我改动过东西，所以会报错，你们在svg文件的recr中加个id就可以了
至于怎么去绘制svg图像，这个我建议大家去w3c好好学习