基于XML的可升级矢量图像(SVG)浅析
?
基于XML的可升级矢量图像(SVG)浅析级别： 初级
吴高峰 (wugfeng@263.net)上海大学计算机系
2001 年 8 月 01 日
SVG是基于XML的专门为网络而设计的图像格式。本文给出了SVG的几个简单例子，并与其它矢量图形格式VML、PDF、SWF进行比较，展示了 SVG的优点和美好前景。<!--START RESERVED FOR FUTURE USE INCLUDE FILES--><!-- include java script once we verify teams wants to use this and it will work on dbcs and cyrillic characters --> <!--END RESERVED FOR FUTURE USE INCLUDE FILES-->
回页首
回页首
SVG文档(通常以后缀.svg存放)总是以根元素 开始。和标记内是SVG的图像描述语句。我们可以定义一个视口坐标系和用户坐标系，缺省的情况下两者是一致的，度量单位也相同，如果属性值没有带单位，则 使用用户坐标系的长度单位-像素（px）。大多数情况下，用户坐标系的原点处在视口的左上角，X轴的正向朝右，Y轴的正向朝下，即如果不进行坐标变换，一 切渲染都是以初始坐标系为准。例1中的SVG首先画了一个矩形，然后写了一段文字，接着利用路径元素画了一个三角形，最后显示效果如图1所示：
SVG 提供了一种通用的路径式元素（path），可以用来创建庞大复杂的图像对象，像电子设计、流程图、统计绘画等领域有大量固定的符号，SVG不可能全部囊 括。SVG规范允许用户定义自己的符号，可以将自定义的符号创建、重用、发布而不需要其他额外的手段，更不需要一个什么委员会来批准注册，这种自由灵活的 风格更加扩展了SVG的功能。
SVG提供的另一个很重要的功能是超级链接。在HTML网页中，图像和链接是分离的，图像作 为外部文件而存在，链接则在HTML中说明，这样虽然有灵活和可重用的优点，却不易管理。而Flash的SWF矢量格式则相反，图像中内嵌链接，两者成为 一个整体，虽然方便，但却不能重用。SVG则综合了两者的优点，其超级链接以明文的形式内嵌于文档内部，在形式上是一个整体，而且也有利于修改。由于 SVG是基于XML的，象"xlink" 和 "xpointer"等都是XML特有的，所以SVG就自然而然获得了XML所定义的链接的好处和功能。
把例1稍做修改，对那个黑三角加上一个超级链接，如例2所示：
<script>元素中定义了两个函数来分别响应鼠标的两个事件。关于SVG中脚本的语句，读者可以参考有关JavaScript的书籍。
SVG 不但能够实现交互，而且能够实现动画。动画与交互在某些方面是相通的，比如都可以利用脚本语句来执行一些动态效果，都能实现可视化元素的增、删、改等功 能。只是交互一般由事件来触发，而动画可以"我行我素"，不需要外界干涉。SVG中的动画只说明某个属性或样式的值在动画过程中的起止时刻、变化速度等关 键参数，动画的中间效果完全靠SVG客户端解释程序来渲染完成，因此其生成的动画文件有着比SWF格式的文件更加短小精悍的优点。关于动画，本文就不举详 细的例子了，有兴趣的读者可参见参考文献6。
回页首
SVG的美好前景
统 一的标准和开放性是SVG的强大生命力所在。我们可以想象SVG流行起来以后的景象：由于XML的Parser是可以免费得到的，而且标准也是公开的，所 以除了将SVG应用在网页上或作为独立应用程序执行外，它应该可以跑在任何标准设备上。会有那么一天，你在出差前在Illustrator里面制作一张图 片，然后作为附件发送给公司的同事。公司的同事在收到以后，如果需要在图片的文字上作一些改动，她就会直接用写字板程序打开你的图片文件，改正需要改动的 文字，再保存起来。由于你已经到达外地，而又不能马上接入互联网，所以你的同事会直接把图片发送到你的手提电话上。你的支持SVG的手提电话会直接在屏幕 上显示你想要看到的图片，这时你发现你画的圆的比例不太正确，不过没有问题，你并不需要一个大型的制图软件，你需要的只是手提电话里面内置的一个文本编辑 器就能够完成修改了。
相信我，有一天（这一天可能不远的，因为今天我们已经有了SVG，我们还会不断的有新的标准），你可能会煞有介事的从手提电话向你的冰箱传送图片，仅仅是为了更改你已经看的不耐烦了的液晶操作面板。
由于SVG使用XML语法，我们可以使用XSLT从XML数据中生成SVG。我们还可以很容易地对以XML格式存放的数据制作一个图形表示。例如，对于一个包含玩具生产商所占市场份额的XML文档，我们可以用SVG创建一个饼图来方便比较！
记住，这一切的前提就是：公开的，标准化的，跨平台的时代的到来。
一些有用的链接
?
一些主要的SVG图像阅读器,制作以及转换工具
?
Organization Product Platforms Adobe Adobe SVG Viewer 2.0(Browser) MacOS Win95/98/ME WinNT/2000IBM IBM SVGView(Browser) Win95/98 WinNTApache Batik SVG browser (Browser) Any Java 2W3C Amaya 5.0(Editor/Browser) Unix and WindowsAdobe Illustrator 9.0(Editor) MacOS Win95/98/ME WinNT/2000KDD Labs JaMaPS （Japan map with GPS support） PalmOSCSIRO Pocket SVG Viewer（Viewer） Pocket PCAppligent SVG2PDF (Converts from SVG to PDF) MacOSWin95/98/ME WinNT/2000IBM AFP to SVG transcoder(Server-side SVG generators) Win95/98 WinNT参考资料
W3C Scalable Vector Graphics (SVG) http://www.w3.org/Graphics/SVG/