SVG 与 XML 商业图表实务.doc

《SVG 与 XML 商业图表实务.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、SVG与XML商业图表实务运用Adobe的SVG技术从XML数据创建漂亮的商业图像级别:中级JackDHerrington(jherr@pobox.com),高级软件工程师,LeverageSoftwareInc.学习如何使用XML、PHP和Adobe的可缩放向量图形（SVG）标准创建商业图像。SVG标准为图像提供了无限级的向量缩放、可视化效果以及基于脚本的交互性。我承认，我是一个图像痴迷者。从孩提时候起我就喜欢有漂亮图像的计算机。这也是与TRS-80相比我更喜欢AppleII计算机的原因。不过有谁不喜欢图片呢？谁不曾被Pixar电影征服？“一张图片胜过千言万语”

2、这句老话没有错，因为一幅图片能够又快又容易地传达大量信息。图像对于商业数据的重要性其他任何地方都比不上。通过SVG之类的标准来充分利用图像代码非常重要，因为众所周知，Web上早就不缺乏图像了。当然可以把图片放在网页中，但通常这些图片的作用不大。这些照片不能缩放和滚动，不能交互，不能很好地打印和调整比例。不过，我相信Web2.0将改变这种局面。不再需要强调这种技术的重要性。本文的目的是给用户以包括图像的体验。打开Google的Finance页面，如图1所示。查看股票的时候，可以使用交互式图像控件滚动数据，找到感兴趣的地方。是否使用MacromediaFlash实现有

3、关系吗？没有。重要的是最终结果——客户体验。图1.GoogleFinance页面本文将通过例子说明如何使用AdobeSVG格式和PHP编程语言创建漂亮的交互式图形。首先，了解一下SVG的背景知识及其与Web图像技术的关系。可缩放向量图形Adobe的SVG标准是一种基于XML的表示向量图形的格式。基础是直线、矩形、形状、图片和文本这些元素。所有这些元素都在“视图坐标”中指定，坐标值不是像素，只是适合应用程序的需要而定义的任意数值范围。这样就可以将XML指定的图像模型呈现到任意的图像空间中——无论多么大或者多么小——并进行适当的缩放。向量图像可以用打印机的最大分辨率打

4、印，不会出现位图放大打印时常见的锯齿。这种格式还允许对任何对象或对象组应用特效。其中包括投影、斜角、纹理、外测发光、内测发光等等。如果熟悉AdobePhotoShop或Elements，就会知道这些效果。还可以使用旋转、倾斜、透明、剪裁等技术。不仅如此，SVG的标记还可用于动态改变这些属性，因此可以沿着路径移动图形对象或者实现淡入淡出效果。此外，SVG还允许在模型中添加JavaScript代码，为图形元素、效果和动画加上行为。我第一次看到SVG的时候，立刻被它吸引并钻了进去。照我看来，Adobe是把PhotoShop引擎变成了能够嵌入到网页中的控件。事实上，今天看

5、来仍然如此。不足之处是，我发现并非所有的客户机上都安装了SVG，而且安装它需要下载某些软件。我不可能这样要求客户。因此有段时间我把SVG放在了一边，直到最近发现SVG的一个子集安装到了MozillaFirefoxV1.5中。现在，我想对于SVG来说事情将向好的方面转化。但是我们再后退一步，将SVG置于Web图像的大背景中。SVG和它所属的世界几年以前，如果想为Web创建图像，选择很有限。您可以即时创建PHP图片和建立.jpeg、.gif或.png文件。但是这些图像往往很简陋，因为PHP图像库非常原始，不支持特效。此外图像的缩放也不够好。技术有了一点进步，现在有更多

6、的选择了。当然，其中包括SVG。但是还有Flash。Flash可以使用画布对象和JavaScript代码绘制任何图像。还能够从服务器上直接以XML或JavaScriptSerializedObjectNotation(JSON)的形式把数据读入到图像中。在Flash之上有两种相对较新的技术。第一个是AdobeFlex，这种基于XML标记的语言可以呈现为Flash，并且包含图形库。Flex的竞争对手之一是Laszlo。Laszlo也使用标记，优点是开放源代码。还可以在浏览器中使用标记。这种新标记是一个画布，可以在其上绘制直线和矩形、放置图片、进行旋转

7、等。听起来似乎不错，但Microsoft®InternetExplorer不支持它——目前来说。幸运的是，Google有一个开放源代码项目InternetCanvas，在InternetExplorer中提供了相同的能力。刚出现的另一种选择是MicrosoftWindowsPresentationFoundation(WPF)，它提供的XML标记可以创建能够嵌入浏览器的WindowsUserInterfaces。是不是只能用于MicrosoftWindows®呢？的确。但是还有WPF/E，它为Mac和Windows上的所有主流浏览器提供了WPF的一个功能子集。确实

8、有不少选择