【转载】SVG是什么?SVG有什么用途?

标签: 未分类 | 发表时间:2012-10-30 15:37 | 作者:HTML5研究小组
出处:http://www.mhtml5.com

一、SVG技术背景

随着网络上信息数据的大量涌现,如何正确显示和出版是有效传输、接收和利用它们的基础。图形、图像是信息数据可视化的主要方式。但现有的图形、图像格式存在着缺陷:非开放式,显示和印刷质量及适应性差,难以创建Web上图文信息的个性化定制、交互式以及实时动态方面的应用等。SVG正是在这样的背景下诞生的。

SVG(Scalable Vector Graphics,可伸缩性矢量图形)是由万维网联盟(W3C)推出的基于XML编码的开放式图形、图像标准。它虽然是一种二维矢量图形格式,但其中可以包含矢量图形、光栅图像及文本等。这种新的图形格式不但拥有Web矢量图形的固有特性,更是结合了XML及其相关技术的所有优越性能。

W3C的开源SVG已成为全球图形技术的发展潮流,它将引领我们走向下一代互联网,我们需要了解、学习并掌握这种图形革新技术。

在 2003 年1月,SVG 1.1 被确立为 W3C 标准。参与定义 SVG 的组织有:Adobe、苹果、Auto Desk、Bit Flash、Corel、惠普、IBM、ILOG、INSO、Macromedia、微软、Netscape、OASIS、Open Text、Quark、RAL(CCLRC)、Sun、Visio、施乐等,所以SVG不是一个私有格式,而是一个开放的标准。也就是说,它并不属于任何个体的专利,而是一个通过协作、共同开发的工业标准。正是因为这点,才使得SVG能够得到更迅速的开发和应用。

与其他图像格式相比,使用 SVG 的优势在于:

SVG 可被非常多的工具读取和修改(比如记事本),支持多种滤镜和特殊效果,在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果,易于修改和编辑。
SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG可以方便的建立文字索引,从而实现基于内容的图像搜索,图像中的文本是可选的,同时也是可搜索的(很适合制作地图)。
SVG 可与现有技术可以互动融合。例如,SVG技术本身的动态部分(包括时序控制和动画)就是基于SMIL标准。另外,SVG文件还可嵌入JavaScript(严格的说应该是ECMA Script)脚本来控制SVG对象,还可以与 Java 技术一起运行。
SVG 文件是纯粹的 XML。为了保证网络图像能够顺利地和目前已经由W3C开发的 D0M1,DOM2,CSS,XML,X Pointer,XSLT,XSL,SMIL,HTML,XHTML技术,以及其他标准化技术,如 ICC,URI,UNICODE,RGB,ECMA Script/JavaScript,Java协调一致,SVG是完全基于x M L(Extensible Markup Language可扩展置标语言),并能和上述各项技术相融会的新一代的网络图像格式。SVG并非仅仅是一种图像格式,由于它是一种基于XML的语言,也就意味着它继承了XML的跨平台X和可扩展X,从而在图形可重用X上迈出了一大步。如SVG可以内嵌于其他的XML文档中,而SVG文档中也可以嵌入其他的XML内容,各个不同的SVG图形可以方便地组合,构成新的SVG图形。
SVG 图形格式可以用来动态生成图形。例如,可用SVG动态生成具有交互功能的地图,嵌入网页中,并显示给终端用户

可以说,SVG的出现带来了一次技术革命。利用SVG能够创建更加丰富多彩的信息可视化和交互性的应用,尤其是可以创建具有动态的、数据驱动的、交互式图形、图像。另外,由于是纯文本格式的.SVG比传统的图形、图像格式如GIF和JPEG占用更少的空间。因此,SVG更加适合有线带宽,并可提高下载速度。SVG和XML的开放式标准特性使其成为国际性语言。SVG标准得到了IBM、Adobe、Microsoft、Corel等几十家大公司的支持,其最新的版本是SVG 1.2。

总之,SVG技术的出现,变革了在Web上图文传递信息的方式,并将产生一种更适于Web信息发布的工作流模式,其中包括Web信息显示和印刷出版的组织方式。

二、SVG要素

2.1 SVG的图形对象使用XML,可以很方便地建立模型。对文本格式的语法来说,模型通常是建立在段落级和短语级,而不是在独立的名词、副词或者是音素上。SVG是在图形对象级建立图像模型而不是独立的许多点。

SVG提供了一个通用的path元素,可以用来创建各种类型的图形对象,但同时也提供了一些基本的形状元素如矩形和椭圆等,这些基本形状对编写代码是非常方便的,也可以应用在复杂的路径描绘中。SVG提供对坐标系统的精确控制,图像对象的定义和变换都是在这个坐标系统之中。

2.2 SVG的符号SVG也能够提供一些像电子、绘画和流程图等使用的标准符号,但目前的版本并没有提供这些。

SVG允许用户创建和共享他们的符号库,设计者能够清楚地知道他们使用的符号的外在表现,而不必担心那些不支持的符号。符号也可以以不同的尺寸和角度使用,也可以为了达到与其他的图形对象相互组合而进行重新定义样式。

2.3 SVG的展现效果许多Web中使用的图像都是依靠图形工具包来创建模糊、阴影、光线等效果的,要在客户端展现这些效果是不可思议的。

SVG可以单独地或以组合的方式对滤镜效果进行描述,这些效果可以用在客户端,当SVG图像展现的时候展现这些效果,而图像仍可以以图像的分辨率的进行缩放和显示。
2.4 SVG的文字丰富的图形效果有时候会在很大程度上依赖于所使用的特定的文字和文字间距。

