簡介
可縮放矢量圖形 (SVG) 是基於矢量的圖形家族的一部分。它們與基於光柵的圖形不同，后者在一個數據數組中存儲每個像素的顏色定義。如今，網絡上使用的最常見的光柵圖形格式包括 JPEG、GIF 和 PNG，每種格式都具有優缺點。
相比任何基於光柵的格式，SVG 具有多項優勢：
- SVG 圖形是使用數學公式創建的，需要在源文件中存儲的數據要少得多，因為您無需存儲每個獨立像素的數據。
- 矢量圖形可更好地縮放。對於網絡上的圖像，嘗試從原始大小放大圖像可能產生失真（或像素化的）圖像。
原始像素數據是針對特定大小進行設計的。當圖像不再是該大小時，顯示圖像的程序會猜測使用何種數據來填充新的像素。矢量圖像具有更高的彈性；當圖像大小變化時，數據公式可相應地調整。
- 源文件大小可能更小，所以 SVG 圖形比其他光柵圖形的加載速度更快，使用的帶寬更少。
- SVG 圖像由瀏覽器渲染，可以以編程方式繪制。SVG 圖像可動態地更改，這使它們尤其適合數據驅動的應用程序，比如圖表。
- SVG 圖像的源文件是一個文本文件，所以它既具有易於訪問和搜索引擎友好特征。
本文將介紹 SVG 格式的優勢，以及它們如何在 HTML5 中的 Web 設計工作中提供幫助。
SVG 基礎知識
要創建 SVG 圖形，會經歷與創建 JPEG、GIF 或 PNG 文件完全不同的流程。JPEG、GIF 和 PNG 文件通常使用圖像編輯程序創建，比如 Adobe Photoshop。SVG 圖像通常使用基於 XML 的語言創建。有一些 SVG 編輯 GUI 將生成基礎的 XML。但是，對於本文，使用的是原始的 XML 語言。
清單 1 給出了一個簡單 SVG XML 文件的示例，該文件繪制一個具有 2 像素寬的黑色邊框的紅色圓形。
清單 1. SVG XML 文件
1 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 2 <circle cx="100" cy="50" r="40" stroke="black" 3 stroke-width="2" fill="red" /> 4 </svg>
上述代碼會得到圖 1 中的圖形。
圖 1. 具有 2 像素寬的黑色邊框的紅色圓形
創建基本形狀
對於 SVG 圖形，需要使用 XML 標記來創建形狀，表 1 給出了這些 XML 元素。
表 1. 創建 SVG 圖形的 XML 元素
| 元素 | 描述 |
|---|---|
line |
創建一條簡單的線。 |
polyline |
定義由多個線定義構成的形狀。 |
rect |
創建一個矩形。 |
circle |
創建一個圓形。 |
ellipse |
創建一個橢圓。 |
polygon |
創建一個多邊形。 |
path |
支持任意路徑的定義。 |
line 元素
line 元素是基本的繪圖元素。清單 2 展示了如何創建一條水平線。
清單 2. 創建一條水平線
1 <svg xmlns="http://www.w3.org/2000/svg" version='1.1' 2 width="100%" height="100%" > 3 <line x1='25' y1="150" x2='300' y2='150' 4 style='stroke:red;stroke-width:10'/> 5 </svg>
清單 2 中的代碼會生成圖 2 中的圖形。
圖 2. 基本的水平線
SVG 標記具有寬度和高度屬性，用於定義可用於繪制的畫布區域。它們的原理類似於其他 HTML 元素的寬度和高度屬性。在本例中，畫布設置為占據所有可用空間。
該示例還使用了 style 標記。SVG 圖形支持使用多種方法設置其內容的樣式。本文中的樣式可用於使他們變得顯眼，也可在必須使用某些屬性（比如筆畫顏色和寬度）才能渲染圖像時使用。
要創建一個線定義，可以定義相對於畫布的開始和結束 x 和 y 坐標。x1 和 y1 屬性是開始坐標，x2 和 y2 屬性是結束坐標。要更改線的方向，只需更改這些坐標。例如，通過修改上一個示例，可以生成一條對角線，如清單 3 所示。
清單 3. 創建一條對角線
1 <svg xmlns="http://www.w3.org/2000/svg" version='1.1' 2 width="100%" height="100%" > 3 <line x1="0" y1="0" x2="200" y2="200" 4 style='stroke:red;stroke-width:10'/> 5 </svg>
圖 3 給出了清單 3 中的代碼的結果。
圖 3. 對角線
polyline 元素
多直線圖形是一個由多個線定義組成的圖形。清單 4 中的示例創建了一個類似一組樓梯的圖形。
清單 4. 創建多直線樓梯
1 <svg xmlns="http://www.w3.org/2000/svg" 2 width="100%" height="100%" version='1.1'> 3 <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" 4 style="fill:white;stroke:red;stroke-width:4"/> 5 </svg>
清單 4 中的代碼會生成圖 4 中的圖形。
圖 4. 多直線樓梯
要創建一個多直線圖形，可以使用 points 屬性並定義由逗號分隔的 x 和 y 坐標對。在本例中，第一個點定義為 0,40，其中 0 是 x 值，40 是 y 值。但是，單獨一組點無法在屏幕上顯示任何東西，因為這僅告訴 SVG 渲染器從何處開始。在最低限度上，您需要兩組點：一個開始點和一個結束點（例如 points="0,40 40,40”）。
與簡單的線圖形一樣，這些線不需要完全水平或垂直。如果更改上一個示例中的值，如清單 5 所示，可以生成不規則的線形狀。
清單 5. 創建不規則的線
1 <svg xmlns="http://www.w3.org/2000/svg" 2 width="100%" height="100%" version='1.1'> 3 <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" 4 style="fill:white;stroke:red;stroke-width:3"/> 5 </svg>
清單 5 中的代碼會生成圖 5 所示的圖形。
圖 5. 不規則線
rect 元素
創建一個矩形非常簡單，只需定義寬度和高度，如清單 6 所示。
清單 6. 創建矩形
1 <svg xmlns="http://www.w3.org/2000/svg" 2 width="100%" height="100%" version='1.1'> 3 <rect width="300" height="100" 4 style="fill:red"/> 5 </svg>
清單 6 中的代碼會生成圖 6 中的圖形。
圖 6. 矩形
也可以使用 rect 標記創建一個正方形，正方形就是高和寬相等的矩形。
circle 元素
要創建一個圓，可以定義圓心的 x 和 y 坐標和一個半徑，如清單 7 所示。
清單 7. 創建一個圓
1 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 2 <circle cx="100" cy="50" r="40" fill="red"/> 3 </svg>
清單 7 中的代碼會生成圖 7 中的圖形。
圖 7. 圓
cx 和 cy 屬性定義圓心相對於繪圖畫布的位置。因為半徑是圓寬度的一半，所以在定義半徑時，請記住圖像的總寬度將是該值的兩倍。
ellipse 元素
橢圓基本上是一個圓，其中的代碼定義了兩個半徑，如清單 8 所示。
清單 8. 創建一個橢圓
1 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 2 <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:red;"/> 3 </svg>
清單 8 中的代碼會生成圖 8 中的圖形。
圖 8. 橢圓
再次說明，cx 和 cy 屬性定義了相對於畫布的中心坐標。但是對於橢圓，需要使用 rx 和 ry 屬性為 x 軸定義一個半徑，為 y 軸定義一個半徑。
polygon 元素
多邊形這個形狀包含至少 3 條邊。清單 9 創建了一個簡單的三角形。
清單 9. 創建一個三角形
1 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 2 <polygon points="200,10 250,190 160,210" 3 style="fill:red;stroke:black;stroke-width:1"/> 4 </svg>
清單 9 中的代碼會生成圖 9 中的圖形。
圖 9. 三角形
類似於 polyline 元素，可使用 points 屬性定義幾對 x 和 y 坐標來創建多邊形。
可以通過添加 x 和 y 對，創建具有任意多條邊的多邊形。通過修改上一個示例，可以創建一個四邊形，如清單 10 所示。
清單 10. 創建一個四邊形
1 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 2 <polygon points="220,10 300,210 170,250 123,234" 3 style="fill:red;stroke:black;stroke-width:1"/> 4 </svg>
清單 10 中的代碼會生成圖 10 中的圖形。
圖 10. 四邊形
甚至可以使用 polygon 標記創建復雜的形狀。清單 11 創建一個星形。
清單 11. 創建一個星形
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polygon points="100,10 40,180 190,60 10,60 160,180 100,10" style="fill:red;stroke:black;stroke-width:1"/> </svg>
清單 11 中的代碼會生成圖 11 中的圖形。
圖 11. 星形
path 元素
使用 path 元素（所有繪圖元素中最復雜的），可以使用一組專門的命令創建任意圖形。path 元素支持表 2 中的命令。
表 2. path 元素支持的命令
能以大寫或小寫形式使用這些命令。當命令為大寫時，應用絕對位置。當它為小寫時，應用相對位置。提供所有命令示例已超出了本文的范圍。但是，以下示例會演示它們的基本使用。
可以使用 path 元素從本文前面的示例創建任何簡單的形狀。清單 12 使用 path 元素創建了一個基本的三角形。
清單 12. 使用 path 元素創建一個三角形
1 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 2 <path d="M150 0 L75 200 L225 200 Z" style="fill:red"/> 3 </svg>
清單 12 中的代碼會生成圖 12 中的圖形。
圖 12. 使用 path 元素的三角形
這組命令使用 d 屬性定義。在本例中，從 x 坐標 150 和 y 坐標 0 處開始繪制，這在移動到命令 (M150 0) 中定義。然后再使用 “連線到” 命令繪制一條直線連接到 x 坐標 75 和 y 坐標 200 的位置 (L75 200)。接下來，使用另一個 “連線到” 命令繪制另一條線 (L225 200)。最后，使用 “封閉到” 命令封閉圖形 (Z)。Z 命令沒有提供任何坐標，因為要關閉您所在的路徑，根據定義，要繪制一條從當前位置到圖形起點（在本例中為 x = 150 y =0）的線。
這里的意圖是展示一個基本示例；如果您想要的只是一個簡單的三角形，最好使用 polygon 標記。
path 元素的真正強大之處是創建自定義形狀的能力，如清單 13 所示。
清單 13. 使用 path 元素創建一個自定義形狀
1 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 2 <path d="M300,200 h-150 a150,150 0 1,0 150,-150 z" 3 fill="red" stroke="blue" stroke-width="5"/> 4 <path d="M275,175 v-150 a150,150 0 0,0 -150,150 z" 5 fill="yellow" stroke="blue" stroke-width="5"/> 6 <path d="M600,350 l 50,-25 7 a25,25 -30 0,1 50,-25 l 50,-25 8 a25,50 -30 0,1 50,-25 l 50,-25 9 a25,75 -30 0,1 50,-25 l 50,-25 10 a25,100 -30 0,1 50,-25 l 50,-25" 11 fill="none" stroke="red" stroke-width="5"/> 12 </svg>
清單 13 中的代碼會生成圖 13 中的圖形。
圖 13. 使用 path 元素的自定義形狀
使用 path 元素，可以創建復雜的圖形，比如圖表和波浪線。請注意，這個示例使用了多個 path 元素。當創建圖形時，根 SVG 標記中可以包含多個繪圖元素。
過濾器和漸變
除了目前為止許多示例中的基本 CSS 樣式，SVG 圖形還支持使用過濾器和漸變。本節將介紹如何向 SVG 圖形應用過濾器和漸變。
過濾器
可以使用過濾器向 SVG 圖形應用特殊的效果。SVG 支持以下過濾器。
- feBlend
- feColorMatrix
- feComponentTransfer
- feComposite
- feConvolveMatrix
- feDiffuseLighting
- feDisplacementMap
- feFlood
- feGaussianBlur
- feImage
- feMerge
- feMorphology
- feOffset
- feSpecularLighting
- feTile
- feTurbulence
- feDistantLight
- fePointLight
- feSpotLight
清單 14 創建了一種應用到矩形上的投影效果。
清單 14. 創建矩形的投影效果
1 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 2 <defs> 3 <filter id="f1" x="0" y="0" 4 width="200%" height="200%"> 5 <feOffset result="offOut" in="SourceAlpha" 6 dx="20" dy="20"/> 7 <feGaussianBlur result="blurOut" 8 in="offOut" stdDeviation="10"/> 9 <feBlend in="SourceGraphic" 10 in2="blurOut" mode="normal"/> 11 </filter> 12 </defs> 13 <rect width="90" height="90" stroke="green" 14 stroke-width="3" fill="yellow" filter="url(#f1)"/> 15 </svg>
清單 14 中的代碼會生成圖 14 中的圖形。
圖 14. 一個矩形的投影效果
過濾器在 def（表示定義）元素中定義。本示例中的過濾器分配了一個 id"f1"。filter 標記本身擁有定義過濾器的 x 和 y 坐標及寬度和高度的屬性。在 filter 標記中，可以使用想要的過濾器元素並將其屬性設置為想要的值。
定義過濾器之后，使用 filter 屬性將它與一個特定圖形關聯，如 rect 元素 中所示。將 url 值設置為您分配給過濾器的 id 屬性的值。
漸變
漸變 是從一種顏色到另一種顏色逐漸的過渡。漸變具有兩種基本形式：線性和徑向漸變。所應用的漸變類型由您使用的元素確定。以下示例展示了應用於一個橢圓形的線性和徑向漸變。
清單 15 創建了一個具有線性漸變的橢圓。
清單 15. 創建一個具有線性漸變的橢圓
1 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 2 <defs> 3 <linearGradient id="grad1" x1="0%" y1="0%" 4 x2="100%" y2="0%"> 5 <stop offset="0%" 6 style="stop-color:rgb(255,255,0);stop-opacity:1"/> 7 <stop offset="100%" 8 style="stop-color:rgb(255,0,0);stop-opacity:1"/> 9 </linearGradient> 10 </defs> 11 <ellipse cx="200" cy="70" rx="85" ry="55" 12 fill="url(#grad1)"/> 13 </svg>
清單 15 中的代碼會生成圖 15 中的圖形。
圖 15. 具有線性漸變的橢圓
清單 16 創建了一個具有徑向漸變的橢圓。
清單 16. 創建一個具有徑向漸變的橢圓
1 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 2 <defs> 3 <radialGradient id="grad1" cx="50%" cy="50%" 4 r="50%" fx="50%" fy="50%"> 5 <stop offset="0%" 6 style="stop-color:rgb(255,255,255);stop-opacity:0"/> 7 <stop offset="100%" 8 style="stop-color:rgb(255,0,0);stop-opacity:1"/> 9 </radialGradient> 10 </defs> 11 <ellipse cx="200" cy="70" rx="85" ry="55" 12 fill="url(#grad1)"/> 13 </svg>
清單 16 中的代碼會生成圖 16 中的圖形。
圖 16. 具有徑向漸變的橢圓
像過濾器一樣，漸變在 def 元素內定義。每個漸變分配有一個 id。漸變屬性（比如顏色）可使用 stop 元素在漸變標記內設置。要將漸變應用於圖形，可以將 fill 屬性的 url 值設置為想要的漸變的 id。
文本和 SVG
除了基本形狀，還可以使用 SVG 生成文本，如清單 17 所示。
清單 17. 使用 SVG 創建文本
1 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 2 <text x="0" y="15" fill="red">I love SVG</text> 3 </svg>
清單 17 中的代碼會生成圖 17 中的圖形。
圖 17. SVG 文本
此示例使用了一個 text 元素來創建句子 I love SVG。當使用 text 元素時，要顯示的實際文本在開始和結束 text 元素之間。
您可以沿多個軸，以及甚至沿多條路徑顯示文本。清單 18 沿一條弧形路徑顯示文本。
清單 18. 沿一條弧形路徑創建文本
1 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" 2 xmlns:xlink="http://www.w3.org/1999/xlink"> 3 <defs> 4 <path id="path1" d="M75,20 a1,1 0 0,0 100,0"/> 5 </defs> 6 <text x="10" y="100" style="fill:red;"> 7 <textPath xlink:href="#path1">I love SVG I love SVG</textPath> 8 </text> 9 </svg>
清單 18 中的代碼會生成圖 18 中的圖形。
圖 18. 一個弧形路徑上的文本
在此示例中，向根 SVG 標記添加了一個額外的 XML 命名空間 xlink。用戶顯示文本的弧形路徑在 def 元素內創建，所以該路徑不會在圖形中實際渲染出來。要顯示的文本嵌套在一個 textPath 元素內，該元素使用 xlink 命名空間引用想要的路徑的 id。
與其他 SVG 圖形一樣，也可以向文本應用過濾器和漸變。清單 19 向一些文本應用了一個過濾器和一種漸變。
清單 19. 創建具有過濾器和漸變的文本
1 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" 2 xmlns:xlink="http://www.w3.org/1999/xlink"> 3 <defs> 4 <radialGradient id="grad1" cx="50%" cy="50%" 5 r="50%" fx="50%" fy="50%"> 6 <stop offset="0%" 7 style="stop-color:red; stop-opacity:0"/> 8 <stop offset="100%" 9 style="stop-color:rgb(0,0,0);stop-opacity:1"/> 10 </radialGradient> 11 <filter id="f1" x="0" y="0" 12 width="200%" height="200%"> 13 <feOffset result="offOut" 14 in="SourceAlpha" dx="20" dy="20"/> 15 <feGaussianBlur result="blurOut" 16 in="offOut" stdDeviation="10"/> 17 <feBlend in="SourceGraphic" 18 in2="blurOut" mode="normal"/> 19 </filter> 20 </defs> 21 <text x="10" y="100" style="fill:url(#grad1); font-size: 30px;" 22 filter="url(#f1)"> 23 I love SVG I love SVG 24 </text> 25 </svg>
清單 19 中的代碼會生成圖 19 中的圖形。
圖 19. 具有過濾器和漸變的文本
向網頁添加 SVG XML
創建 SVG XML 之后，可采用多種方式將它包含在 HTML 頁面中。第一種方法是直接將 SVG XML 嵌入到 HTML 文檔中，如清單 20 所示。
清單 20. 直接將 SVG XML 嵌入 HTML 文檔
1 <html> 2 <head> 3 <title>Embedded SVG</title> 4 </head> 5 <body style="height: 600px;width: 100%; padding: 30px;"> 6 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 7 <circle cx="100" cy="50" r="40" fill="red"/> 8 </svg> 9 </body> 10 </html>
此方法可能最簡單，但它不支持重用。請記住，可以使用 .svg 擴展名保存 SVG XML 文件。當將 SVG 圖形保存在 .svg 文件中時，您可以使用 embed、object 和 iframe 元素來將它包含在網頁中。清單 21 顯示了使用 embed 元素包含 SVG XML 文件的代碼。
清單 21. 使用 embed 元素包含一個 SVG XML 文件
<embed src="circle.svg" type="image/svg+xml" />
清單 22 顯示了如何使用 object 元素包含一個 SVG XML 文件。
清單 22. 使用 object 元素包含一個 SVG XML 文件
<object data="circle.svg" type="image/svg+xml"></object>
清單 23 給出了使用 iframe 元素包含一個 SVG XML 文件的代碼。
清單 23. 使用 iframe 元素包含一個 SVG XML 文件
<iframe src="circle1.svg"></iframe>
當使用其中一種方法時，可以將同一個 SVG 圖形包含在多個頁面中，並編輯 .svg 源文件來進行更新。
結束語
本文介紹了使用 SVG 格式創建圖形的基礎知識。學習了如何使用內置的集合元素（比如線、矩形、圓等）創建基本形狀；如何通過發出一系列命令（比如移動到、連線到和使用弧線連接到），使用 path 元素創建復雜的圖形。本文還探討了如何對 SVG 圖形應用過濾器和漸變，包括文本圖形，以及如何在 HTML 頁面中包含 SVG 圖形。
相關主題
- 矢量圖形編輯器：瀏覽 Wikipedia 上的這個列表，試用一些 SVG 編輯程序。
- W3W 可縮放矢量圖形 (SVG) 1.1（第二版） 中的 樣式設計 提供了有關設置 SVG 圖形樣式的更多信息。
- W3W 可縮放矢量圖形 (SVG) 1.1（第二版） 中的 路徑 提供了有關使用 SVG 路徑的更多信息。
- W3W 可縮放矢量圖形 (SVG) 1.1（第二版） 中的 過濾器效果 提供了本文中提及的過濾器的詳細說明。
- 在 SVG 中呈現動態圖形（developerWorks，2004 年 10 月）：介紹如何創建可動態縮放其內容的 SVG 圖形。
- Wikipedia 上的 可縮放矢量圖形 提供了一些背景信息。
- 來自 W3C 的 SVG 1.1/1.2/2.0 需求 提供了有關 SVG 語言的未來版本的設計原則和需求的信息。
- 可縮放矢量圖形：訪問 W3C SVG 網站。
- SVG 教程：在這個交互式的 w3schools 教程中學習 SVG。
- HTML5：設計富 Internet 應用程序（可視化 Web） 提供了在 SVG 中繪制圖形的示例。
- 訪問 IBM InfoSphere Master Data Management Server 商業價值概述，獲取您提高 XML 領域的技能（包括 DTD、模式和 XSLT）所需的資源。查閱 XML 技術庫，獲取豐富的技術文章和技巧、教程、標准和 IBM 紅皮書。
- IBM XML 認證：了解如何成為 IBM 認證的 XML 和相關技術開發人員。
- developerWorks 技術活動和網絡廣播：隨時關注 developerWorks 技術活動和網絡廣播。
- developerWorks Web development 專區：通過專門關於 Web 技術的文章和教程，擴展您在網站開發方面的技能。
- developerWorks Ajax 資源中心：這是有關 Ajax 編程模型信息的一站式中心，包括很多文檔、教程、論壇、blog、wiki 和新聞。任何 Ajax 的新信息都能在這里找到。
- developerWorks Web 2.0 資源中心，這是有關 Web 2.0 相關信息的一站式中心，包括大量 Web 2.0 技術文章、教程、下載和相關技術資源。您還可以通過 Web 2.0 新手入門 欄目，迅速了解 Web 2.0 的相關概念。
- IBM 產品評估試用版軟件：下載或 IBM SOA 人員沙箱，並開始使用來自 DB2®、Lotus®、Rational®、Tivoli® 和 WebSphere® 的應用程序開發工具和中間件產品。
- 查看 HTML5 專題，了解更多和 HTML5 相關的知識和動向。