当前位置:编程学习 > JSP >>

本人的实际应用SVG--flash的掘莫者(俺开发过的,今天就先到这里,否则有灌水之嫌)

答案:SVG其实是一种开放标准的矢量图形描述语言。
使用SVG,可以在网页上显示出各种各样的高质量的矢量图形,
支持很多您想象得出的功能:几何图形、动画、渐变色、滤镜效
果等——最关键的是:它是完全是用普通文本来描述的!也就是
说:这是一种专门为网络而设计的基于文本的图像格式。

  更加有趣和令人兴奋的是:这种文本又是基于XML
(Extensible Markup Language)的!因此,前途的确不可限量。

  今后的网络上将会有更多标准格式的图形文件存在:GIF、
JPEG、PNG、SVG……之所以这么说,是因为SVG标准是由众多
厂商和W3C(World Wide Web Consortium)共同制定的,目的
就是为了要在网络上创建一种新的、大家认同的、可扩展的、开
放的图形格式。这些厂商都是业内知名的企业:包括Adobe、Apple、
Autodesk、BitFlash、Corel、HP、IBM、ILOG、INSO、Macromedia、
Microsoft、Netscape、OASIS、Open Text、Quark、RAL (CCLRC)、
Sun、Visio、Xerox等。他们也纷纷推出了自己开发的相应的浏览
软件和插件。而且他们的很多主流产品也都开始支持SVG输入
或者输出。

===========
什么是SVG?
作者: Passion
(转载时请注明作者以及保持完整性)

“什么是SVG?”

首先接触SVG的人,问得最多的就是这个问题。也是,学习一样新东西,要是连它是什么都搞不懂,还能学出个啥来?——SVG是Scalable Vector Graphics的缩写,翻译成中文是“可升级矢量图像”。它是国际WWW组织委员会(W3C)联合一大批图像界的巨头们一块儿制订的一项新的矢量图像格式标准。用W3C的原话来解释,SVG可以如下描述:

“SVG是一种使用XML来描述二维图像的语言。它允许三种形式的图像对象存在:矢量图形、点阵图像和文本。各种图像对象能够组合、变换并且修改其样式,也能够定义成预处理对象。文本是XML名字空间中的有效字符,这些字符能被作为SVG图像的关键字而存留在搜索引擎中。

“SVG的功能包括嵌套变换、路径剪裁、透明度处理、滤镜效果以及其他扩展,同时,SVG图像支持动画和交互,也支持完整的XML的DOM接口。任何一种SVG图像元素都能使用脚本来处理类似于鼠标单击双击以及键盘输入等事件。并且因为同Web标准兼容的缘故,SVG还能够在同一个Web页面里凭着继承自XML的名字空间等特性来完成一系列交互操作。”

当然,光看这段话,谁都看不懂SVG是什么。

外国的语言不管怎样翻译过来都有些别扭,因此也对理解造成了许多障碍。应该怎样用我们自己的思维来理解它?其实也不难。——如果你熟悉用文本描述网页的HTML,那么因为SVG图像也是采用纯文本来做图像的“源文件”的缘故,从形式上来说你就很容易上手;如果你了解古老的矢量图描述语言PostScript,那么因为SVG是源自这老古董的缘故,所谓“旧瓶装新酒”,这原理学起来也不会太难;如果你对目前流行的Flas易做图有一定的制作经验,那么因为SVG和SWF文件都是基于矢量的缘故,你会在熟悉SVG的过程中发现它和SWF文件有着巨大的相似之处;如果你正巧懂XML,那么因为SVG本身就是符合XML标准的语言的缘故,你马上就知道SVG只是XML中的一种功能强大的图像描述语言而已;如果你说:“我什么也没学过。”那也不要紧,只要你在网络上见过各种色彩绚丽的东西,不管动还是不动,你都应该知道这一切都可以用SVG来高效率地完成。当然,也许不是“现在”。

那么,SVG到底是什么东西,竟然能有这么大的魔力?

实际上,赋予SVG魔力的不是它自己,而是众多现在或者将来在各个领域中支持SVG图像格式的软硬件。如果一定要说SVG本身的好处的话,也只能是因为它形成了统一的优秀标准。只要符合这套标准的东西就能使用SVG图像,而不管在什么领域。再者,SVG图像也不仅仅是图像,它拥有文字、交互和动画的能力,拥有XML语言的开放性,因此也就拥有了强大的生命力。阻挡它发展的唯一障碍只是人们的守旧思维。

