svg是什么

SVG(Scapable Vector Graphics,可缩放矢量图像)是互联网联盟(W3C)的正式推荐标准,它是一种使用XML来描述二维图像的语言。SVG允许3种形式的图像对象存在,分别是矢量图形(如由直线、曲线等组成的路径)、点阵图像和文本。各种图像对象能够组合、变换,并且能修改其样式,也能够定义成预处理对象以便再用。SVG还支持各种特效,包括嵌套变换、路径剪裁、透明度处理、滤镜效果以及模板对象等。同时,SVG可以是互动和动态的,动画可以直接加入SVG文本,也可以通过脚本加入。在新的SVG版本中,还可以表现视频、音频等其它信息。SVG通过使用脚本语言来完成比较复杂的应用,脚本语言调用SVG对象模型(SVG Document Object Model)来访问或控制所有的元素、属性和属性值。任何一种SVG图像元素都能使用脚本来处理类似鼠标单击、双击以及键盘输入等事件。由于SVG文本是XML名字空间中的有效字符,这些字符能作为SVG图像的关键字而通过搜索引擎进行查询。

与现有的图像格式(如JPEG、GIF和PNG等)和矢量图形格式(如VML、PDF、SWF等)相比,SVG具有如下优势:

1) 基于XML标准

XML是W3C的推荐标准,用于结构化的信息交换,已经得到广泛的普及和应用。SVG是建立在此基础上的,有很明显的优势,如:广泛的国际化基础、强大的结构化能力、以及对象模型等。

2) 高质量的图像

由于基于矢量,使得SVG图像的质量得到大大的提高。放大、缩小以及各种特效都比位图的表现要好,在打印的时候,完全可以印刷质量输出图片。SVG图像在客户端动态绘制,用户可以随意调整图像的一些参数而不会导致图像模糊。SVG图像的大小只与图形的复杂程度有关,而与图形的具体尺寸无关。(学电脑)

3) 更精确的颜色

SVG可靠的颜色特性将给下一代在线电子商务带来许多新的面貌——系统可以根据浏览器窗口的配色方案下载与之相匹配的配色方案。SVG支持ICC色彩概貌的行业标准,如sRGB。

4) 灵活易用的文件格式

SVG主要由3个部分组成:矢量图形、位图和文字。由于SVG文件是以文本的形式(XML)存放的,更改起来是非常方便的。也就是说,不用任何图像处理工具,仅仅用记事本就可以生成一个SVG图像。

5) 支持互动和动画

SVG支持SMIL(synchronized multimedia integration language),允许用户自由地同SVG中的元素完成一些互动,从而完成既定的目标,这一点在目前单独依靠图片是完成不了的,需要由网页中的Script语句来实现。

6) 支持字符查找

由于SVG是文本格式,查找图像中的字符在SVG中成为可能(在其它格式的图像文件中是不可思议的)。

7) 支持Xlink 和Xpointer

可以在SVG文档中加入超链接,这样我们可以制作一个完全由SVG构成的WEB站点,这个站点可以包含图片、动画、文本等多媒体信息,并拥有与用户进行互动的能力。

8) SVG是一种真正开放式的、不依赖供应商的2D矢量图形格式

SVG由W3C开发和维护,W3C曾定义了HTML和XML这样的开放标准。而且,SVG不属于任何人,也没有专利权。这意味着,不存在许可费用,供应商可以无缝地创作和分享内容。不同于Mac OS的PICT或Windows的WMF等其它矢量格式,SVG具有平台独立性。

9) SVG从开始设计,就注定是一种强大的通用标准

制订SVG的W3C工作组成员包括Macromedia、Adobe和AutoDesk,它们都有强烈的意愿,尽量把支持其格式的更多功能包括在SVG里面。这使得SVG适用于范围很广的各种应用,包括CAD、GIS和娱乐。

Mobile SVG及其特点

