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

2019独角兽企业重金招聘Python工程师标准>>>

Web中实现矢量图形的方法不在乎两种SVG和VML。可升级矢量图像( SVG, Scalable Vector Graphics)和VML (Vector Markup Language)的产生有着十分积极的意义。它具有支持矢量图和动画、由文本构成图形易于操作、对点阵图形兼容等特点。然而，不同浏览器对两种标准的支 持并不一致， 微软的IE浏览器系列对VML支持比较好，而其他的浏览器软件对SVG标准支持更完美。这也使得开发基于Web的图形系统变得更加复杂。

而多比控件通过SVG/VML+JS实现跨浏览器的矢量图形实现方案，这其实和cufon等网络字体的实现原理是有些类似的：非IE浏览器使用SVG绘图，然后IE中使用VML。它的目的是想要提供一种简单易用的真正跨浏览器的矢量图形实现方案，包括一些动画效果。

背景知识

在说SVG之前，先要说一下HTML。现在流行的web页面是由HTML构成的。大家在浏览本页面时，可以用浏览器的查看“源文件”的功能，看看在花花绿绿的网页背后是些什么东西。
实际上我们所有看到的东西都是HTML语言，被浏览器解释成现在的样子。
然而，现在的网页似乎少了一些东西，那就是对图形的描述和表示。要想在网页中画一条斜线或一个圆，就已经超出了目前HTML的能力范围。我们只能通过镶嵌入图片、FLASH或用JavaScript语言来编程实现。
虽 然找到了曲线救国的方法，但随着Google等搜索引擎的发展，又冒出了一个问题。无论是图片还是Flash，都不能被搜索引擎很好的识别。比如你在 Flash中写了一篇文章，搜索引擎就很难知道这篇文章的内容。因为Flash的播放格式是一个封闭私密的格式。只有Flash的开发商知道如何解开。
这时，我们就需要一个能显示图形，又具有可搜索性的格式出现。
SVG就是其中之一。
由于HTML是一个可扩展的体系，在预先定义的一大堆标签种类中，可以再定义一些新的标签，比如用来表示圆的<circle>标签。
这就意味着未来的浏览器可以认识一些新的标签，来描述图形。
但是，具体该用一些什么标签来描述图形呢？w3c这个国际组织就想出了SVG。在它的SVG标准中，提出了一系列定义，比如直线如何定义、圆如何定义、是否可以在SVG中贴图片、写文字等等。
有些浏览器开发者在了解w3c这一标准后，觉得很好，那就支持呗。比如Safari、Firefox和Chrome的开发者。但有些浏览器开发者不屑一顾，比如IE的开发者。
至于IE的不支持，也许是因为IE的开发者好不容易想出了VML这个东西。说起来SVG和VML都是用XML来描述图形的方法，都可以让浏览器画出矢量图形来。可以说SVG和VML异曲同工，但标准完全不一样。这就开始掐架了。
不过从我本人搜索了这么半天来看，SVG的提出者是w3c，这个组织也是XML的标准制定者。从对于XML的理解来看，w3c里面的人从理论上讲应该比Microsoft的专家更理解XML。因此SVG更具备XML的一些内在精神。至于是什么内在精神，就只有以后再说了。
SVG的未来似乎和MS无关了，但和另一个大佬adobe有关。
本 来adobe是SVG的坚定支持者，他甚至针对IE浏览器开发了查看SVG的浏览器插件。当IE浏览到有SVG的网页时，就会询问用户，是否安装 adobe的SVG viewer插件。如果用户安装，只要一小会儿就可以查看网页上的SVG了。这个过程和Flash的查看是一样的。
这里我们又要将Flash和SVG作一些比较了。实际上Flash也是一个矢量图形的制作工具。前面已经说了一些，Flash是未公开的格式。不能被搜索。实际上我们可以发现Flash和SVG正好覆盖了封闭格式和公开格式的两种矢量图形动画和交互的解决方案。
可想而知，adobe后来收购了Flash的开发公司，正好完善了其产品线。这样用户无论想达到什么目的，都可以用adobe公司的产品。
因 此，从前途上来说，SVG是下一代web网的组成部分，它符合XML标准，这意味着可以享受到目前HTML语言享受到的一切支持。比如浏览器的支持、 JavaScript的支持、搜索引擎的支持等等。同时，与目前的HTML无缝衔接，不分彼此。可以实现下一代web的平滑过渡。
因此，SVG的应用并不是一夜之间的事情。而是慢慢的，一点一点的。当我们在一个较大时间范围作回顾时，我们才会对SVG的应用有所感悟。

转载于:https://my.oschina.net/u/242778/blog/53813