SVG是一种明文图像格式。明文,也就意味着这个图像能用记事本来编辑(记事本编辑图像?见鬼了吧?——没错!),既然多姿多彩的网页可以通过编辑其HTML源文件来修改,为什么图像就不能?以前缺少通用的、能用纯文本描述图像的语言,现在有了SVG,总算不留空缺了。

SVG基于XML。学习过XML语言的朋友们都知道,XML是一种开放式的标记描述语言,也就是说它只规定了一个框架,用户可以自己定义许多用“<”和“>”括起来的标签来描述自己所需要的东西。SVG便正巧是属于XML的、有着自己一套强大功能的标签的语言。当然,SVG在问世的时候如果各大头头们串通好了说不使用XML的话,到现在SVG也仍然能够问世,而且功能也不会差,不过W3C考虑到了XML已经日益成为了网络上的数据交换标准,因此乐得用现有的XML规范替SVG先铺平一下道路,省去了许多规定SVG语法完整性方面的细节,这样也可以充分利用现有的与XML相关的资源。

(这里需要说明一下,如果你不懂XML也不要紧,SVG文件中真的涉及到XML规范的东西充其量也不会超过三行。——什么?你问我一行多长?我算算……二八十六,六九五十四,四七二十八,……喂喂,别晕倒,我开玩笑的!)

SVG是矢量化的图像描述语言。这也就是说,它不像点阵图那样把每一点的颜色值都记下来,它只是记录了类似于“从这儿到那儿有一根多粗的什么颜色的线段”这样的信息,这正是矢量图像的精髓。SVG中描述一根线,用的就是这样一段源文件: <line x1="0" y1="0" x2="100" y2="100"/>,这是不是很容易理解?——这个<line>就是SVG易做图有的标签,专门用来描述线段的。而其余种类的图像对象也有各自的描述标签。

算了,说了这么多,大家还没见过SVG的影儿呢。下面就是一个标准的SVG文件,虽然它不显示什么东西:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg width="12cm" height="4cm">
</svg>
前三行是与XML有关的定义语句,功能也就说明自己是XML文档。(我说过不超过三行嘛!),至于具体意义,等SVG入了门再去钻研也行。反正几乎所有的SVG文件开始三行总是如此。
后面<svg width="12cm" height="4cm">是一个标准的大标签。</svg>当然就是对应的结束标签了,在这里它们中间什么内容也没有。——这一点是不是和HTML很相象?不过这里要说明的是,XML文档是区分大小写的,SVG文件也不例外。不注意这一点,以后编SVG文件时出什么毛病可别找我。

当然我们也可以给这个SVG文件加一点内容:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg width="8cm" height="8cm">
  <circle cx="4cm" cy="4cm" r="3cm"
    style="fill:green; stroke:black; stroke-width:0.5cm" />
</svg>
看看这里,<svg>与</svg>标签中间多了一个<circle/>标签,当然是描述一个圆用的。再看看这句:style="fill:none; stroke:red; stroke-width:0.2cm" ,嘿嘿,熟悉CSS的朋友该欢呼了。的确,SVG兼容CSS2层叠样式表,这也就是说,SVG中各种图像对象的外观属性等东西可以通过CSS的形式来定义,是不是又可以少学点东西了?

接下来,你可以吭哧C再吭哧V地把上面的这点代码粘贴到记事本中,将其保存成一个扩展名为.svg的文件。好啦,第一个有点实质性东西的SVG文件就做好了。

不过倒霉的是,SVG只是一个图像的描述标准,“描述”,明白么?这是一套空头的规定,要是没有能解释这种规定的东西,SVG就成了空中楼阁。——我们现在手头没有能解释这套空头规矩的软件是不是?那么麻烦了,要看这个SVG图像的效果,还得找支持SVG图像格式的浏览器插件去。(上http://www.adobe.com/svg处去下吧。)

好了,在下载浏览器插件以观赏SVG图像以前,我们可以先静下来思考一下。——

当年我们是怎样走近HTML的语法的?不也就是从源文件入手?那时候还没有FrontPage,Dreamweaver就更不用说了。要编网页,算起来最顺手的工具还是记事本,幸亏有个NN或IE能看它。

现在,SVG的这种状况就像当年的HTML一样,有规定,没工具,编SVG图像比较基础的工具仍然是记事本,幸亏要看它的时候也能找到浏览器插件。

不过,现在的情况和当年不同。SVG是先有标准,由标准推动工具的统一发展,杂乱的HTML则相反。这两种场面孰高孰低,不言自明。

SVG,Scalable Vector Graphics,明文“可升级矢量图像”,总是有前途的。

上一个:SVG与SWF的对比(别以为这与XML无关啊,这是XML在矢量图形方面的应用)
下一个:XML在各个领域中的运用

CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,