由于SVG的大部分特性也非常适合于无线领域的图形应用,无线领域要求开发更适合于移动设备上应用的SVG形式,为了满足业界的需求,互联网联盟(W3C)的SVG工作小组制订了适合于移动应用领域的专用标准Mobile SVG。由于移动设备在CPU速度、内存大小、支持的显示颜色等各个参数上有很大的不同,单一的专业标准很难满足所有移动设备的要求。所以,为了覆盖不同移动设备家族的需求,SVG工作小组最终制订了两个级别的Mobile SVG专业标准。第一级别的专业标准是SVG Tiny (SVGT),适用于资源高度受限的移动设备,如手机;第二级别的专业标准是SVG Basic (SVGB),适用于高端的移动设备,如PDA等。由于移动设备的CPU速度、内存容量、显示屏都比较小,相对于SVG,Mobile SVG在支持的内容、属性、功能等方面作了限制。为了保持内容和处理软件的兼容性,在制订标准时,把SVGT列入SVGB的子集,把SVGB列入SVG的子集。按SVG格式制作的图像在保持图像线条等不变的同时,通过降低精度、省略线条的粗细和浓淡等信息标记可以将其转换成SVG Basic和SVG Tiny格式。

Mobile SVG与位图相比,在对动画、地图和互动图形进行编码和显示方面的优势是明显的。位图是静态的,而矢量图形是动态的、可以缩放的,可以描述非常高级的图形特点,如动画、分层图形、半透明对象、画中画、复杂形状和字体效果。另外,Mobile SVG所制作的矢量图形可以执行交互式操作,如可以缩放、平移、附加链接。

利用Mobile SVG的缩放性,图形就可以调整大小,以适应任何显示器或打印机,或者分辨率,而不会导致品质损失。这在无线世界是一个优势,因移动设备的形状和尺寸很多。用户还可以在不影响图形质量的情况下对图形进行放大,特别是用手机的小屏幕看图时比较有用。

Mobile SVG文件通常小于位图文件,从而可以缩短无线下载时间,这点对于非常计较带宽的移动应用来说,尤其重要。 另一个例子,如将当前屏幕上的图形放大时,若是位图,则会出现使图像模糊的马赛克效应,此时若要获得高质量的放大图像,则需重新从服务器获取放大后的图像,增加了网络的流量;而SVG图形是矢量数据,只需利用原来的数据,在客户端进行放大就可以得到没有质量损失的放大图形。

Mobile SVG的另一个强大功能是可以存储图形中各元素的相关信息。例如,SVG可以识别出图形中某个带有一个三角形的正方形是一所房子,并且可以知道房子的楼层数等信息。SVG还支持事件,从而可以产生超链接或者嵌入文字的弹出窗口,以向用户提供更多的信息或者可点击的选项。另外,由于SVG是文本格式,可以利用基本的搜索引擎对SVG图形中的文字进行搜索,这样可以查询SVG图形中具有某种属性的图形元素,如上面所说的房子。

Mobile SVG将增强MMS

Mobile SVG最近已被3GPP组织所采纳,用于多媒体短信服务(MMS)。采用Mobile SVG,将使许多2.5G和3G MMS服务成为现实。

基于Mobile SVG的MMS与无线系统目前提供的简单文本和基于位图的图形相比,可以使用户获得互动性更强和更引人入胜的体验。另一方面,节省带宽可能是Mobile SVG最吸引运营商的特点。Mobile SVG不同于流式音频和视频,它可以顺利工作于2.5G,甚至2G网络。内容丰富、互动的Mobile SVG动画可以在小于12kb的带宽上传输。

Mobile SVG增强了MMS短信,这对于手机制造商具有明显的吸引力。而且与运营商一样,OEM厂商也可以在不对设计作重大变动或不显著增加成本的情况下,增加Mobile SVG功能。由于Mobile SVG是内容如此丰富和通用的平台,最适合于帮助设备制造商提供差别化服务。

