矢量格式新标准—SVG技术
?牐燬VG是什么呢？它的全称是Scalable Vector Graphics，中文直译过来就是“可升级矢量图像”。说到矢量图像你可能首先想到现在很流行的FLASH。FLASH也是一种矢量图像标准，不过这个标准是Macromedia公司制定的标准，而SVG格式并不属于任何一个公司，它是一个由国际WWW组织委员会（W3C）联合一大批图像界的巨头们一块儿制订的一项新的矢量图像格式标准，这个标准是一个开放的工业标准，就像HTML标准一样任何公司都可以使用它而不必支付额外的费用。SVG标准是基于XML的，也就是说我们可以像编辑XML那样用记事本来编辑。而且SVG是矢量格式具有一切矢量格式的优点，比如无限放大而不会使分辨率降低；文件非常小等等，除此之外我们还可以像Flash那样加入交互动画，可是说它是Flash的最大的竞争对手。
?牐燬VG是可以用记事本编辑的，也就是说它像HTML一样是一种纯文本描述语言，当然要看到图像我们就要有相关的软件来解释这些描述语言所描述的图像。这就必须有相应的SVG插件。目前这个插件是ADOBE开发的Adobe SVG Viewer。可能细心的朋友在安装Adobe Photoshop6.0或者Adobe Illustrator9.0的时候就会看到在它们的安装过程中可以选择Adobe SVG Viewer1.0安装。
#1?燬VG技术的应用
?牐燗dobe SVG Viewer安装以后我们就可以在浏览器中看到SVG的图像了（^26020703a^1）。
?牐牥聪率蟊暧壹颐蔷涂梢钥吹絊VG的菜单，我们看到它不仅仅能够像FLASH那样放大缩小图像而且还可以在图像中查找关键字。我们选择View Source就可以在看到源文件。下面就让我们来看看在记事本中撰写SVG图像的方法。
?牐犖颐窍衷谠诩鞘卤局行慈胂铝械拇耄?
?牐?<?xml version="1.0" encoding="iso-8859-1"?>
?牐?<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
??"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
?牐?<svg width="8cm" height="8cm">
?牐?<circle cx="4cm" cy="4cm" r="3cm"
?牐爏tyle="fill:green; stroke:black; stroke-width:0.5cm" />
?牐?</svg>
?牐犘聪抡舛未胍院笪颐墙募暮笞好４嫖猄VG，这样我们第一个SVG作品就完成。用浏览器打开这个文件我们就会看到一个边线黑色填充为绿色，边线宽度为0.5厘米，半径为3厘米，圆心在坐标（4，4）的圆。在前段代码中的1～5行是声明下面的代码就是SVG的代码，以及编码的规范等等信息。当浏览器解释到这一段代码的时候就会调用SVG插件来显示下面代码的图像。
?牐?<svg width="8cm" height="8cm">
?牐犛美瓷鱏VG图形的大小。
?牐牻酉吕吹淖詈?3行这些代码声明了所画的图形“circle”；圆心的坐标cx="4cm" cy="4cm"；圆的半径r="3cm"；圆的填充的颜色、边线的颜色、边线的宽度style="fill:green; stroke:black;stroke-width:0.5cm"。
?牐?</svg>
?牐犠詈缶褪巧飨衷赟VG已经描述完成了，下面的代码就不是SVG代码了。
?牐犝飧龃胪耆敲枋鲂缘挠镅裕⒂锷陨院靡坏愕木头浅Ｈ菀锥１热缥颐窍胍惶鹾焐毕呔椭灰慈肭岸未氲暮?4行加以修改
?牐?<line x1="0" y1="0" x2="200" y2="200"
?牐爏tyle="stroke:red; stroke-width:0.5cm" />
?牐?</svg>
?牐犖颐蔷涂梢钥吹匠鱿忠惶醵蔚阕晡?0，0）（200，200），宽度为0.5CM的红色直线。
?牐犖颐乔懊嫠档絊VG还支持动画，我们看看下面的代码：
?牐牽奖辞岸未氲那?5行，在第6行接着输入：
?牐?<svg width="100" height="100">
?牐?<rect y="45" width="10" height="10" style="fill: red">
?牐?<animate attributeName="x" from="0" to="90" dur="10s"
?牐爎epeatCount="indefinite"/>
?牐?</rect>
?牐?</svg>
?牐犝舛未肟梢匀梦颐腔嬷瞥鲆桓龊焐木匦危缓笱刈臱轴从0移动到90，经历的时间为10秒。通过这些例子我们看到这些SVG的代码都是非常容易懂的。
?牐犗衷诳赡苡行┡笥言谙牖嬷普庑┘虻ネ夹蔚故呛芗虻ィ还嬷瞥銮懊婵吹降耐枷窀迷趺窗煅剑坑眉鞘卤颈嗉皇且讶说耐范家啻螅∷淙淮永砺凵纤凳强梢杂眉鞘卤净嬷仆枷瘢钦饪墒浅粤Σ惶趾玫氖虑椋拖裣衷诖蠹叶荚谟肈reamwaver编辑网页，只有那种绝世高手才用记事本。前面看到的图形其实是使用Adobe Illustrator 9.0编辑出来的。下面就让我们来看看Illustrator9.0输出SVG文件的方法。其实这个操作非常的简单，选择File>Export，我们在文件类型中选择SVG或者SVG Compressed（SVG压缩格式），见^26020703b^2。按下确定按键我们就将Illustrator文件输出为SVG文件了。细心的朋友可能看到在Illustrator9.0中有一个专门的SVG Interactivity（SVG交互）浮动面板。本文中的例子就是通过这个浮动面板加入的交互功能。?牐?
?牐犜谡飧龈《姘逯形颐强梢陨柚肧VG的交互功能。当然这要对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看到，也可以下载到源文件。