HTML5之SVG 2D入門1—SVG(可縮放向量圖形)概述_html5教學技巧
- WBOY原創
- 2016-05-16 15:50:071601瀏覽
點陣圖與向量圖
以前，瀏覽器中顯示的圖形，例如jpeg、gif等，都是點陣圖，這些圖像格式是基於光柵的。在光柵影像中，影像檔案定義了影像中每個像素的色彩值。瀏覽器需要讀取這些值並做出相應行動。這種影像的再現能力比較強，但是在某些情形下會顯得不足。例如，當瀏覽器以不同大小顯示一副影像時，通常會產生鋸齒邊緣，這時，瀏覽器必須為那些在原始影像中不存在的像素插入或猜測數值；這會導致影像失真。此外，針對點陣圖進行動畫，最多也僅限於產生「翻動書本」類型的動畫，即快速連續地顯示單獨影像。
向量圖透過指定為確定每個像素的值所需的指令而不是指定這些值本身，克服了這些困難中的一部分。例如，向量圖形不再為一個直徑一英寸的圓提供像素值，而是告訴瀏覽器創建一個直徑一英寸的圓，然後讓瀏覽器（或插件）做其餘事情。這消除了光柵圖形的許多限制；使用向量圖形，瀏覽器只要知道它必須畫一個圓。如果影像需要以正常大小的三倍來顯示，那麼瀏覽器只要以正確的大小畫圓而不必執行光柵影像通常的插入法。類似地，瀏覽器接收的指令可以更容易地與外部資訊來源（如應用程式和資料庫）綁定，要對圖像製作動畫，瀏覽器只要接收有關如何操縱屬性（如半徑或顏色）的指令即可。
HTML體系中，最常用的繪製向量圖的技術是SVG和HTML5新增加的canvas元素。這兩種技術都支援繪製向量圖和光柵圖。
SVG概述
可縮放向量圖形(Scalable Vector Graphics，簡稱SVG)是一種使用XML來描述二維圖形的語言(SVG嚴格遵從XML語法)。 SVG允許三種類型的圖形物件：向量圖形形狀（例如由直線和曲線組成的路徑）、圖像和文字。 可以將圖形物件（包括文字）分組、樣式化、轉換和組合到先前呈現的物件中。 SVG 功能集包含巢狀轉換、剪下路徑、alpha 遮罩和範本物件。
SVG繪圖是互動式和動態的。 例如，可使用腳本來定義和觸發動畫。這一點與Flash相比很強大。 Flash是二進位文件，動態建立和修改都比較困難。而SVG是文字文件，動態操作是相當容易的。而且，SVG直接提供了完成動畫的相關元素，操作起來非常方便。
SVG與其他Web標準相容，並直接支援文件物件模型DOM。這點也是與HTML5中的canvas相比很強大的地方(這裡注意，SVG內部也是用一個類似的canvas這樣的東西來展示SVG圖形，到後面你會發現很多特性和HTML5的canvas還有點像；文中如果沒明確說明是SVG的canvas的話，都代指HTML5中的canvas元素)。因而，可以很方便的使用腳本實現SVG的許多進階應用。而且SVG的圖形元素基本上都支援DOM中的標準事件。大量事件處理程序(如“onmouseover”和“onclick”)可指派給任何SVG圖形物件。 雖然SVG的渲染速度比不上canvas元素，但勝在DOM操作很靈活，這個優點完全可以彌補速度上的劣勢。
SVG既可以說是一種協議，也可以說是一門語言；既是HTML的一個標準元素，也是一種圖片格式。
SVG並不是HTML5中的東西，但是也算頁面時興的技術之一，姑且也放到這個專題下了。
SVG與其它圖片格式的比較
SVG與其它的圖片格式相比，有很多優點(很多優點來自向量圖的優點)：
• SVG文件是純粹的XML， 可被非常多的工具讀取和修改(例如記事本)。
• SVG 與JPEG 和GIF影像比起來，尺寸更小，且可壓縮性更強。
• SVG 是可伸縮的，可在影像品質不下降的情況下放大，可在任何的解析度下被高品質列印。
• SVG 圖像中的文字是可選的，同時也是可搜尋的(很適合製作地圖)。
• SVG 可以與 Java 技術一起運作。
• SVG 是開放的標準。
SVG與Flash的比較
SVG 的主要競爭者是Flash。與Flash相比，SVG 最大的優勢是它與其他標準(例如XSL和DOM)相容，操作方便，而Flash則是未開源的私有技術。其它的例如儲存的格式，動態生成圖形等方面，SVG也佔有很大的優勢。
SVG的呈現方式
關於支援HTML5與SVG的瀏覽器不是這裡討論的重點，基本上裝上最新的Chrome或者FireFox瀏覽器就差不多了(IE用戶請裝IE9就對了，至於IE9之前的版本，需要裝SVG的插件，這裡就直接略過了)。對於直接支援SVG的瀏覽器，SVG主要採用兩面兩種呈現的方式。
內聯到HTML
SVG是標準的HTML元素，直接寫到HTML中就可以了，看下面的例子：
My First SVG Page
width="200px" height=" 200px">
請注意開頭的部分xml聲明，與svg的命名空間xmlns、版本version等部分，主要是考慮相容性的問題；這些部分在HTML5中基本上都可以不用寫了(寫不寫還是自己瞧著辦吧)。
獨立SVG檔案
獨立SVG指的是透過使用svg檔案副檔名來提供向量圖形檔案格式。在瀏覽器中嵌入這個svg檔案就可以使用了。
1.獨立的SVG檔案/頁面，定義的範本基本上就像下面的一樣：
複製程式碼
代碼如下:
把這樣的文字檔案保存成以svg為副檔名的文件，例如sun.svg，這樣的文件可以直接用瀏覽器開啟瀏覽，也可以作為引用嵌入到別的頁面中。
代碼如下:
My First SVG Page
width="300px" height="300px">
其實SVG也可以放在其他的XML文件中，也可以像其他的XML文件一樣，使用XML相關的技術格式化和驗證，這個不是重點，這裡略去了。
SVG的渲染順序
SVG是嚴格按照定義元素的順序來渲染的，這個與HTML靠z-index值來控制分層不一樣。在SVG中，寫在前面的元素先被渲染，寫在後面的元素後被渲染。後渲染的元素會覆蓋前面的元素，雖然有時受透明度影響，看起來不是被覆蓋的，但是SVG確實是嚴格按照先後順序來渲染的。 注意：SVG是以XML定義的，所以是大小寫敏感的，這點與HTML不一樣。
實用參考
：官方文件：http://www.w3.org/TR/SVG11/
腳本索引： http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
開發中心：https://developer.mozilla.org/en/ SVG熱門參考：http://www.chinasvg.com/
以前，瀏覽器中顯示的圖形，例如jpeg、gif等，都是點陣圖，這些圖像格式是基於光柵的。在光柵影像中，影像檔案定義了影像中每個像素的色彩值。瀏覽器需要讀取這些值並做出相應行動。這種影像的再現能力比較強，但是在某些情形下會顯得不足。例如，當瀏覽器以不同大小顯示一副影像時，通常會產生鋸齒邊緣，這時，瀏覽器必須為那些在原始影像中不存在的像素插入或猜測數值；這會導致影像失真。此外，針對點陣圖進行動畫，最多也僅限於產生「翻動書本」類型的動畫，即快速連續地顯示單獨影像。
向量圖透過指定為確定每個像素的值所需的指令而不是指定這些值本身，克服了這些困難中的一部分。例如，向量圖形不再為一個直徑一英寸的圓提供像素值，而是告訴瀏覽器創建一個直徑一英寸的圓，然後讓瀏覽器（或插件）做其餘事情。這消除了光柵圖形的許多限制；使用向量圖形，瀏覽器只要知道它必須畫一個圓。如果影像需要以正常大小的三倍來顯示，那麼瀏覽器只要以正確的大小畫圓而不必執行光柵影像通常的插入法。類似地，瀏覽器接收的指令可以更容易地與外部資訊來源（如應用程式和資料庫）綁定，要對圖像製作動畫，瀏覽器只要接收有關如何操縱屬性（如半徑或顏色）的指令即可。
HTML體系中，最常用的繪製向量圖的技術是SVG和HTML5新增加的canvas元素。這兩種技術都支援繪製向量圖和光柵圖。
SVG概述
可縮放向量圖形(Scalable Vector Graphics，簡稱SVG)是一種使用XML來描述二維圖形的語言(SVG嚴格遵從XML語法)。 SVG允許三種類型的圖形物件：向量圖形形狀（例如由直線和曲線組成的路徑）、圖像和文字。 可以將圖形物件（包括文字）分組、樣式化、轉換和組合到先前呈現的物件中。 SVG 功能集包含巢狀轉換、剪下路徑、alpha 遮罩和範本物件。
SVG繪圖是互動式和動態的。 例如，可使用腳本來定義和觸發動畫。這一點與Flash相比很強大。 Flash是二進位文件，動態建立和修改都比較困難。而SVG是文字文件，動態操作是相當容易的。而且，SVG直接提供了完成動畫的相關元素，操作起來非常方便。
SVG與其他Web標準相容，並直接支援文件物件模型DOM。這點也是與HTML5中的canvas相比很強大的地方(這裡注意，SVG內部也是用一個類似的canvas這樣的東西來展示SVG圖形，到後面你會發現很多特性和HTML5的canvas還有點像；文中如果沒明確說明是SVG的canvas的話，都代指HTML5中的canvas元素)。因而，可以很方便的使用腳本實現SVG的許多進階應用。而且SVG的圖形元素基本上都支援DOM中的標準事件。大量事件處理程序(如“onmouseover”和“onclick”)可指派給任何SVG圖形物件。 雖然SVG的渲染速度比不上canvas元素，但勝在DOM操作很靈活，這個優點完全可以彌補速度上的劣勢。
SVG既可以說是一種協議，也可以說是一門語言；既是HTML的一個標準元素，也是一種圖片格式。
SVG並不是HTML5中的東西，但是也算頁面時興的技術之一，姑且也放到這個專題下了。
SVG與其它圖片格式的比較
SVG與其它的圖片格式相比，有很多優點(很多優點來自向量圖的優點)：
• SVG文件是純粹的XML， 可被非常多的工具讀取和修改(例如記事本)。
• SVG 與JPEG 和GIF影像比起來，尺寸更小，且可壓縮性更強。
• SVG 是可伸縮的，可在影像品質不下降的情況下放大，可在任何的解析度下被高品質列印。
• SVG 圖像中的文字是可選的，同時也是可搜尋的(很適合製作地圖)。
• SVG 可以與 Java 技術一起運作。
• SVG 是開放的標準。
SVG與Flash的比較
SVG 的主要競爭者是Flash。與Flash相比，SVG 最大的優勢是它與其他標準(例如XSL和DOM)相容，操作方便，而Flash則是未開源的私有技術。其它的例如儲存的格式，動態生成圖形等方面，SVG也佔有很大的優勢。
SVG的呈現方式
關於支援HTML5與SVG的瀏覽器不是這裡討論的重點，基本上裝上最新的Chrome或者FireFox瀏覽器就差不多了(IE用戶請裝IE9就對了，至於IE9之前的版本，需要裝SVG的插件，這裡就直接略過了)。對於直接支援SVG的瀏覽器，SVG主要採用兩面兩種呈現的方式。
內聯到HTML
SVG是標準的HTML元素，直接寫到HTML中就可以了，看下面的例子：
複製代碼
代碼如下:width="200px" height=" 200px">
請注意開頭的部分xml聲明，與svg的命名空間xmlns、版本version等部分，主要是考慮相容性的問題；這些部分在HTML5中基本上都可以不用寫了(寫不寫還是自己瞧著辦吧)。
獨立SVG檔案
獨立SVG指的是透過使用svg檔案副檔名來提供向量圖形檔案格式。在瀏覽器中嵌入這個svg檔案就可以使用了。
1.獨立的SVG檔案/頁面，定義的範本基本上就像下面的一樣：
複製程式碼
代碼如下:
把這樣的文字檔案保存成以svg為副檔名的文件，例如sun.svg，這樣的文件可以直接用瀏覽器開啟瀏覽，也可以作為引用嵌入到別的頁面中。
2.HTML引用外部的SVG檔。
複製代碼使用object或者img元素嵌入svg圖形就可以了，例如下面的小例子：
代碼如下:
width="300px" height="300px">
Your browser does not support SVG - please upgrade to a modern browser.
其實SVG也可以放在其他的XML文件中，也可以像其他的XML文件一樣，使用XML相關的技術格式化和驗證，這個不是重點，這裡略去了。
SVG的渲染順序
SVG是嚴格按照定義元素的順序來渲染的，這個與HTML靠z-index值來控制分層不一樣。在SVG中，寫在前面的元素先被渲染，寫在後面的元素後被渲染。後渲染的元素會覆蓋前面的元素，雖然有時受透明度影響，看起來不是被覆蓋的，但是SVG確實是嚴格按照先後順序來渲染的。 注意：SVG是以XML定義的，所以是大小寫敏感的，這點與HTML不一樣。
實用參考
：官方文件：http://www.w3.org/TR/SVG11/
腳本索引： http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
開發中心：https://developer.mozilla.org/en/ SVG熱門參考：http://www.chinasvg.com/
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn