📄 0503-0300.htm
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0071)http://162.105.170.55/ASPs/GetLearningArticleTemp.asp?section=0503-0300 -->
<HTML><HEAD><TITLE>XML中国论坛 - 初学进阶 - 5.3.3 面向图形图象：FLASH的对手？——SVG</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>TABLE {
FONT-SIZE: 9pt; COLOR: black; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"
}
.pt9 {
FONT-SIZE: 9pt; COLOR: black; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"
}
.pt10 {
FONT-WEIGHT: 700; FONT-SIZE: 10pt; LINE-HEIGHT: 18pt; FONT-FAMILY: "宋体"
}
.TempOutline {
FONT-SIZE: 9pt; MARGIN-LEFT: 15pt; COLOR: #666666; TEXT-INDENT: -28pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
.TempOutline1 {
FONT-SIZE: 9pt; MARGIN-LEFT: 24pt; COLOR: #666666; TEXT-INDENT: -36pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
.Outline {
FONT-SIZE: 9pt; MARGIN-LEFT: 15pt; TEXT-INDENT: -28pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
.Outline1 {
FONT-SIZE: 9pt; MARGIN-LEFT: 24pt; TEXT-INDENT: -36pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
.Outline11 {
FONT-SIZE: 9pt; MARGIN-LEFT: 38pt; TEXT-INDENT: -50pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
.passage0 {
FONT-SIZE: 9pt; MARGIN-LEFT: 15pt; TEXT-INDENT: -28pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
.passage1 {
FONT-SIZE: 9pt; MARGIN-LEFT: 24pt; TEXT-INDENT: -36pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
.passage11 {
FONT-SIZE: 9pt; MARGIN-LEFT: 38pt; TEXT-INDENT: -50pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
.passage111 {
FONT-SIZE: 9pt; MARGIN-LEFT: 51pt; TEXT-INDENT: -64pt; LINE-HEIGHT: 15pt; FONT-FAMILY: "宋体"; TEXT-DECORATION: none
}
</STYLE>
<META content="Microsoft FrontPage 5.0" name=GENERATOR></HEAD>
<BODY vLink=#000000 aLink=#000000 link=#000000 leftMargin=0 topMargin=0
onload=""><!-- 以下为主体内容 -->
<div align="center">
<center>
<TABLE width="100%" border=0 style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">
<TBODY>
<TR vAlign=top>
<TD width=40 rowSpan=2></TD>
<TD vAlign=center >
<p align="center"><IMG height=33
src="image/title_learner.gif" width=226></TD>
<TD width=46 rowSpan=2></TD>
</TR>
<TR vAlign=top>
<TD ><!-- 正文内容 -->
<DIV class=pt10><B>5.3.3 面向图形图象：FLASH的对手？——SVG</B></DIV>
<DIV></DIV><BR>
<DIV class=pt9>
<P>在过去十年中，图象图形技术曾经使出版印刷行业发生了一场深刻的技术革命，使古老的印刷术融入了高速发展的信息产业。随着Internet技术的普及和发展，图象图形技术作为Web浏览技术的基础，更将为建立一个全新的互联网行业，发挥至关重要的作用。然而，目前的Internet技术在图形图象方面，应该说还处在年轻阶段，从浏览器的核心技术来看，其对于图形图象的支持还仅仅局限于对图象的简单显示，随着应用的逐渐深入，图象技术自身的一些缺点，如文件较大、在不同设备上显示效果不同等问题日益突出，从某种程度上讲也限制了Web浏览技术的进一步发展。</P>
<P>为此，众多业内人士针对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日发布了第一个讨论草案，后几经修订于最近发布了最终草案。</P>
<P>SVG是一种基于XML 的用来描述二维矢量图形和矢量/点阵混合图形的置标语言，其全称是可扩展矢量图形规范（Scalable Vector
Graphics）。其中，“可扩展”（scalable）在图形图象技术上指的是它不局限于一个固定的分辨率和大小，譬如可以在不同分辨率的屏幕上以相同的大小显示，也可以在同一个网页中以不同的大小或观全局或观细节；而在网络技术上指的是这一规范能够与其它规范相融合，从而满足更广泛的用户需求，适合于更广泛的应用方式。“矢量”（vector）是指规范中描述了直线、曲线、形状等几何图形，而无须象PNG、JPEG等图象格式那样逐象素进行描述，这使得集成了SVG的XML文档更小，下载速度也大大提高。“图形”（graphics）是指它提供了对矢量和矢量/栅格混合图形的描述，填补了大多数基于XML的置标语言规范对复杂图形描述的空白。</P>
<P>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文档显示效果的描述中。</P>
<P>SVG的绘图可以通过动态和交互式方式进行，在实际操作中，则是以嵌入方式或脚本方式来实现的。SVG不仅使用Xlink和Xpointer来提供超链接功能，还定义了丰富的事件，这些事件可以应用于所有的图形对象。由于SVG支持脚本语言（script），高级网页制作者仅须进行简单的Script编程，访问SVG
DOM的元素和属性，即可响应特定的事件，从而提高了SVG的动态和交互性能。这使得SVG无论在显示效果还是动态交互上都不逊于当前在互联网上独领风骚的FLASH。而且，SVG除了单独使用外，还可以在XML文件中作为命名空间引入，或者用作HTML文件中的特殊对象。同样，SVG作为一种基于XML的语言规范，也具有XML的可扩展性，可以在SVG文件中引入其它置标语言的命名空间。这些特性使得SVG在互联网上将畅通无阻，比起采用二进制文件格式不能与其它网页语言兼容的FLASH更胜一筹。</P>
<P>SVG是图形、图象和文字的有机统一。根据功能不同，SVG的主要对象可以归为基本要素对象和页面描述功能对象两大类，请看下图。</P>
<P align=center><IMG height=243 alt="wpe1.jpg (10522 bytes)"
src="image/TU000000-0503-0300-01.jpg" width=265></P>
<P align=center><IMG height=396 alt="wpe2.jpg (15666 bytes)"
src="image/TU000000-0503-0300-02.jpg" width=241></P>
<P
align=left>由上图可以看出，SVG除了支持HTML中常用的标记，如文本、图象、链接、交互性、CSS的使用、脚本（Script）外，还提供了大量针对图形、图象、动画的特定标记。下面我们就来对它们进行分别介绍。</P>
<OL>
<LI>
<P align=left><STRONG>SVG中对矢量图形的支持</STRONG></P></LI></OL>
<P
align=left>众所周知，矢量图形用点和线来描述，可以大大减小文件长度，提高传输效率。更重要的是，它将对图形效果的显示由服务器端移到客户端，可以充分利用客户端的资源，减轻服务器端的负担。</P>
<P
align=left>SVG中有专门用于矢量图形描述的标记，包括矩形<rect>、圆<circle>、椭圆<ellipse>、直线<line>、折线<polyline>和多边形<polygon>。此外，SVG还支持图形绘制中常用的由Bezier曲线定义的路径描述和操作，其元素标记为<path>。有了以上定义，就可对相应路径进行勾勒、填充、裁剪、蒙版和合成等一系列操作。</P>
<P align=left>对于<path>、<text>元素和前述形状元素，可以利用Stroke
和Fill属性进行勾勒和填充，其中填充可以使用某种颜色，或使用<linearGradient>、<radialGradient>定义的渐变色，或是使用<pattern>定义的底纹填充模式。而对于<path>、<line>、<polyline>、<polygon>等元素，只要将其放入<marker>标记对中，即可按所定义的路径绘制箭头。</P>
<P
align=left>同样，对于<path>、<text>元素和各种形状元素，也可以对其轮廓内的区域作裁剪、蒙版和合成操作。<clipPath>利用上述各种元素描述裁剪路径，<mask>标记则支持单通道、三通道、和alpha通道操作。</P>
<P align=left>最后，SVG还支持图形中成组的概念，以上操作均可以对一组图形进行操作。</P>
<P align=left>在下面的例子中，借助于上面讲到的一些标记绘制了一个经过渐变填充的矩形图形。</P>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%"><?xml version="1.0"?><BR><!DOCTYPE svg
PUBLIC "-//W3C//DTD SVG 20000302 Stylable//EN"
<BR>"http://www.w3.org/TR/WD-SVG-20000302/DTD/svg-20000302-stylable.dtd">
<P><svg width="37mm" height="24mm"><BR><title>Sample SVG
graphic</title><BR><desc>A single rectangle with a white
through yellow to red sunburst fill</desc><BR><BR><style
type="text/css"><BR> <![CDATA[<BR> .foo rect
{ fill:url(#burst);stroke:#FEFEFE }<BR>
]]><BR></style><BR><BR><defs><BR>
<radialGradient id="burst" cx="50" cy="80"
r="90"><BR> <stop offset="0" style="stop-color:
#FFC"/><BR> <stop offset="0.2" style="stop-color:
#FF3"/><BR> <stop offset="1" style="stop-color:
#C33"/><BR>
</radialGradient><BR></defs><BR><BR><g
class="foo"><BR> <rect x="2mm" y="2mm" height="20mm"
width="33mm"/><BR></g><BR></svg></P></TD></TR></TBODY></TABLE></CENTER></DIV>
<P align=left>它的显示效果是：</P>
<P align=center><IMG height=255 alt="wpe4.jpg (12247 bytes)"
src="image/TU000000-0503-0300-03.jpg" width=243></P>
<P align=left>如果你的IE已经安装了ADOBE的SVG
Viewer插件，将上面一段代码存为扩展名为.svg的文件，再用IE打开，就可以看到上面的效果。</P>
<OL start=2>
<LI>
<P align=left><STRONG>SVG中对图象过滤操作的支持</STRONG></P></LI></OL>
<P
align=left>目前网上传输的图象文件主要采用GIF、JPEG和PNG三种文件格式。尽管它们具有高压缩比、低容量的优点，但即便要将其做一点微小改动，也必须利用图象软件将其重新制作重新存储，非常繁琐。SVG支持对于图象的一系列常用过滤器操作，使得图象效果调整的任务可以在客户端进行。同样，这些过滤器操作也可应用于图形之中。</P>
<P
align=left>使用标记<filter>可以定义过滤器效果，在其中按照要施加的过滤操作的顺序依次罗列相应的标记。现在我们来看一个W3C在SVG标准中给出的例子：</P>
<DIV align=center>
<CENTER>
<TABLE width="80%" border=1>
<TBODY>
<TR>
<TD width="100%"><?xml version="1.0"?><BR><!DOCTYPE svg
PUBLIC "-//W3C//DTD SVG 03December 1999//EN"
<BR>"http://www.w3.org/Graphics/SVG/SVG-19991203.dtd">
<P><svg width="7.5cm" height="5cm" viewBox="0 0 200
120"><BR><title>Example filters01.svg - introducing filter
effects</title><BR><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><BR><BR><defs><BR> <filter
id="MyFilter"><BR> <desc>Produces a 3D lighting
effect.</desc><BR>[1] <feGaussianBlur
in="SourceAlpha" stdDeviation="4" result="blur"/><BR>[2]
<feOffset in="blur" dx="4" dy="4" result="offsetBlur"/><BR>[3]
<feSpecularLighting in="blur" surfaceScale="5"
specularConstant="1" specularExponent="10"
style="lighting-color:white"
result="specOut"><BR> <fePointLight
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -