HTML5 SVG 初步学习

Catalogue

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

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

初步感觉,SVG的基本绘图方法如patharcmove toline to等都与HTML5 canvas很相似。

###例1:饼状图

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

12 3 6 9

###例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里。结果如下,鼠标单击左侧的树(绿色部分),树冠会以正弦规律摆动;再点击,则停止摆动。

Share