HTML5 SVG 初步学习

Catalogue

HTML5将XML和HTML的区别进一步缩小，表现在：它允许SVG（和MathML）标记直接在HTML文件中使用，而不需要命名空间的声明或者标签前缀。

这里演示的前两个例子来自《JavaScript权威指南·第六版》page 618.代码有些许优化。第三个例子根据基于XML的SVG应用指南介绍的方法，利用Illustrator CS6 自带的模板生成SVG，然后导入到HTML中。

初步感觉，SVG的基本绘图方法如path、 arc、 move to、 line to等都与HTML5 canvas很相似。

###例1：饼状图

###例2：SVG模拟时钟
从这个例子则可以看出svg与canvas除了“矢量图与位图的区别”外，另一个明显区别：前者可对文档结构进行属性操作从而产生动画，而后者的动画则是基于像素的。

###例3：Adobe Illustrator导出SVG
在本博文中尝试导入Illustrator输出的SVG文件到HTML中。是一朵花。

成功了。这是从Illustrator CS6 自带的模板里摘出来的（要不然原始模板太大）。这个SVG文件大小为49KB，却是完全矢量化的。比位图的优势大太多了。

###例4：SVG的交互设计
这应该是最有应用价值的部分了。

已知的一个很好的Web应用是moqups。

在这里我也做了一个小例子出来。图像是根据《从新手到高手：IllustratorCS6中文版从新手到高手》最开始的介绍画的。这本书也提到了图像的SVG格式：

SVG是目前最火热的图像文件格式之一，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说XML是一种开放标准的矢量图形语言，可设计出高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。

SVG文件比JPEG和GIF格式的文件要小很多，因而下载也很快。可以相信，SVG的开发将会为Web提供新的图像标准。

然后我用Illustrator CS6从零开始画了个简单例子：树和房子。大小只有5KB左右。直接写在HTML里。结果如下，鼠标单击左侧的树（绿色部分），树冠会以正弦规律摆动；再点击，则停止摆动。