`

移动图形新标准—Mobile SVG

    博客分类:
  • 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的无限魅力在资源受限的移动设备上大放光彩。(祝伟宏 中兴通讯移动事业部)
分享到:
评论

相关推荐

    基于J2ME_MobileSVG的校园地图设计与实现

    MobileSVG是为移动设备定制的一种新的图像标准,它是基于Scalable Vector Graphics (SVG) 规范的一种简化版本。由于移动设备(如手机和平板电脑)在内存、存储容量等方面的限制,无法完全支持复杂的SVG规范,因此W3C...

    svg-t 图形 指南

    **SVG-T**(Scalable Vector Graphics Tiny)是为移动设备设计的一种矢量图形格式,由W3C(World Wide Web Consortium)定义并标准化。它是一种轻量级且功能强大的格式,特别适合于手机和其他资源受限的移动设备。...

    基于J 2M E/Mob i l e SVG 移动G I S设计与实现

    Mobile Scalable Vector Graphics (Mobile SVG) 是由万维网联盟(W3C)为移动设备定制的一种基于XML的矢量图形标准。它是一种轻量级的SVG版本,专为资源受限的移动设备设计,例如手机和平板电脑等。Mobile SVG 规范...

    creating SVG with illustrator CS2

    SVG(Scalable Vector Graphics)是一种基于文本的图形语言,它以XML(可扩展标记语言)为基础,并集成了其他标准,如CSS(层叠样式表)、DOM(文档对象模型)以及SMIL(同步多媒体集成语言)。SVG支持三种类型的...

    jquery.mobile-1.4.2

    `jquery.mobile.inline-png-1.4.2.css`和`jquery.mobile.inline-png-1.4.2.min.css`处理内联PNG图片的样式,确保在不支持SVG的旧设备上也能正常显示图形。同时,`jquery.mobile.external-png-1.4.2.css`用于处理外部...

    HTML5 Mobile Development

    4. **SVG(Scalable Vector Graphics)**:用于创建高质量的矢量图形,可在不同屏幕尺寸和分辨率下保持清晰,适合移动设备。 5. **Web Workers**:在后台线程中运行脚本,提高处理密集型任务的能力,避免阻塞用户...

    Internet Explorer Mobile 6的官方说明PDF

    - **SVG 1.1**:支持矢量图形标准,便于在不同分辨率下展示清晰图像。 通过这些详细的介绍,我们可以看出Internet Explorer Mobile 6不仅是一款功能全面的移动浏览器,而且还在不断地适应Web技术和移动互联网的发展...

    HTML5 Mobile Development Cookbook 配套源码

    WebGL是HTML5中的3D图形渲染标准,允许在浏览器中直接进行硬件加速的图形编程,用于创建丰富的3D场景和交互效果。 7. **Push Notifications** HTML5引入了Push API,允许网站在用户关闭浏览器后依然发送推送通知...

    SVGPDA - .NET Compact SVG Viewer-开源

    该软件的核心目标是支持SVG Basic(SVGB),这是SVG标准的一个子集,特别优化以适应资源有限的移动环境。SVG Basic保留了SVG的主要特性,如矢量绘制、渐变、透明度和动画,但简化了语法,使其更适合在小屏幕和低性能...

    mobile html5

    5. ** canvas 和 svg**:HTML5的`<canvas>`元素提供了动态图形绘制的能力,而`<svg>`则支持矢量图,两者结合使得在移动设备上实现复杂动画和高清晰度图像成为可能。 6. **Web Workers和Web Storage**:Web Workers...

    WEB移动开发项目

    此外,HTML5还支持离线存储(Offline Storage)、拖放功能(Drag and Drop API)、媒体元素(Audio/Video API)以及 canvas 和 svg 等图形处理工具,使得在浏览器内创建丰富的互动体验成为可能。 JQuery作为...

    html css javascript for mobile

    - **画布和SVG**: HTML5的`<canvas>`元素允许开发者绘制图形和动画,而SVG则提供了一种用于描述二维矢量图形的标准格式,两者都可以用来创建复杂的视觉效果。 - **多媒体支持**: 除了基本的音视频支持外,HTML5还...

    HTML5移动Web开发指南.pdf

    此外,Canvas和SVG用于动态图形和矢量图,WebSocket则实现了双向实时通信,Web Storage和App Cache提供了离线存储功能,这些都极大地扩展了HTML5的能力。 CSS3是HTML5的得力伙伴,它引入了新的选择器、边框和背景...

    【jquery mobile】苏宁移动端首页

    4. **SVG**:可缩放矢量图形,用于创建高质量的图形,适合用于logo、图表和复杂图形,且不损失清晰度。 5. **Audio & Video**:内建的音频和视频元素使得直接在网页上嵌入媒体资源变得简单,无需第三方插件。 6. *...

    hbuilder html5 mui 手册 移动开发

    HTML5是下一代HTML标准,引入了许多新特性,如语义化标签(如、、等)、离线存储(离线应用)、拖放功能、媒体元素(、)、画布(canvas)和SVG图形等,这些都极大地丰富了网页内容和交互体验。 三、MUI框架详解 1....

    html5简单实例

    4. **SVG(可缩放矢量图形)**:支持矢量图形,这意味着图像可以无损缩放,适合图表和复杂图形。 5. **新的表单控件**:比如`<input type="date">`、`<input type="range">`等,提高了用户输入的便捷性。 6. **...

    HTML5课程方案(企业培训).pdf

    3. **Html5Svg 图形**:SVG是一种用于创建矢量图形的标记语言,支持响应式设计,适用于高分辨率屏幕。 4. **Html5视/音频播放**:`<audio>`和`<video>`标签使内嵌媒体变得简单,支持多种格式,提供了播放、暂停、...

Global site tag (gtag.js) - Google Analytics