现在已出现相应的工具,可以把现有的内容转换成Mobile SVG,并根据手机和网络条件进行优化,因此,内容供应商将能够降低开发难度和成本。借助于合适的系统内容,开发商应该能够创作或一次性地转换自己的内容,使几乎所有的设备都能显示这些内容,只要这些设备具备相应的功能和SVG播放器。这种情况类似于现在用HTML制作网页。

对于下一代无线系统(3G)来说,是否能够成功取决于用户。而对于无线用户来说,如果存在充分的理由让他们更换现有的手机,他们就会更换。经由像Mobile SVG这样以用户为中心的技术增强的MMS,将会产生更多促使手机升级的充分的理由。所以,对于业界来说,其面对的挑战是实现和应用Mobile SVG。

Mobile SVG适合的其它应用类型和内容

虽然Mobile SVG已开始在MMS上显露身手,而实际上除了MMS,Mobile SVG还有丰富的应用,包括:娱乐:互动卡通、贺卡和动画等。

基于位置的服务:在地图上显示运动物体及相关链接,同时允许用户缩放地图、切换不同图层的可见性、选择特定的区域等;具体应用如汽车导航、汽车调度、电子导游、移动广告等。

现场服务:包括技术制图,借助于Mobile SVG,就可以绘制出前后一致的、高品质的图像,可以看全景,也可以看局部细节。

Email附件:借助Mobile SVG,可以在支持MMS的移动设备上显示常见的办公文档,如MS Word、MS PowerPoint、Adobe PDF等文档格式,并且保持文档内容的格式、图形、字体信息的完整性。

其它任何JPG、GIF或其它位图格式不能满足要求的无线应用场合,如要求提供内容丰富、可伸缩、互动的图形或动画的地方。

对于实现Mobile SVG的考虑

Mobile SVG主要用于各种资源非常有限的移动设备,所以在实现Mobile SVG时,性能指标成为最主要的指标。手机的内存很小,CPU的速度也很慢,PDA的内存会稍微大一点,CPU的处理能力会好一点,但两者的显示屏分辨率都很小。尽管Mobile SVG针对移动设备进行了特别的设计,使得在移动设备上实现SVG更容易,但要实现一个用户代理还是要实现XML解析、脚本、DOM、图像库、渲染等功能。

一般来说,XML解析比较快,而DOM则会消耗很大的内存。图像的渲染则更是消耗大量的CPU时间和内存。在这些方面花些功夫,很有可能获得性能的较大提高。另外,移动设备的浮动运算一般都很慢,所以优化算法,尽量减少浮动运算,也是提高性能的一个方面。

另一方面,要显示的SVG内容决定了渲染的性能。在生成SVG素材的时候应注意哪些方面呢?首先,很显然,要显示的图像元素越多,要渲染的时间越长。当然,对图形的特效处理,如滤镜、渐变填充、平滑处理等,都会增加渲染的时间,所以在确实必要的时候才使用这些功能。

总的来说,在实现Mobile SVG的过程中,需要运营商、终端制造商、内容提供商共同努力,才能使Mobile SVG的无限魅力在资源受限的移动设备上大放光彩。

时间: 2024-11-02 19:37:28

svg是什么的相关文章

SVG Animation动画

SVG动画示例 下面是一个简单的SVG动画的例子: <svg width="500" height="100"> <rect x="10" y="10" height="110" width="110" style="stroke:#ff0000; fill: #0000ff"> <animateTransform attributeNa

SVG Filters之虚化Blur Effects

SVG 滤镜 在 SVG 中,可用的滤镜有: feBlend feColorMatrix feComponentTransfer feComposite feConvolveMatrix feDiffuseLighting feDisplacementMap feFlood feGaussianBlur feImage feMerge feMorphology feOffset feSpecularLighting feTile feTurbulence feDistantLight fePoi

SVG Shapes之圆形 &lt;circle&gt;

