SVG已经出来好多年了，其实我也知道好久了~_~不过一直没用过，平时一直都是切设计师给的效果图写页面。
最近设计师做网页改版，里面有些类似小框框，小图标等需要一些动画效果，一开始我只是想纯粹的用css3动画做出来，但是感觉效果非常low，尤其是在做折线的过度时，丑哭我了。无奈只好搬出来想学习良久的SVG，小白进修中。。。
说到SVG，还是先啰嗦一下它的意思吧！
SVG 是使用 XML 来描述二维图形和绘图程序的语言。就是大家所熟悉的可伸缩矢量图形 (Scalable Vector Graphics)。
与其他图像格式相比，使用 SVG 的优势在于：
- SVG 可被非常多的工具读取和修改（比如记事本）
- SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
- SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
- SVG 可以与 Java 技术一起运行
- SVG 是开放的标准
- SVG 文件是纯粹的 XML
查看 SVG 文件
Internet Explorer9，火狐，谷歌Chrome，Opera和Safari都支持SVG。
IE8和早期版本都需要一个插件 - 如Adobe SVG浏览器，这是免费提供的。
废话不多说，直切主题！
1.关于svg的引入
我现在主要是针对的HTML页面的使用，所以也就直接在HTML里直接引用了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>svg1</title> </head> <body> <h1>My first SVG</h1> <!-- 在Firefox、Internet Explorer9、谷歌Chrome和Safari中，你可以直接在HTML嵌入SVG代码。 --> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="#333" stroke-width="2" fill="#ff0000" /> <!-- 另一种样式写法 --> <!-- <circle cx="100" cy="50" r="40" style="stroke:#333;stroke-width=2;fill:#ff0000;" /> --> </svg> </body> </html>
注意：svg不能直接嵌入到Opera里面。
2.开始绘制
知道了怎么引入svg，下面就要开始绘制了。
举个例子！
我要绘制一个矩形：
<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect width="300" height="100" style="fill:#ccc;stroke-2;stroke:#333" /> </svg> </body> </html>
显示为：
但是，有点问题啊！不知道各位有没有发现.
绘制的时候，我一开始就遇到了个问题，比如我画矩形的时候，宽300，高100，边框宽度2，但是在浏览器打开时，边框显示很不正常。心想可能是太细了吧，开始加粗，越粗越不像样。。。。
原来。。。根据浏览器，svg会有自身默认的画布（干脆叫做画布吧）大小，这个大小好像也不太固定。所以解决的办法是给svg根元素里设置它的画布大小，这个最好一开始就设置上，根据自己大小的需求设置。
如下：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width='500' height='500' style="outline: 5px solid #ccc;"> <rect width="300" height="100" style="fill:#ccc;stroke-2;stroke:#333" /> </svg>
效果就是：
这样边框就显示正常了，之后所绘制的图形也会出现同样的效果，希望大家小心哈！
好啦！入门就到这里，其他图形的小练习，比如圆形，直线，多边形等，就参考一下http://www.runoob.com/svg/svg-rect.html，做继续练习吧！
其中的fill-rule填充规则参考 http://blog.csdn.net/cuixiping/article/details/7848369;
3.svg路径
关于绘制复杂曲线，可以使用svg的路径path来绘制。例如：
<path d="M10 10L90 90" stroke="#000000" style="stroke- 5px;"></path>
其中 d 是属性名；
路径画虚线的方法：
<path stroke-dasharray="5,5" d="M5,20l25,0" /> 其中：第一个是每个虚线的长度，第二个是虚线之间的间隔。
path的几种路径：
其中：字母大写表示的是绝对位置，小写是相对位置。
例1：SC曲线
<path d="M 100 400 L 100 100 L 200 200 C 300,400 400,400 500,200 S 700,0 800,200" fill="none" stroke='#ff0000' stroke-width='2'/>
效果图:
其中：绿色的线是使用S路径时自动添加的与C路径对称的线。
例2：QT曲线
<path d="M100,100 Q200,200 300,100 T 500,100" stroke-width="2" stroke="blue" fill='none'/>
其中：绿线为使用T路径时自动对称的点。
小效果1：
<!-- 使文字按照路径展示，可以实现文字个性展示 --> <defs> <path id="path1" d="M20,20 S100,150 200,10" /> </defs> <text x="10" y="100" style="fill:red;"> <textPath xlink:href="#path1">I love SVG I love SVG</textPath> </text>
效果2：
<text x="550" y="400" fill="red" font-size="30" >你好 <!-- 使字按着路径方向运动 --> <animateMotion path="M 0 0 L 100 -100 L100 -200" dur="5s" fill="freeze" /> </text>
祝你好运！
