/ svg

SVG入门(一)

最近帮一个朋友做中国地图的图表,顺手学习了 SVG 和 Raphael开发。我顺手搜索了一下,发现SVG相关的中文文章似乎不是很多,所以便准备再开一个系列。

本系列文章将记录我在 SVG 开发中的心得和体会,从实际出发,不会照顾所有知识点,但会尽可能保证有用。正文开始。

基础中的基础

做任何开发都要了解基础中的基础。在使用SVG之前,我们需要先知道SVG是什么。它的全称是Scalable Vector Graphics,翻译过来就是可缩放矢量图形。说直白点,就是用XML的形式来制作矢量图形。

与我们熟悉的JPG、GIF、PNG相比,它有哪些好处呢?

  1. SVG是矢量图形,这意味着它在缩放的时候不失真,非常适合用来制作图标。
  2. 它使用纯文本编写,容易创建,容易修改,其中的文字更是被搜索引擎识别,而且还支持gzip压缩。
  3. SVG可以作为对象直接嵌入页面,此时,它不仅是图形,还支持各种交互,可以用来创建各种图表组件。
  4. 将来会支持CSS和滤镜,可以用非常少的代码,非常方便快速地创建各种奇妙的图形、动画。

了解这些之后,我们很容易找出几个可以或者说应该使用SVG的地方:

  1. 需要缩放的UI组件,比如各种响应式页面
  2. 占位图片
  3. 交互式的图表

当然SVG并非十全十美,比如只有比较先进的浏览器才支持它,早期IE(8-)就放弃吧;支持它的浏览器,也不见得能够支持所有功能,比如一些高阶应用,像CSS滤镜、蒙版等,还只有在Chrome才生效(参考链接)。本篇文章假定你的目标用户是可以正常使用SVG的,兼容性有空再说。

基础

接下来我们看一个SVG的例子。

<?xml version="1.0" encoding="UTF-8"?>
<!doctype svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="100" fill="#FF0000"></rect>
</svg>

这段代码会创建一个简单的正方形,里面是红色。位于距画布左上角x、y各10px的位置,宽高为100px。相信任何一个有HTML开发经验的人都看得懂这段代码的意思,我也就不再多解释。

如何,简单吧?没错,SVG就是这样,我们操作的对象从<div><table>变成了<rect><path>;布局方式也从静态流式布局变成了全都绝对定位层层相叠。不过理解起来是一样的。另外,如果你语言经验足够多的话,它也会让你想起来Flash。

好了,我们把刚才的代码保存成rect.svg备用。如何将它显示在页面中呢?我们有三种做法。

<img><input type="image">, background: img()

这几种形式都是把SVG当成静态图使用,不管你SVG里实现了多么绚丽的效果,它都只会安安静静地做一个美男子以第一帧的状态显示在它该显示的地方。比如:

<img src="rect.svg" width="120" height="120" >

此时图片里的元素也不支持交互效果,比如hover,整张图就是一张静态图。所以我们也不需要费心给它加效果。那么如果真的要加,怎么办呢?

<object>

使用<object>将会使浏览器将引入的SVG视作一个外部对象,此时SVG的各式效果都能展现出来,还可以引用外部CSS。

<object type="image/svg+xml" src="rect.svg" width="120" height="120">
  <img src="rect.png" width="120" height="120">
</object>

正如上面所展示,使用<object>还有第二个好处,就是如果当前浏览器不支持SVG,可以自动降级显示备用的其它类型图片。提高了兼容性。

内嵌 <SVG>

内嵌<svg>也是比较推荐的作法,只要把前面的代码任意插入到你需要的地方即可(当然注意把XML声明信息干掉)。

内嵌的SVG会被当成比较特别的DOM元素:它受CSS影响,也有事件和事件冒泡机制,但它是个好女孩特殊的元素,只接受SVG标签,也有独特的命名空间。


总结

在我看来,评价一个技术优秀与否,主要看它给我们带来多少新的可能性,实现这些可能性又有多大的代价。所以初步入门SVG之后,我认为这个技术很优秀,值得学习。这一小节我展示了SVG最最基础的用法,具备这部分知识,就可以在自己的页面当中使用SVG。

接下来,我将会根据自己的经验,展示更多的做法,解决更多的问题。