矢量格式新标准—SVG技术
netbird
2001年 26期
#1什么是SVG
SVG是什么呢？它的全称是Scalable Vector Graphics，中文直译过来就是“可升级矢量图像”。说到矢量图像你可能首先想到现在很流行的FLASH。FLASH也是一种矢量图像标准，不过这个标准是Macromedia公司制定的标准，而SVG格式并不属于任何一个公司，它是一个由国际WWW组织委员会（W3C）联合一大批图像界的巨头们一块儿制订的一项新的矢量图像格式标准，这个标准是一个开放的工业标准，就像HTML标准一样任何公司都可以使用它而不必支付额外的费用。SVG标准是基于XML的，也就是说我们可以像编辑XML那样用记事本来编辑。而且SVG是矢量格式具有一切矢量格式的优点，比如无限放大而不会使分辨率降低；文件非常小等等，除此之外我们还可以像Flash那样加入交互动画，可是说它是Flash的最大的竞争对手。
SVG是可以用记事本编辑的，也就是说它像HTML一样是一种纯文本描述语言，当然要看到图像我们就要有相关的软件来解释这些描述语言所描述的图像。这就必须有相应的SVG插件。目前这个插件是ADOBE开发的Adobe SVG Viewer。可能细心的朋友在安装Adobe Photoshop6.0或者Adobe Illustrator9.0的时候就会看到在它们的安装过程中可以选择Adobe SVG Viewer1.0安装。
#1SVG技术的应用
Adobe SVG Viewer安装以后我们就可以在浏览器中看到SVG的图像了（^26020703a^1）。
按下鼠标右键我们就可以看到SVG的菜单，我们看到它不仅仅能够像FLASH那样放大缩小图像而且还可以在图像中查找关键字。我们选择View Source就可以在看到源文件。下面就让我们来看看在记事本中撰写SVG图像的方法。
我们现在在记事本中写入下列的代码：
写下这段代码以后我们将文件的后缀名保存为SVG，这样我们第一个SVG作品就完成。用浏览器打开这个文件我们就会看到一个边线黑色填充为绿色，边线宽度为0.5厘米，半径为3厘米，圆心在坐标（4，4）的圆。在前段代码中的1～5行是声明下面的代码就是SVG的代码，以及编码的规范等等信息。当浏览器解释到这一段代码的时候就会调用SVG插件来显示下面代码的图像。
最后就是声明现在SVG已经描述完成了，下面的代码就不是SVG代码了。
这个代码完全是描述性的语言，英语稍稍好一点的就非常容易懂。比如我们想要画一条红色直线就只要写入前段代码的后4行加以修改
我们就可以看到出现一条段点坐标为（0，0）（200，200），宽度为0.5CM的红色直线。
我们前面说到SVG还支持动画，我们看看下面的代码：
拷贝前段代码的前5行，在第6行接着输入：
这段代码可以让我们绘制出一个红色的矩形，然后沿着X轴从0移动到90，经历的时间为10秒。通过这些例子我们看到这些SVG的代码都是非常容易懂的。
现在可能有些朋友在想绘制这些简单图形倒是很简单，不过要绘制出前面看到的图像该怎么办呀？用记事本编辑不是要把人的头都要编大！虽然从理论上说是可以用记事本绘制图像，但是这可是吃力不讨好的事情，就像现在大家都在用Dreamwaver编辑网页，只有那种绝世高手才用记事本。前面看到的图形其实是使用Adobe Illustrator 9.0编辑出来的。下面就让我们来看看Illustrator9.0输出SVG文件的方法。其实这个操作非常的简单，选择File>Export，我们在文件类型中选择SVG或者SVG Compressed（SVG压缩格式），见^26020703b^2。按下确定按键我们就将Illustrator文件输出为SVG文件了。细心的朋友可能看到在Illustrator9.0中有一个专门的SVG Interactivity（SVG交互）浮动面板。本文中的例子就是通过这个浮动面板加入的交互功能。
在这个浮动面板中我们可以设置SVG的交互功能。当然这要对JAVAScript相当熟悉的人才能随心所欲地加入交互。由于篇幅的限制，短短的几千字是无法表述清楚的，对此感兴趣的朋友可以在http://www.adobe.com/svg看到Adobe公司的的详细教程。看完本文以后你一定觉得SVG太复杂，不容易掌握，特别是交互和动画功能更复杂，不过可以预言，要不了多久就会有软件公司开发出完全不用我们接触SVG源代码的设计交互SVG动画的软件出现，到时候Flash就会遇到真正的强劲的竞争对手了。Adobe SVG Viewer现在已经推出了2.0版本，可以在http://www.adobe.com/svg/viewer/install/main.html下载，在电脑报配套光盘《上网》第七期的光盘中你也可以找到。本文的例子你也可以在http://design.cnroot.com或者http://netbird55.home.chinaren.com看到，也可以下载到源文件。