2.圆形 <circle> 示例2.1 <svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg> 代码解释: cx 和 cy 属性

SVG &lt;path&gt;路径

7.路径 <path> 下面的命令可用于路径数据: M = moveto L = lineto H = horizontal lineto V = vertical lineto C = curveto S = smooth curveto Q = quadratic Belzier curve T = smooth quadratic Belzier curveto A = elliptical Arc Z = closepath 注释:以上所有命令均允许小写字母.大写表示绝对定位,小写表示

SVG实例之中国地图

SVG 做地图具有可以任意比例放大缩小不失真的优点.本例基于d3.js的svg制作. 地图数据用GeoJSON存储.GeoJSON 是基于JSON 的.为Web 应用而编码地理数据的一个标准.实际上,GeoJSON 并不是另一种格式,而只是JSON 非常特定的一种使用方法. 网上有很多免费的GeoJSON下载,本例子中国地图GeoJSon 可以从本例源码 下载 1.获取d3 在项目中引入即可, <script src="http://d3js.org/d3.v3.min.js"&

SVG Viewport和View Box

SVG Viewport和View Box用来设置图像的可见部分的尺寸. Viewport(视口) Viewport:视口,视觉窗口,是SVG图像的可见区域.SVG图像逻辑上是能显示你想要的宽和高,但实际上同一时间仅图像的某一部分是可见的.该可见的区域被称为Viewport. 您可以通过<svg>元素的width和height指定使用的Viewport宽度和高度的下面是一个例子: <svg width="500" height="300">&

AJAX + SVG 实现实时监控图表

ajax|监控|图表 AJAX 已经有很多文章介绍它的原理及其应用了.但是遗憾的是现在并没有很多结合实际项目应用.本文结合实际项目中的应用来讲述利用 AJAX 和SVG 技术如何创建各种激动人心的功能,并附带可以运行的例子和源代码. 本文需要一定的 AJAX,SVG 知识和应用经验.当然它们都可以在 ibm.com/developerworks/cn 上找到. 个人对于 AJAX 应用的建议是如果传统的 MVC 能够满足的应用,没有必要使用AJAX来代替,因为这里 AJAX 唯一能带来的好处只是

SVG/VML+JS实现跨浏览器的矢量图形实现方案

文章简介:SVG/VML+JS实现跨浏览器的矢量图形实现方案. Raphael JS库是在webrebuild交流会上听专家将到的,后来就看了下,果然很强大--通过SVG/VML+JS实现跨浏览器的矢量图形实现方案. 这其实和cufon等网络字体的实现原理是有些类似的:非IE浏览器使用SVG绘图,然后IE中使用VML.它的目的是想要提供一种简单易用的真正跨浏览器的矢量图形实现方案,包括一些动画效果. Raphael的语法也很简单,基本上了解SVG就会很容易上手的: var c = paper.p

如何使用标签显示完整的svg图像?

显示   在html中,显示svg,<object>看起来要比<embed>更加合适,因为当svg尺寸过大时,<object>只会对其缩放,而<embed>会将图像裁剪掉 正所谓:既生瑜,何生亮.但是<object>是一个比<embed>更不正式的标签! 如果你的svg需要给更多的人看,那么使用<embed>是一个不错的选择! 很简单,我们可以从svg读出其width,height! 由于svg也是XML格式的,那么就容易

用SVG技术实现基于Web的GIS

web 引言 SVG(Scalable Vector Graphics)是一种基于XML 的用来描述二维矢量图形和矢量/点阵混合图形的置标语言,是一种全新的矢量图形规范. SVG规范定义了SVG的特征.语法和显示效果,包括模块化的XML命名空间(namespace)和SVG文档对象模型(DOM). SVG的绘图可以通过动态和交互式方式进行,在实际操作中,则是以嵌入方式或脚本方式来实现的.SVG不仅提供超链接功能,还定义了丰富的事件.由于SVG支持脚本语言(script),可以通过Script编程