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