HTML5 中的可縮放矢量圖形（SVG）

時間 2020-08-18

標籤 html5 html 縮放矢量圖形 svg 欄目 HTML5 简体版

原文原文鏈接

簡介

可縮放矢量圖形 (SVG) 是基於矢量的圖形家族的一部分。它們與基於光柵的圖形不一樣，後者在一個數據數組中存儲每一個像素的顏色定義。現在，網絡上使用的最多見的光柵圖形格式包括 JPEG、GIF 和 PNG，每種格式都具備優缺點。html

相比任何基於光柵的格式，SVG 具備多項優點：html5

SVG 圖形是使用數學公式建立的，須要在源文件中存儲的數據要少得多，由於您無需存儲每一個獨立像素的數據。
矢量圖形可更好地縮放。對於網絡上的圖像，嘗試從原始大小放大圖像可能產生失真（或像素化的）圖像。
原始像素數據是針對特定大小進行設計的。當圖像再也不是該大小時，顯示圖像的程序會猜想使用何種數據來填充新的像素。矢量圖像具備更高的彈性；當圖像大小變化時，數據公式可相應地調整。web
源文件大小可能更小，因此 SVG 圖形比其餘光柵圖形的加載速度更快，使用的帶寬更少。
SVG 圖像由瀏覽器渲染，能夠以編程方式繪製。SVG 圖像可動態地更改，這使它們尤爲適合數據驅動的應用程序，好比圖表。
SVG 圖像的源文件是一個文本文件，因此它既具備易於訪問和搜索引擎友好特徵。

本文將介紹 SVG 格式的優點，以及它們如何在 HTML5 中的 Web 設計工做中提供幫助。ajax

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 展現瞭如何建立一條水平線。app

清單 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 中的圖形。jsp

圖 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` 元素支持的命令

命令	描述
`M`	移動到
`L`	連線到
`H`	水平連線到
`V`	垂直連線到
`C`	使用曲線鏈接到
`S`	使用平滑曲線鏈接到
`Q`	使用二次貝塞爾曲線鏈接到
`T`	使用平滑的二次貝塞爾曲線鏈接到
`A`	使用橢圓曲線鏈接到
`Z`	將路徑封閉到

能以大寫或小寫形式使用這些命令。當命令爲大寫時，應用絕對位置。當它爲小寫時，應用相對位置。提供全部命令示例已超出了本文的範圍。可是，如下示例會演示它們的基本使用。

可使用 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 圖形。