RSS
热门关键字:
当前位置 : 主页>编程开发>Jsp教程>列表

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

来源:我要研发网 作者: 时间:1970-01-01 点击:



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

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

  今后网络上将会有更多标准格式图形文件存在:GIF、
字串3

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输入
字串8

或者输出。

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

“什么是SVG?”

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

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

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

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

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

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

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


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

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

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

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

字串6



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


\"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd\">


前三行是与XML有关定义语句,功能也就说明自己是XML文档。(我说过不超过三行嘛!),至于具体意义,等SVG入了门再去钻研也行。反正几乎所有SVG文件开始三行总是如此。
后面是一个标准大标签。当然就是对应结束标签了,在这里它们中间什么内容也没有。——这一点是不是和HTML很相象?不过这里要说明是,XML文档是区分大小写,SVG文件也不例外。不注意这一点,以后编SVG文件时出什么毛病可别找我。 字串5

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


\"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd\">

style=\"fill:green; stroke:black; stroke-width:0.5cm\" />

看看这里,标签中间多了一个标签,当然是描述一个圆用。再看看这句:style=\"fill:none; stroke:red; stroke-width:0.2cm\" ,嘿嘿,熟悉CSS朋友该欢呼了。确,SVG兼容CSS2层叠样式表,这也就是说,SVG中各种图像对象外观属性等东西可以通过CSS形式来定义,是不是又可以少学点东西了?

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

字串4



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

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

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


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

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

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

最新评论共有 0 位网友发表了评论
发表评论
评论内容:不能超过250字,需审核,请自觉遵守互联网相关政策法规。
用户名: 密码:
匿名?
注册
相关文章