SVG是一种采用XML来描述二维图形的语言。SVG可以构造三种类型的图形对象:矢量图形、位图图象和文字。图形对象可以被组化、样式化、变形和重新组合,包括图象嵌套、变形处理、剪辑路径、Alpha蒙板、滤镜特效和模板对象。
SVG图形可以是动态的、可交互性的。动画通过直接声明(比如在SVG里嵌入SVG动画元素)或通过脚本来进行定义或触发。
SVG通过使用脚本语言来完成比较复杂的应用,脚本语言调用SVG对象模型(SVG Document Object Model)来访问或控制所有的元素、属性和属性值。事件处理器如onmouseover、onclick等可以应用到SVG图形对象上,由于SVG和其它Web标准完全兼容和同步,如XML,CSS2,XSLT,DOM2,SMIL,XLINK,HTML等。因此,在同一Web页面上,有些特性,如脚本编程等,可以同时应用在XHTML和SVG元素上。
SVG不但可以表现图象,还可以表现文字、音频等其它信息,对于那些有视觉障碍的人,可以通过可替换的方法把图象替换为音频信息,这样对那些有视觉障碍的人,也能够得到SVG所表现的信息。另外,对那些手持设备、车载设备、无线设备来说,它们的屏幕一般都比较小,而且显示分辨率低,SVG的矢量特性也可以让这些设备清楚地浏览SVG图象信息,这都是目前的位图图象所不能做到的。
SVG是可升级矢量图形(Scalable Vector Graphics)的简称。
可升级(Scalable)意味着统一地增加或减少。对图象来说,可升级意味着图象尺寸并不限定固定的大小,对互连网(Web)来说,可升级意味着一个特殊的技术,它能够增加文件数量、用户数量和应用的种类。SVG作为Web上的一个技术之一,可升级含有这两方面的意思。
SVG图象可升级到不同的显示的分辨率,例如:相同尺寸的SVG图象,打印输出使用高分辨率,而在屏幕显示时可以使用不同的分辨率。同一个SVG图象能够以不同的尺寸放到同一页面上,也可以被不同的其它页面所使用。我们可以放大一个SVG图象,来了解其精美的细节信息。
SVG是可升级的,原因还在于:同一段SVG内容,既可以是独立的图象,也可以被引用到一个页面,也可以嵌入到另外的SVG图象中。因此,一个复杂的SVG图象可以有多部分组成,也可以由多人共同完成。符号、标记、字体能够重复利用图形的某些组成部分,这样可以充分利用HTTP的缓存优势。
矢量图象包含有诸如直线和曲线等几何对象。这相对于以象素保存信息的位图格式的图象(如PNG、JPEG)来说有更大的灵活性。矢量格式图象的最大好处就是,它可以和位图图象集成在一起,也可以把他们和矢量信息结合在一起以产生更加完美的图象。SVG也不例外。
由于所有的显示器都是基于点阵的,位图图象和矢量图象的差别就归结为他们是在客户端还是在服务器端进行图象展现处理;SVG能够控制图象展现的过程,不致于出现粗糙或带锯齿的图象。SVG还能够提供客户端的滤镜效果。
大多数XML语法描绘的都是文字信息或原始数据,他们不能提供图象的能力,SVG能够提供丰富的、结构化的矢量和矢量与图象混合的图象信息。
XML是W3C的推荐标准,用于结构化的信息交换,已经得到广泛的普及和应用。SVG是建立在此基础上的,有很明显的优势,比如:广泛的国际化基础,强大的结构化能力,以及对象模型等。
样式单能够很好地控制文字的外在表现方式,它的灵活性、快速下载和易于维护的特性早已被人们接受,SVG把这种技术扩展到了图象世界中。脚本编程、DOM对象和CSS样式单的组合常被人们称作Dynamic HTML,广泛应用在动画制作、交互性和外在的表现效果中,SVG也可以借助脚本语言进行操纵文档对象和样式单。
使用XML,可以很方便地建立模型。对文本格式的语法来说,模型通常是建立在段落级和短语级,而不是在独立的名词、副词或者是音素上。SVG是在图形对象级建立图象模型而不是独立的许多点。
SVG提供了一个通用的path元素,可以用来创建各种类型的图形对象,但同时也提供了一些基本的形状元素如矩形和椭圆等,这些基本形状对编写代码是非常方便的,也可以应用在复杂的路径描绘中。SVG提供对坐标系统的精确控制,图象对象的定义和变换都是在这个坐标系统之中。
SVG中的符号
SVG也能够提供一些象电子、绘画和流程图等使用的标准符号,但目前的版本并没有提供这些。SVG允许用户创建和共享他们的符号库,设计者能够清楚地知道他们使用的符号的外在表现,而不必担心那些不支持的符号。符号也可以以不同的尺寸和角度使用,也可以为了达到与其他的图形对象相互组合而进行重新定义样式。
SVG的展现效果
许多Web中使用的图象都是依靠图形工具包来创建模糊、阴影、光线等效果的,要在客户端展现这些效果是不可思义的。SVG可以单独地或以组合的方式对滤镜效果进行描述,这些效果可以用在客户端,当SVG图象展现的时候展现这些效果,而图象仍可以以图象的分辨率的进行缩放和显示。
SVG的文字
丰富的图形效果有时候会在很大程度上依赖于所使用的特定的文字和文字间距。大多数情况下,图象设计者为了防止图象上的被别人替换,往往会把文字转换成图象,原来的文字也就变成了不可搜索和访问的了。SVG的标准制定者在听取了设计者们的意见后,在SVG中保留了文字元素,这样,文字和图象都被分别进行展现。
SVG的动画
动画可以通过脚本语言操纵文档中元素来实现,但脚本的编辑和交换通常很麻烦。SVG和SYMM工作组经过集思广益,共同在SVG中定义了动画元素,这样,在网页图形中常用的动画效果就可以在SVG中使用
SVG(Scalable Vector Graphics)代表可升级矢量图象,是新一代图象格式的标准。它给Web开发人员提供了一种利用XML(Extensible Markup Language)创建静态图像和动态图像的方法,是图象技术上的一次革命。利用此技术,Web开发人员对页面进行更加精确的控制,SVG的动画片技术可以实现从简单的直线运动到复杂的3D螺旋变形的控制.
SVG 有许多其他图像方法所不具有的优点,下面就是其中一些:
1,和其它媒介兼容,比如无线设备等。
2,可升级的服务器端解决方案。
3,文件尺寸小,方便Web页面下载。
4,无限的颜色和字体的选择。
5,图像可任意缩放。
6,可以用脚本控制与客户的交互事件。
7,方便浏览器进行高清晰的打印。
8,可使用滤镜效果。
9,基于文本的格式,可以轻松地和其它WEB技术集成。
10,内建的国际语言支持。
11,减少维护成本。
12,轻松升级。
13,广泛的多媒体兼容性。
由于SVG和Flash有很多共同的特性,通常有人把它们放到一起进行比较,确实,两者都和其它标准有很好的兼容性。事实上,SVG比Flash有一些独特的特性。SVG可以使用CSS(Cascading Style Sheets)、Script脚本和DOM(Document Object Model ),是完全公开源代码的技术,初学者完全可以从别人的现成的作品中进行学习。而Flash采用的是独有的专利技术,并不是完全开放的标准,当你在场景上单击右键时,你看到的不是源代码。
然而,由于某些原因,SVG还并没有象Flash那样流行,但随着时间的推移,SVG也将很快流行起来的。Mozilla计划完全支持SVG技术,Microsoft也开始支持这种技术,(其实,IE6已经支持SVG。)Adobe GoLive5也宣布支持SVG。此外,SVG编辑器也开始在网络上风行,Jasc的WebDraw已经可以以可视化的方式创建SVG格式的图像了。Adobe 也有生成SVG格式图象的插件。SVG的未来不但是光明的,而且将会在不久的将来在Web领域扮演重要的角色。
目前,SVG的另一个不足之处就是,没有一个浏览器完全支持它,要浏览SVG格式的图像,需要安装Adobe SVG插件(plug-in),但目前它也不能完全支持SVG的标准。另一个缺陷就是,SVG的在线资料太少,Web开发人员很难找到可参考的资料和素材。
SVG是设计和编程之间的桥梁,与传统的图像制作方法不同,SVG图像是由程序代码生成的,这种语言是基于XML的,因此,它可以和W3C的其它标准无缝集成,比如DOM,CSS等。
为了便于理解,我们可以把浏览器想象成一个空的画布,上面定义了许许多多的X,Y的坐标点,画布上的每一个点,都可以通过数学计算公式创造出一个形体。使用数学的术语可能会使人产生恐惧感,事实上,Web开发者在创建HTML页面时一直在使用这样的数学计算公式已经好长时间了,例如:一个CSS的层,通过设定层的top(y坐标点)和left(x坐标点)属性值,就可以定位它的位置,这就是利用数学公式来实现。SVG就是利用类似的原理来创建图像的。
SVG能够显示24位颜色的图像,而图像尺寸却非常的小,图像在放大或改变尺寸时不会有任何质量上的损失,更重要的是,SVG的每一个元素和元素的每一个属性都能够动态进行改变。这也是SVG最有竞争力的一面。