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

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的应用有所感悟。