|
|
|
 [XML初学进阶]XML(40)
网上资源
|
|
5.3.3 面向图形图象：FLASH的对手？——SVG
在过去十年中，图象图形技术曾经使出版印刷行业发生了一场深刻的技术革命，使古老的印刷术融入了高速发展的信息产业。随着Internet技术的普及和发展，图象图形技术作为Web浏览技术的基础，更将为建立一个全新的互联网行业，发挥至关重要的作用。然而，目前的Internet技术在图形图象方面，应该说还处在年轻阶段，从浏览器的核心技术来看，其对于图形图象的支持还仅仅局限于对图象的简单显示，随着应用的逐渐深入，图象技术自身的一些缺点，如文件较大、在不同设备上显示效果不同等问题日益突出，从某种程度上讲也限制了Web浏览技术的进一步发展。
为此，众多业内人士针对Web浏览器图象图形功能支持较弱这一缺点提出了改进措施。近年来，各大软件厂商和组织纷纷推出自己的矢量图形规范，主要代表有Adobe Systems Inc.制定的PGML（Precision Graphics Markup Language）、CCLRC提出的Web Schematics、Autodesk, Inc和微软等提出的VML（Vector Markup Language）。此外，一些公司开始制作自己的plug-in来支持矢量图形的浏览，但这些插件都由于缺乏跨平台的支持，以及没有较好的配套编辑工具，而未能得到网上的广泛应用。正是在这种情况下，为统一标准，结束目前的混乱局面，W3C组织于1998年8月专门成立了SVG工作组致力于图形标准的制定工作，并于1999年2月11日发布了第一个讨论草案，后几经修订于最近发布了最终草案。
SVG是一种基于XML 的用来描述二维矢量图形和矢量/点阵混合图形的置标语言，其全称是可扩展矢量图形规范（Scalable Vector Graphics）。其中，“可扩展”（scalable）在图形图象技术上指的是它不局限于一个固定的分辨率和大小，譬如可以在不同分辨率的屏幕上以相同的大小显示，也可以在同一个网页中以不同的大小或观全局或观细节；而在网络技术上指的是这一规范能够与其它规范相融合，从而满足更广泛的用户需求，适合于更广泛的应用方式。“矢量”（vector）是指规范中描述了直线、曲线、形状等几何图形，而无须象PNG、JPEG等图象格式那样逐象素进行描述，这使得集成了SVG的XML文档更小，下载速度也大大提高。“图形”（graphics）是指它提供了对矢量和矢量/栅格混合图形的描述，填补了大多数基于XML的置标语言规范对复杂图形描述的空白。
SVG规范定义了SVG的特征、语法和显示效果，包括模块化的XML命名空间（namespace）和SVG文档对象模型(DOM)。在以前的草案中，仅为SVG定义了一个DTD，这个DTD支持样式单的引用。但这样一来，SVG就不再是一个自定义的全包容的语言规范，而需要浏览工具额外具有对样式单文件的处理能力。出于这种考虑，在新近出台的SVG的第八个草案中，为SVG提供了两种不同的形式，即样式化SVG和交换型SVG，它们各自有不同的DTD及MIME类型。样式化SVG允许对图形对象进行样式添加，它可以通过引用外部样式文件、在文件头中预先进行样式声明和通过属性为元素定义样式三种方式使用样式单，是SVG用于网络环境的推荐存储格式。而交换型SVG取消了对样式单的支持，完全使用元素属性描述各个图形对象的显示效果。在未来的网络传输中，交换型SVG将会充当现在印刷业广泛使用的图形格式--EPS格式的网络版。并且，由于所有显示信息都封装到XML的属性中，交换型SVG还可以作为XSLT转换后所得到的结果文件格式，广泛应用于XML文档显示效果的描述中。
SVG的绘图可以通过动态和交互式方式进行，在实际操作中，则是以嵌入方式或脚本方式来实现的。SVG不仅使用Xlink和Xpointer来提供超链接功能，还定义了丰富的事件，这些事件可以应用于所有的图形对象。由于SVG支持脚本语言（script），高级网页制作者仅须进行简单的Script编程，访问SVG DOM的元素和属性，即可响应特定的事件，从而提高了SVG的动态和交互性能。这使得SVG无论在显示效果还是动态交互上都不逊于当前在互联网上独领风骚的FLASH。而且，SVG除了单独使用外，还可以在XML文件中作为命名空间引入，或者用作HTML文件中的特殊对象。同样，SVG作为一种基于XML的语言规范，也具有XML的可扩展性，可以在SVG文件中引入其它置标语言的命名空间。这些特性使得SVG在互联网上将畅通无阻，比起采用二进制文件格式不能与其它网页语言兼容的FLASH更胜一筹。
SVG是图形、图象和文字的有机统一。根据功能不同，SVG的主要对象可以归为基本要素对象和页面描述功能对象两大类，请看下图。
500)this.width=500'>
500)this.width=500'>
由上图可以看出，SVG除了支持HTML中常用的标记，如文本、图象、链接、交互性、CSS的使用、脚本（Script）外，还提供了大量针对图形、图象、动画的特定标记。下面我们就来对它们进行分别介绍。
SVG中对矢量图形的支持
众所周知，矢量图形用点和线来描述，可以大大减小文件长度，提高传输效率。更重要的是，它将对图形效果的显示由服务器端移到客户端，可以充分利用客户端的资源，减轻服务器端的负担。
SVG中有专门用于矢量图形描述的标记，包括矩形<rect>、圆<circle>、椭圆<ellipse>、直线<line>、折线<polyline>和多边形<polygon>。此外，SVG还支持图形绘制中常用的由Bezier曲线定义的路径描述和操作，其元素标记为<path>。有了以上定义，就可对相应路径进行勾勒、填充、裁剪、蒙版和合成等一系列操作。
对于<path>、<text>元素和前述形状元素，可以利用Stroke 和Fill属性进行勾勒和填充，其中填充可以使用某种颜色，或使用<linearGradient>、<radialGradient>定义的渐变色，或是使用<pattern>定义的底纹填充模式。而对于<path>、<line>、<polyline>、<polygon>等元素，只要将其放入<marker>标记对中，即可按所定义的路径绘制箭头。
同样，对于<path>、<text>元素和各种形状元素，也可以对其轮廓内的区域作裁剪、蒙版和合成操作。<clipPath>利用上述各种元素描述裁剪路径，<mask>标记则支持单通道、三通道、和alpha通道操作。
最后，SVG还支持图形中成组的概念，以上操作均可以对一组图形进行操作。
在下面的例子中，借助于上面讲到的一些标记绘制了一个经过渐变填充的矩形图形。
<?xml version="1.0"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000302 Stylable//EN" "http://www.w3.org/TR/WD-SVG-20000302/DTD/svg-20000302-stylable.dtd">
<svg width="37mm" height="24mm"><title>Sample SVG graphic</title><desc>A single rectangle with a white through yellow to red sunburst fill</desc><style type="text/css"> <![CDATA[ .foo rect { fill:url(#burst);stroke:#FEFEFE } ]]></style><defs> <radialGradient id="burst" cx="50" cy="80" r="90"> <stop offset="0" style="stop-color: #FFC"/> <stop offset="0.2" style="stop-color: #FF3"/> <stop offset="1" style="stop-color: #C33"/> </radialGradient></defs><g class="foo"> <rect x="2mm" y="2mm" height="20mm" width="33mm"/></g></svg>
它的显示效果是：
500)this.width=500'>
如果你的IE已经安装了ADOBE的SVG Viewer插件，将上面一段代码存为扩展名为.svg的文件，再用IE打开，就可以看到上面的效果。
SVG中对图象过滤操作的支持
目前网上传输的图象文件主要采用GIF、JPEG和PNG三种文件格式。尽管它们具有高压缩比、低容量的优点，但即便要将其做一点微小改动，也必须利用图象软件将其重新制作重新存储，非常繁琐。SVG支持对于图象的一系列常用过滤器操作，使得图象效果调整的任务可以在客户端进行。同样，这些过滤器操作也可应用于图形之中。
使用标记<filter>可以定义过滤器效果，在其中按照要施加的过滤操作的顺序依次罗列相应的标记。现在我们来看一个W3C在SVG标准中给出的例子：
<?xml version="1.0"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 03December 1999//EN" "http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">
<svg width="7.5cm" height="5cm" viewBox="0 0 200 120"><title>Example filters01.svg - introducing filter effects</title><desc>An example which combines multiple filter primitives to produce a 3D lighting effect on a graphic consisting of the string "SVG" sitting on top of oval filled in red and surrounded by an oval outlined in red.</desc><defs> <filter id="MyFilter"> <desc>Produces a 3D lighting effect.</desc>[1] <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>[2] <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>[3] <feSpecularLighting in="blur" surfaceScale="5" specularConstant="1" specularExponent="10" style="lighting-color:white" result="specOut"> <fePointLight x="-5000" y="-10000" z="20000"/> </feSpecularLighting>[4] <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>[5] <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint"/>[6] <feMerge> <feMergeNode in="offsetBlur"/> <feMergeNode in="litPaint"/> </feMerge> </filter></defs><rect x="1" y="1" width="198" height="118" style="fill:#888888; stroke:blue"/><g style="filter:url(#MyFilter)"> <g> <path style="fill:none; stroke:#D90000; stroke-width:10" d="M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 z" /> <path style="fill:#D90000" d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" /> <g style="fill:#FFFFFF; stroke:black; font-size:45; font-family:Verdana"> <text x="52" y="76">SVG</text> </g> </g></g></svg>
其浏览效果是：
500)this.width=500'>
这个SVG描述的基本图形是蓝框灰色矩形，里面有一个红色环行跑道，再里面是一个红色圆头矩形，中间有“SVG”的白色文字。那么，它是如何通过一系列的过滤操作得到上面的效果呢？我们就来一步步看一看。
步 骤
效果
原始图形
500)this.width=500'>
[1]将原始图形进行alpha通道的钝化操作，钝化效果参数设为4，将钝化结果存在名为“blur”的缓冲中，作为后面[2]、[3]两步操作的输入。
500)this.width=500'>
[2]将[1]得到的效果向右下方向进行平移，将平移结果存在名为“offsetBlur”的缓冲中。
500)this.width=500'>
[3]对“blur”缓冲中的图形进行光照效果，描述了光源的位置和颜色，结果存在名为“specOut”的缓冲中。
500)this.width=500'>
[4]将[3]得到的效果和原始图形的alpha通道取交，保证其不超出原始图形的范围。
500)this.width=500'>
[5]将[4]得到的效果和原始图形重合，使原始图形显示一种光照效果，结果存在名为“litPaint”的缓冲中。
500)this.width=500'>
[6]将[2]和[5]得到的效果融合，为图形加上阴影。
500)this.width=500'>
SVG中对动画的支持
目前，网页中播放的动画多为GIF格式，它也存在着与网上传输的图象格式相同的问题，即修改在服务器端实现，而不是在客户端实现。SVG中提供了专门的动画效果，可以描述一个图形图象元素的实时变化。
SVG中用标记<animateMotion>描述元素的移动效果，用<animateFlipbook>描述元素的弹跳效果，用<animateTransform>描述元素的放缩、旋转、偏斜等变换效果，用<animateColor>描述元素颜色的改变，还可以用<animate>描述元素的淡入淡出效果。
下面这个例子描述了几种不同的动画效果：
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000802//EN" "http://www.w3.org/TR/2000/CR-SVG-20000802/DTD/svg-20000802.dtd">
<svg width="8cm" height="3cm" viewBox="0 0 800 300"><desc>Example anim01 - demonstrate animation elements</desc><rect id="RectElement" x="300" y="100" width="300" height="100" style="fill:rgb(255,255,0)" > <animate attributeName="x" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="300" to="0" /> <animate attributeName="y" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="100" to="0" /> <animate attributeName="width" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="300" to="800" /> <animate attributeName="height" attributeType="XML" begin="0s" dur="9s" fill="freeze" from="100" to="300" /></rect><g transform="translate(100,100)" > <text id="TextElement" x="0" y="0" style="font-family:Verdana; font-size:35.27; visibility:hidden" > It s alive! <set attributeName="visibility" attributeType="CSS" to="visible" begin="3s" dur="6s" fill="freeze" /> <animateMotion path="M 0 0 L 100 100" begin="3s" dur="6s" fill="freeze" /> <animateColor attributeName="fill" attributeType="CSS" from="rgb(0,0,255)" to="rgb(128,0,0)" begin="3s" dur="6s" fill="freeze" /> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-30" to="0" begin="3s" dur="6s" fill="freeze" /> <animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3" additive="sum" begin="3s" dur="6s" fill="freeze" /> </text></g></svg>
代码首先描述了一个黄色矩形的淡出效果，分别指示了在9秒钟的过程中它的左上角坐标和长、宽的匀速变化。然后又描述了从第3秒开始显示的一串文字，这串文字在接下来的6秒钟里有以下动作：
文字的左上角沿直线运动
文字的颜色由兰色变成深红
文字的方向从上斜30度变为水平
文字的逐渐增大到原先的3倍大小
它在0秒、3秒、6秒、9秒的显示效果分别是：
500)this.width=500'>
500)this.width=500'>
500)this.width=500'>
500)this.width=500'>
尽管SVG规范尚未成为正式的推荐标准，但由于目前SVG代表了未来网上矢量图形传输发展的方向，国外各大公司都在追踪其发展，开发设计了一些实验系统，Adobe公司开发了用于IE5和Netscape的SVG浏览插件，IBM推出了专门的SVG浏览工具，许多知名的平面设计软件，例如CorelDraw、Illustrator,都开始尝试支持SVG格式的输入和输出，同时还出现了一大批格式转换工具，其中还包括从现在流行的Flash格式向SVG格式的转换工具。国内对于SVG的应用研究也已经逐步展开，例如图象图形编辑软件“方正画苑”已经在其3.0版本中加入了SVG的编辑输出功能，预计不久就将投入市场。鉴于SVG出色的优点，我们有理由相信，在不久的将来基于SVG技术的浏览技术必将成为Web技术上一个新的热点。
| |
|
|
|