大多数情况下,图像设计者为了防止图像上的被别人替换,往往会把文字转换成图像,原来的文字也就变成了不可搜索和访问的了。SVG的标准制定者在听取了设计者们的意见后,在SVG中保留了文字元素,这样,文字和图像都被分别进行展现。

2.5 SVG的动画动画可以通过脚本语言操纵文档中元素来实现,但脚本的编辑和交换通常很麻烦。SVG和SYMM工作组经过集思广益,共同在SVG中定义了动画元素,这样,在网页图形中常用的动画效果就可以在SVG中使用。

2.6 SVG的DOM

SVG DOM基于DOM规范。DOM是访问和维护XML文档的应用程序接口。它定义了文档的逻辑结构以及存取和维护文档的方法。在DOM的详细说明中,“文档” 指的是广泛意义的文档。现在XML可以把这样的数据表示为文档,并由DOM管理。利用DOM可以建立文档,遍历文档结构,还能增加、删除、修改文档元素和内容。SVG DOM遵循DOM1、DOM2规范的大部分内容,而且完全支持DOM2 Core规范,因此,SVG中的每个属性和样式都可以通过脚本编程来访问;另外,SVG也提供了一套扩展的DOM接口,通过脚本编程实现动画效果的手段更方便快捷。脚本语言中的定时器可以很好地触发和控制图像的运动。

相关 [svg svg] 推荐:

了解SVG

- - CSDN博客推荐文章
语言: JavaScript,HTML, SVG.         SVG- 可缩放矢量图形 ,是一个XML风格标记驱动的矢量图形的浏览器渲染引擎. 除了IE 9.0和Android V3之前版本外的所有浏览器都支持SVG. Canvas也有同样的支持情况,所以问题往往表现为:我们应该使用哪种方案.

SVG的用法

- - WebHek
先让大家感受一下用SVG技术制作的简单动画:. 如果你看不到这个演示,说明你的浏览器不支持SVG,请使用最新版的谷歌浏览器或火狐浏览器. 《 如何画出一条会动的线》这篇文章专门介绍了上面这SVG动画是如何简单的实现的. SVG是 Scalable Vector Graphics三个单词的首字母缩写.

SVG使用示例

- - JavaScript - Web前端 - ITeye博客
当用户在圆上点击时,使用js创建一个元素:. // 更高效的计时器,类似于setTimeout,不会发生丢. 已有 0 人发表留言,猛击->> 这里<<-参与讨论. —软件人才免语言低担保 赴美带薪读研.

SVG动画入门

- - Web前端 - ITeye博客
今天我们继续来学习SVG动画方面的知识. 一听到动画效果,你可能就觉的头都打啦. 不要担心,SVG本身提供的动画属性非常容易使用,今天我们就来学习一下基础的知识. SVG中提供了 animate的方法来制作动画属性:. 在上面的代码中,我们在元素里面添加了一个 的标签. 包含了下面的一些属性.

理解SVG的viewport,viewBox,preserveAspectRatio

- - Web前端 - ITeye博客
        一个svg,设置了viewBox之后,viewBox的长宽值如果都小于svg的viewport的长宽值,那么结果一定是放大;但是viewBox的长宽值一旦有一个值大于vewport之后,最后的实际效果就不是放大,而是缩小了.         因为viewBox的目的是要自己设置的长宽范围填满viewport.

【转载】SVG是什么?SVG有什么用途?

- - HTML5研究小组
随着网络上信息数据的大量涌现,如何正确显示和出版是有效传输、接收和利用它们的基础. 图形、图像是信息数据可视化的主要方式. 但现有的图形、图像格式存在着缺陷:非开放式,显示和印刷质量及适应性差,难以创建Web上图文信息的个性化定制、交互式以及实时动态方面的应用等. SVG正是在这样的背景下诞生的. SVG(Scalable Vector Graphics,可伸缩性矢量图形)是由万维网联盟(W3C)推出的基于XML编码的开放式图形、图像标准.

【转载】比较html5、GML、SVG、VML

- - HTML5研究小组
web图形方案比较 html5、 GML、 SVG、 VML. GML、SVG和VML都是基于XML的可用来描述矢量图形的标记语言,都是XML词表,它们的语法并不难理解,但它们都有各自不同的用途和特点,下面简单介绍一下. 是基于XML的空间信息编码标准,由OpenGIS Consortium (OGC)提出,得到了许多公司的大力支持,如Oracle、Galdos、MapInfo、CubeWerx等.

jQuery矢量SVG地图插件JVectorMap

- - HTML5资源教程
JVectorMap是一款基于jQuery的矢量地图插件,它是基于SVG结构的,和其他jQuery地图插件不同的是,jVectorMap是矢量地图,但是它同样支持地图缩放和地图平面移动等相应的功能. 由于JVectorMap是基于jQuery的,所以支持大部分主流的浏览器,应用也相当广泛.

未来必热:SVG Sprite技术介绍

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=4264. 这里所说的Sprite技术,没错,类似于CSS中的Sprite技术. 图标图形整合在一起,实际呈现的时候准确显示特定图标. 另,本文图片甚多,爪机党继续浏览需慎重. 二、SVG Sprite与symbol元素.

五项Web技术:WebGL和SVG名列其中

- - 脚本爱好者
  Bruce Lowson 是 Opera 开放 web 标准的撰写人员之一,一些没有包含在 HTML5 之内的浏览器技术十分奇妙,包括 WebGL 和 SVG,作者希望通过本文与共同爱好者们分享.   别担心,咱们不去管那些啦,因为有些还远远没有完成呢,在浏览器中见到它们还要等一阵子. 然而,其它已经在浏览器中,或者距离您很近,或者马上就要出现.