Image 01 Image 02

SVG和移动

五梭发表于2008年九月24日
0

我总觉得很奇怪为什么移动工业不好好利用SVG。事实上，SVG非常完美地适于在移动设备上发布富内容，理由有以下几点：

  • 它是一种表现矢量图型的便捷方法。
  • SVG图型能缩放至任何大小，而不会因为移动设备屏幕尺寸变化而产生某些问题。
  • 它是一种开放标准。
  • 设备支持得比你想像的要好得多。
  • 因为SVG基于XML，许多现有的XML工具可以用来生成内容。

这篇文章用来描述SVG的能力，以及怎样在移动应用上发挥SVG的长处。并不是教会你怎样生成SVG内容，网上已经有很多了。

SVG的描述

首先定义一下SVG到底是什么。来自维基百科：

可缩放矢量图型（SVG）是一种用来描述二维矢量图型的XML规范和文件格式，包括静态和动画。SVG能纯粹地用来表现图像，也可以包含脚本。它是由万维网协会SVG工作组创建的开放标准。

所以，SVG本质上是一种基于XML的矢量图型的开放标准。SVG特殊的可缩放特性可以让图型不须修改就能在小屏幕上显示得和PC屏幕上一样好，这一点令人无比激动。以下来自维基百科的图片很好的证明了这一点。点阵图型固有适应分辨率的特性令其不能很好的放大；可缩放图型（和原生像素大小无关）却放大的十分好。

SVG例子

矢量图型已经在计算机上广泛地使用。比如说，大部分操作系统字体被定义成矢量格式以方便在许多字号下使用。Flash对象也经常包含矢量图像，也就是说Flash对象可以在不考虑浏览面积和屏幕分辨率时工作的很好。

SVG拥有其他矢量图型格式的所有优点，只有一点区别：它基于W3C的一系列开放标准。

SVG版本

SVG目前有几种不同的格式。

  • SVG1.1在2001年成为W3C推荐标准
  • SVG Tiny和SVG Basic（移动SVG属性）在2003年成为W3C推荐标准

SVG Tiny和SVG Basic自从设计为在小设备和有限资源的设备上使用后，成为专注于移动的版本。目前SVG Tiny被现今大部分移动电话支持。它们两者的区别在于Tiny缺少脚本和样式的支持（以节省内存）。

设备对SVG的支持

如果不被设备支持，就算是世界上最好的图片格式也是毫无用处的。所以鉴定一下移动设备对标准的支持情况很有意义。其实状况比你想像得要好。以下设备以被证明支持SVG：

  • 诺基亚WebKit浏览器 – 包括最近所有的S60手机
  • 最近大部分的索爱手机。索爱声称以下手机某种形式上支持SVG：F500, K300, K500, K700, S700, Z500, V800, Z800, K510, K530, 550, K600, K610, K750, K770, K790, K800, K810, S500, T650, V600, W200, W300, W550, W580, W600, W610, W660, W700, W710, W800, W810, W830, W850, W880, W900, Z520, Z525, Z530, Z550, Z558, Z610, Z710, K630, K660, K850, V640, W890, W910, Z750
  • Adobe的Flash Lite 1.1以上版本
  • 等等许多其他的设备。这里有许多详细的列表：http://svg.org/special/svg_phones

有意思的是，在桌面环境下的浏览器，只有Firefox 2以上和Opera天然支持SVG，Internet Explorer不支持，Safari 3支持。IE通过Adobe的一个插件可以查看SVG。

这就引出了一个很有意思的状况，手持设备竟然比桌面都要更支持标准（因为IE拥有巨大的市场份额）。而且在我的经验上，不仅仅移动设备支持的更好，就连所有的移动浏览器都允许用户缩放SVG图像，而桌面浏览器不行，或至少做的不好。iPhone 2.1开始支持SVG。

SVG能力

SVG可用的能力很大程度上取决于你使用的版本。对于移动环境来说，SVG Tiny是比较安全的选择。幸运的是，这个版本提供了足够的有用的功能绝对能满足大部分的目的。SVG的几种规范由不同的工作组制定相应的功能，我们将其称做组件。

  • 形状组件 － 这是SVG的主要组件，包括了所有的基本图形元素：圆，椭圆，线，路径，多边形，方。
  • 基本文本组件 － 它就包含一种：文本。文本属性允许你把文本块放在图表中。
  • 样式组件 － 它允许你对SVG元素指定样式，就像你用CSS表现HTML一样。

除了以上的基础组件，SVG-T也支持一些有用的组件能让你对图表增加交互性。还有超链接组件让你能用<a>标签增加超链接，还有动画组件让你制作简单动画。

我这里有一些例子。

在移动网使用SVG

设备识别

为了决定是否适合从你的网站发送SVG内容到手机上，你需要一些方法检测设备的性能。这要痛苦地用一些设备侦测和内容适配程序。在我的经验上，目前通用的 WURFL数据库没有包含有用的设备支持SVG的信息。dotMobi Device Atlas好一些。通常我只是简单的侦测UA，如果是诺基亚WebKit浏览器或者索爱的手机，就传输SVG；否则就传输同样的PNG来代替。

压缩

SVG 的一个弊病就是，就象许多XML格式一样，它比起相同复杂的压缩图像来说有许多冗余的数据。这个问题会带来额外的数据费用的拖慢网页加载速度，为了成功的在移动设备上使用SVG，你真的应该使用GZIP压缩。GZIP能非常大程度的减小SVG文档。我试过，大概能减小到原大小的10%，这取决于你图案的重复性程度。现在ZLIB压缩已经是HTTP 1.1标准的一部分了（Content-Encoding: gzip），大部分移动浏览器好像都支持GZIP编码。而且，先进到支持SVG的浏览器按道理也都应该支持GZIP了，所以应该不会有什么问题。

大部分的服务器能够配置自动压缩文件类型，怎样做就不是本文讨论之内了。

决定什么时候使用SVG

SVG 不是万金油，有许多情况不适合用SVG来表现。SVG适合在一张图片上表述大量信息，否则你就不得不用许多缩略图链接到一张大点阵图的不同位置来表现。 SVG也不适合用于表现照片类图像，但是非常适合线稿图比如地图，这时放大和旋转就变得很有用。另外，记住GIF和PNG表现同样的内容时比SVG文件更小一些。

图像大小

尽管SVG是可缩放的，还是有正规的方法设定初始的分辨率，让浏览器决定渲染成多大。上面那个dotMobi Logo包含了一下信息：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
;167pt" height="85pt" viewBox="0 0 167 85" version="1.1">
它控制了显示区域和初始渲染的大小。

在XHTML中嵌入SVG

SVG应该使用<object>标签嵌入到XHTML/HTML中：
<object data="img.svg" ;240" height="250" >说明文字</object>
这样不支持SVG的浏览器将显示文本内容“说明文字”。

MIME Type

SVG应该定义MIME Type
Image/svg+xml
你的服务器应该配置增加此MIME Type。

资源链接

Popularity: 89% [?]



Leave a reply...