SVG 与 XML 商业图表实务（1）

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-7-20 08:32 | 只看该作者

SVG 与 XML 商业图表实务（1）

我承认，我是一个图像痴迷者。从孩提时候起我就喜欢有漂亮图像的计算机。这也是与 TRS-80 相比我更喜欢 Apple II 计算机的原因。不过有谁不喜欢图片呢？谁不曾被 Pixar 电影征服？“一张图片胜过千言万语” 这句老话没有错，因为一幅图片能够又快又容易地传达大量信息。
图像对于商业数据的重要性其他任何地方都比不上。通过 SVG 之类的标准来充分利用图像代码非常重要，因为众所周知，Web 上早就不缺乏图像了。当然可以把图片放在网页中，但通常这些图片的作用不大。这些照片不能缩放和滚动，不能交互，不能很好地打印和调整比例。不过，我相信 Web 2.0 将改变这种局面。不再需要强调这种技术的重要性。本文的目的是给用户以包括图像的体验。打开 Google 的 Finance 页面，如所示。查看股票的时候，可以使用交互式图像控件滚动数据，找到感兴趣的地方。是否使用 Macromedia Flash 实现有关系吗？没有。重要的是最终结果 —— 客户体验。
图 1. Google Finance 页面

本文将通过例子说明如何使用 Adobe SVG 格式和 PHP 编程语言创建漂亮的交互式图形。首先，了解一下 SVG 的背景知识及其与 Web 图像技术的关系。
可缩放向量图形Adobe 的 SVG 标准是一种基于 XML 的表示向量图形的格式。基础是直线、矩形、形状、图片和文本这些元素。所有这些元素都在 “视图坐标” 中指定，坐标值不是像素，只是适合应用程序的需要而定义的任意数值范围。这样就可以将 XML 指定的图像模型呈现到任意的图像空间中 —— 无论多么大或者多么小 —— 并进行适当的缩放。向量图像可以用打印机的最大分辨率打印，不会出现位图放大打印时常见的锯齿。
这种格式还允许对任何对象或对象组应用特效。其中包括投影、斜角、纹理、外测发光、内测发光等等。如果熟悉 Adobe PhotoShop 或 Elements，就会知道这些效果。还可以使用旋转、倾斜、透明、剪裁等技术。
不仅如此，SVG 的标记还可用于动态改变这些属性，因此可以沿着路径移动图形对象或者实现淡入淡出效果。此外，SVG 还允许在模型中添加 JavaScript 代码，为图形元素、效果和动画加上行为。
我第一次看到 SVG 的时候，立刻被它吸引并钻了进去。照我看来，Adobe 是把 PhotoShop 引擎变成了能够嵌入到网页中的控件。事实上，今天看来仍然如此。不足之处是，我发现并非所有的客户机上都安装了 SVG，而且安装它需要下载某些软件。我不可能这样要求客户。因此有段时间我把 SVG 放在了一边，直到最近发现 SVG 的一个子集安装到了 Mozilla Firefox V1.5 中。现在，我想对于 SVG 来说事情将向好的方面转化。
但是我们再后退一步，将 SVG 置于 Web 图像的大背景中。
SVG 和它所属的世界几年以前，如果想为 Web 创建图像，选择很有限。您可以即时创建 PHP 图片和建立 .jpeg、.gif 或 .png 文件。但是这些图像往往很简陋，因为 PHP 图像库非常原始，不支持特效。此外图像的缩放也不够好。
技术有了一点进步，现在有更多的选择了。当然，其中包括 SVG。但是还有 Flash。Flash 可以使用画布对象和 JavaScript 代码绘制任何图像。还能够从服务器上直接以 XML 或 JavaScript Serialized Object Notation (JSON) 的形式把数据读入到图像中。
在 Flash 之上有两种相对较新的技术。第一个是 Adobe Flex，这种基于 XML 标记的语言可以呈现为 Flash，并且包含图形库。Flex 的竞争对手之一是 Laszlo。Laszlo 也使用标记，优点是开放源代码。
还可以在浏览器中使用 <canvas> 标记。这种新标记是一个画布，可以在其上绘制直线和矩形、放置图片、进行旋转等。听起来似乎不错，但 Microsoft® Internet Explorer 不支持它 —— 目前来说。幸运的是，Google 有一个开放源代码项目 InternetCanvas，在 Internet Explorer 中提供了相同的能力。
刚出现的另一种选择是 Microsoft Windows Presentation Foundation (WPF)，它提供的 XML 标记可以创建能够嵌入浏览器的 Windows User Interfaces。是不是只能用于 Microsoft Windows® 呢？的确。但是还有 WPF/E，它为 Mac 和 Windows 上的所有主流浏览器提供了 WPF 的一个功能子集。
确实有不少选择。不过本文选择 SVG，并结合使用 PHP 为股票数据绘制一些图像。
SVG 的 Hello World为了确保您的 Firefox V1.5 浏览器能够正确处理 SVG 或者有一个安装了 SVG 插件的浏览器，我提供了一个简单的类似 “Hello World” 的例子供您测试。首先，我创建了一个文件 start.html，如所示。作为引用 .svg 文件的网页。
清单 1. Start.html

1
2
3
4
5
6
7

然后需要一个 start.svg 文件，如所示。可以看到 .html 文件中 <embed> 标记引用了该 .svg 文件。
清单 2. Start.svg

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg style="shape-rendering:geometricPrecision;"
  viewBox="0 0 100 100" xml:space="preserve"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xmlns="http://www.w3.org/2000/svg"
  preserveAspectRatio="xMidYMid meet">
<path fill-rule="nonzero"
   style="fill:#000000;stroke:#FF0000;"
   d="M0 0 L100 100 Z"/>
<path fill-rule="nonzero"
   style="fill:#000000;stroke:#00FF00;"
   d="M50 0 L50 100 Z"/>
<path fill-rule="nonzero"
   style="fill:#000000;stroke:#FF0000;"
   d="M0 100 L100 0 Z"/>
<path fill-rule="nonzero"
   style="fill:#000000;stroke:#00FF00;"
   d="M0 50 L100 50 Z"/>
</svg>

在浏览器中打开该文件时，可以看到所示的结果。
图 2. .svg 测试文件

回头再看看那个文件，其中定义了四条路径：两条从角到角，另外两条绿色的沿中心从上到下。如果看到该图像，说明您的浏览器至少能呈现 SVG 的一个小子集。

收藏分享评分

回复引用

订阅 TOP

返回列表