SVG入門指南

阿新 • • 發佈：2020-10-13

SVG 簡介

SVG，即可縮放向量圖形(Scalable Vector Graphics)，是一種 XML 應用，可以以一種簡潔、可移植的形式表示圖形資訊。目前，人們對 SVG 越來越感興趣。大多數現代瀏覽器都能顯示 SVG 圖形，並且大多數向量繪圖軟體都能匯出 SVG 圖形。SVG 主要可以概括為以下幾點：

SVG 指可伸縮向量圖形
SVG 用來定義網路的基於向量的圖形
SVG 使用 XML 格式定義圖形
SVG 影象在放大或改變尺寸的情況下其圖形質量不會有所損失
SVG 是全球資訊網聯盟的標準
SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個整體

電腦刺繡繡花廠 http://www.szhdn.com

廣州品牌設計公司https://www.houdianzi.com

SVG 的應用

圖表檢視(echart)、地圖檢視(WEB-GIS)
形象(AI)的全網應用
UI 產品的設計
SVG 動畫

SVG瀏覽器的相容情況

SVG 與 Canvas 區別

圖形系統

計算機中描述圖形資訊的兩大系統是柵格圖形和向量圖形。

柵格圖形

在柵格圖形系統中，影象被表示為圖片元素或者畫素的長方形陣列如下圖片所示。每個畫素用其 RGB 顏色值或者顏色表內的索引表示。這一系列也稱為點陣圖，通過以某種壓縮格式儲存。由於大多數現代顯示裝置也是柵格裝置，顯示影象時僅需要一個閱讀器將點陣圖解壓並將它傳輸到螢幕上。

向量圖形

向量圖是基於數學的描述，如下圖的多啦A夢，他的頭是一條怎麼樣的貝塞爾曲線，它的引數是什麼及用什麼顏色來填充貝塞爾曲線，通過這種方式描述圖片就是適量圖。

想象一下在一張繪圖紙上作圖的過程，柵格圖形的工作就像是描述哪個方格應該填充什麼顏色，而向量圖形的工作則像是描述要繪製從某個點到另一個點的直線或曲線。

建立 SVG 影象

SVG 文件基本結構

如下所示，是一個 SVG 文件結構：

<svg width='140' heiight='170' xmlns='http://wwww.w3.org/2000/svg'>
  <title>Cat</title>
  <desc>Stick Figure of Cat</desc>
  <!-- 在這裡繪製圖像 -->
</svg>

根元素<svg>以畫素為單位定義了整個影象的width和height，還通過xmlns屬性定義了SVG的名稱空間。<title>元素的內容可以被閱讀器顯示在標題欄上或者是作為滑鼠指標指向影象時的提示，<desc>元素允許咱們為影象定義完整的描述資訊。

基本形狀和屬性

基本圖形

基本屬性

fill、stroke、stroke-width、transform

基本形狀 --- 圓形

咱們可以通過<circle>元素來繪製貓的臉部。元素屬性的中心點x座標和y座標以為半徑。點(0,0)為影象左上角。水平向右移動時x座標增大，垂直向下移動時y座標增大。為了避免一些誤會，API 語文就很明確了，點(cx, cy)就表示圓心的位置，r表示圓的半徑。

繪圖的顏色是表現的一部分，表現資訊包含在style屬性中，這裡的輪廓顏色為黑色，填充顏色為none以使貓的臉部透明。

<svg width='140' heiight='170' xmlns='http://wwww.w3.org/2000/svg'>
  <title>Cat</title>
  <desc>Stick Figure of Cat</desc>
  <!-- 在這裡繪製圖像 -->
  <circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle>
</svg>

指定樣式的屬性

接著在新增兩個圓表示兩個眼睛。上面的stroke與fill是寫在style裡面的，但是SVG也允許咱們使用單獨的屬性，而不用全部寫在style內，如下所示：

<svg width='140' heiight='170' xmlns='http://wwww.w3.org/2000/svg'>
  <title>Cat</title>
  <desc>Stick Figure of Cat</desc>
  <!-- 在這裡繪製圖像 -->
  <circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle>
  <circle cx='55' cy='80' r='5' stroke='black' fill='#3339933'></circle>
  <circle cx='85' cy='80' r='5' stroke='black' fill='#3339933'></circle>
</svg>

圖形物件分組

接著使用兩個<line>元素在貓的右臉上新增鬍鬚，先看下線的示意圖：

這很好理解，就不多說了。這裡我們需要把鬍鬚作為一個部件，幷包裝在分組元素<g>(後面會講)裡面，然後給下id，如下所示：

<svg width='140' heiight='170' xmlns='http://wwww.w3.org/2000/svg'>
  <title>Cat</title>
  <desc>Stick Figure of Cat</desc>
  <!-- 在這裡繪製圖像 -->
  <circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle>
  <circle cx='55' cy='80' r='5' stroke='black' fill='#3339933'></circle>
  <circle cx='85' cy='80' r='5' stroke='black' fill='#3339933'></circle>
  <g id='whiskers'>
    <line x1='75' y1='95' x2='135' y2='85' style='stroke:black'></line>
    <line x1='75' y1='95' x2='135' y2='105' style='stroke:black'></line>
  </g>
</svg>

圖形物件分組

接著使用<use>複用鬍鬚分組並將它變換(transfrom) 為左側鬍鬚，如下圖所示，首先在scale變換中對x座標乘以-1，翻轉座標系統。這意味原始座標系統中的點(75, 95)現在位於(-75, 95)。接著通過translate向左平移調整對應的位置。

<svg width='140' heiight='170' xmlns='http://wwww.w3.org/2000/svg'>
  <title>Cat</title>
  <desc>Stick Figure of Cat</desc>
  <!-- 在這裡繪製圖像 -->
  <circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle>
  <circle cx='55' cy='80' r='5' stroke='black' fill='#3339933'></circle>
  <circle cx='85' cy='80' r='5' stroke='black' fill='#3339933'></circle>
  <g id='whiskers'>
    <line x1='75' y1='95' x2='135' y2='85' style='stroke:black'></line>
    <line x1='75' y1='95' x2='135' y2='105' style='stroke:black'></line>
  </g>
  <use xlink:href="#whiskers" transform='scale(-1 1) translate(-140 0)' ></use>
</svg>

其他基本圖形

如下圖所示，咱們使用<polyline>元素構建嘴和耳朵，它接受一對x和y座標為points屬性的值。你可以使用空格或者逗號分隔這些數值。

<svg width='140' heiight='170' xmlns='http://wwww.w3.org/2000/svg'>
  <title>Cat</title>
  <desc>Stick Figure of Cat</desc>
  <!-- 在這裡繪製圖像 -->
  <circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle>
  <circle cx='55' cy='80' r='5' stroke='black' fill='#3339933'></circle>
  <circle cx='85' cy='80' r='5' stroke='black' fill='#3339933'></circle>
  <g id='whiskers'>
    <line x1='75' y1='95' x2='135' y2='85' style='stroke:black'></line>
    <line x1='75' y1='95' x2='135' y2='105' style='stroke:black'></line>
  </g>
  <use xlink:href="#whiskers" transform='scale(-1 1) translate(-140 0)' ></use>
  <!-- 耳朵 -->
  <polyline points='108 62,90 10, 70 45, 50, 10, 32, 62'
    style='stroke:black; fill:none' />
  <!-- 嘴 -->
  <polyline points='35 110,45 120, 95 120, 105, 110'
    style='stroke:black; fill:none'/>
</svg>

路徑

所有的基本形狀都是通用的<path>元素的快捷寫法。接著使用<path>元素為貓新增鼻子。如下所示的程式碼，翻譯過來就是 "移動到座標(75, 90)。繪製一條到座標(65,90)的直線。然後以x半徑為5、y半徑為10繪製一個橢圓，最後回到座標(75, 90)處"

<svg width='140' heiight='170' xmlns='http://wwww.w3.org/2000/svg'>
  <title>Cat</title>
  <desc>Stick Figure of Cat</desc>
  <!-- 在這裡繪製圖像 -->
  <circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle>
  <circle cx='55' cy='80' r='5' stroke='black' fill='#3339933'></circle>
  <circle cx='85' cy='80' r='5' stroke='black' fill='#3339933'></circle>
  <g id='whiskers'>
    <line x1='75' y1='95' x2='135' y2='85' style='stroke:black'></line>
    <line x1='75' y1='95' x2='135' y2='105' style='stroke:black'></line>
  </g>
  <use xlink:href="#whiskers" transform='scale(-1 1) translate(-140 0)' ></use>
  <!-- 耳朵 -->
  <polyline points='108 62,90 10, 70 45, 50, 10, 32, 62'
    style='stroke:black; fill:none' />
  <!-- 嘴 -->
  <polyline points='35 110,45 120, 95 120, 105, 110'
    style='stroke:black; fill:none'/>
  <!-- 鼻子 -->
  <path d='M 75 90 L 65 90 A 5 10 0 0 0 75 90'
    style='stroke:black; fill:#ffcccc'
  />
</svg>

路徑

由於這只是一個簡單的圖形，使用者可能看不出這是一隻貓，所以咱們可以使用 <text> 元素新增一些文字註釋。在 <text> 元素中，x 和 y 屬性用於指定文字的位置，如下所示：

<svg width='140' height='170' 
  xmlns='http://wwww.w3.org/2000/svg'
  xmlns:xlink='http://wwww.w3.org/1999/xlink'>
  <title>Cat</title>
  <desc>Stick Figure of Cat</desc>
  <!-- 在這裡繪製圖像 -->
  <circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle>
  <circle cx='55' cy='80' r='5' stroke='black' fill='#3339933'></circle>
  <circle cx='85' cy='80' r='5' stroke='black' fill='#3339933'></circle>
  <g id='whiskers'>
    <line x1='75' y1='95' x2='135' y2='85' style='stroke:black'></line>
    <line x1='75' y1='95' x2='135' y2='105' style='stroke:black'></line>
  </g>
  <use xlink:href="#whiskers" transform='scale(-1 1) translate(-140 0)' ></use>
  <!-- 耳朵 -->
  <polyline points='108 62,90 10, 70 45, 50, 10, 32, 62'
    style='stroke:black; fill:none' />
  <!-- 嘴 -->
  <polyline points='35 110,45 120, 95 120, 105, 110'
    style='stroke:black; fill:none'/>
  <!-- 鼻子 -->
  <path d='M 75 90 L 65 90 A 5 10 0 0 0 75 90'
    style='stroke:black; fill:#ffcccc'
  />
  <text x="60" y="165" style='font-family:sans-serif;font-size: 14pt;
    stroke:none; fill: black;
  '>Cat</text>

如果看不懂程式碼，沒關係，後面幾章節會深入這些基本及屬性。

在網頁中使用 SVG

SVG 是一種圖件格式，因此可以使用與其他影象型別相同的方式包含在html頁面中。具體可以採用兩種方法：將影象包含在<img>元素內（當影象是頁面的基本組成部分時，推薦這種方式）；或者將影象作為另一個元素的css樣式屬性插入(當影象主要用來裝飾時，推薦這種方式)。

在 <img> 元素內包含 SVG

在<img>元素內包含 SVG 影象非常簡單，只需設定src指向 SVG 檔案位置即可。如下:

<img src='cat.svg' alt=''/>

在css中包含 SVG

可以使用 background-image 屬性來顯示 SVG，如果沒有固有尺寸， SVG 會被縮放為元素高度和寬度的 100%，如下所示：

div.background-cat {
  background-image: url('cat.svg');
  background-size: 100% 100%;
}

使用 object 標籤引入 SVG （不推薦）

<object data='cat.svg' type='image/svg+xml' 
  width='100' height='100'/>

在網頁中直接使用 SVG 標籤

直接引用 svg 定即可，如下所示：

<svg width='140' heiight='170' xmlns='http://wwww.w3.org/2000/svg'>
  <title>Cat</title>
  <desc>Stick Figure of Cat</desc>
  <!-- 在這裡繪製圖像 -->
  <circle cx='70' cy='95' r='50' style='stroke:black; fill:none'></circle>
</svg>

SVG 的視窗，視野和全域性（世界）

視窗

SVG的屬性width、height來控制視窗的大小，也稱為SVG容器

世界

SVG裡面的程式碼，就是對SVG世界的定義

視野

世界是無窮大的，視野是觀察世界的一個矩形區域。如下圖所示

世界不可變，而視野是可以改變的。在SVG中，提供了viewBox和preserveAspectRatio屬性來控制視野。

線段

SVG 可以使用 <line> 元素畫出一條直線，使用只需要指定線段的起(x1, y1)止(x2, y2)點。

<svg width='140' height='170' xmlns='http://wwww.w3.org/2000/svg'>
  <line x1='0' y1='0' x2='100' y2='100' style='stroke:black'/>
</svg>

筆畫的特性

線段可以看作畫面上畫出來的筆畫。筆畫的尺寸、顏色和風格都會影響線段的表現。這些特性都可以在style屬性指定。

stroke-width

stroke-width是設定線段的粗細，如下所示：

<svg width='140' height='170' xmlns='http://wwww.w3.org/2000/svg'>
  <line x1='0' y1='0' x2='100' y2='100' style='stroke-width:10;stroke:black'/>
</svg>

筆畫的顏色和透明度

可以通過以下幾種方式指定筆畫顏色：

基本顏色關鍵字： aqua、black、blue、fuchsia、gray、green 等
由 6 位十六進位制指定的顏色，形式為#rrggbb，其中rr表示紅色,gg表示綠色,bb表示藍色，它們的範圍都是00--ff
由 3 位十六進位制指定的顏色，形式為#rgb，其中r表示紅色，g表示綠色,b表示藍色，它們的範圍都是0-f。
通過rgb()形式指定的rgb顏色值，每個值的取值範圍都是整數0-255或者百分比0 - 100%
currentColor 關鍵字，表示當前元素應用的 CSS 屬性 color 的值。color 是用來給html的文字設定顏色的，會被子元素繼承，但對 SVG 沒有直接效果。

線段都是實線，咱們也可以使用stroke-opacity來控制線的透明度，取值範圍和 CSS 一樣0.0-1.0,來幾個例子演示一下：

來幾個例子演示一下：

<svg width='140' height='170' xmlns='http://wwww.w3.org/2000/svg'>
  <!-- 紅色 -->
  <line x1='10' y1='10' x2='50' y2='10' style='stroke-width:5;stroke:red'/>
  <!-- 談綠色 -->
  <line x1='10' y1='20' x2='50' y2='20' style='stroke-width:5;stroke:#9f9f;stroke-opacity: 0.2' />
  <!-- 橘色 -->
  <line x1='10' y1='40' x2='50' y2='40' style='stroke-width:5;stroke:rgb(255,128,64);stroke-opacity: 0.5' />
  <!-- 深紫色 -->
  <line x1='10' y1='50' x2='50' y2='50' style='stroke-width:5;stroke:rgb(60%,20%,60%);stroke-opacity: 0.8' />
</svg>

如果不指定筆畫顏色的話，將看不到任何線，因為 stroke 屬性的預設值是 none

stroke-dasharray 屬性

有時咱們需要點線和虛線，剛需要使用 stroke-dasharray 屬性，它的值由一列數字構成，代表線的長度和空隙的長度，數字之間用逗號或空格隔開。數字的個數應該為偶數，但如果是奇數，則 SVG 會重複不次，讓總數為偶數。

<svg width='200' height='200' xmlns='http://wwww.w3.org/2000/svg'>
  <!-- 9個畫素的虛線，5個畫素的空隙 -->
  <line x1='10' y1='10' x2='100' y2='10'
    style='stroke-dasharray:9, 5; stroke: black; stroke-width:2'
  />
  <!-- 5個畫素的虛線，3個畫素的空隙 ,9個畫素的虛線，2個畫素的空隙 -->
  <line x1='10' y1='30' x2='100' y2='30'
    style='stroke-dasharray:9, 5, 9, 2; stroke: black; stroke-width:2' />
  <!-- 複製奇數個數 -->
  <line x1='10' y1='50' x2='100' y2='50'
    style='stroke-dasharray:9, 3, 5; stroke: black; stroke-width:2' />
</svg>

矩形

矩形是最簡單基本形狀，只需要其左上角x和y座標以及它的寬度(width)和高度(height)，如果想要指定圓角，可以指定rx(x方向的圓角半徑)，該最大值是矩形寬度的一半，同理，ry(y 方向的圓角半徑)，該最大值是矩形高度的一半。如果只指定了rx和ry中的一個值，則認為它們相等，矩形內部還可以使用fill屬性來填充顏色，預設為黑色，用 stroke 來繪製邊框，預設透明。來幾個例子看看。

<svg width='300' height='500' xmlns='http://wwww.w3.org/2000/svg'>
  <!-- 內部填充為黑色，不繪製邊框 -->
  <rect x='10' y='10' width='30' height='50'/>
  <!-- 內部填充為藍色，繪製較粗，半透明紅色邊框-->
  <rect x='50' y='10' width='30' height='50'
    style='fill: #0000ff;stroke: red;stroke-width: 7; stroke-opacity: .5'/>
  <!-- rx 和 ry 相等，逐漸增大-->
  <rect x='10' y='70' rx='2' ry='2' width='20' height='40' 
    style='stroke:black; fill:none'/>ry5'
  <!-- rx 和 ry 相等，逐漸增大-->
  <rect x='50' y='70' rx='5'  width='20' height='40' 
    style='stroke:black; fill:none' />
  <!-- rx 和 ry 不相等 -->
  <rect x='10' y='130' rx='10' ry='5' width='20' height='40' style='stroke:black; fill:none' />
  <rect x='50' y='130' rx='10' ry='5' width='10' height='40' style='stroke:black; fill:none' />
</svg>

圓和橢圓

畫一個圓，需要使用<circle>元素，並指定圓心的x和y座標(cx/cy) 以及半徑(r)。和矩形一樣，不指定 fill 和 stroke 時，圓會使用黑色填充並且沒有輪廓線。

<svg width='300' height='500' xmlns='http://wwww.w3.org/2000/svg'>
  <circle cx='30' cy='30' r='20' style='stroke:black; fill:none'/>
  <circle cx='80' cy='30' r='20' style='stroke-width:5;stroke:black; fill:none' />

  <ellipse cx='30' cy='80' rx='10' ry='20'
    style='stroke:black; fill:none'
  />
  <ellipse cx='80' cy='80' rx='20' ry='10'
    style='stroke:black; fill:none'
  />
</svg>

對於橢圓來說，除了指定圓心和座標外，還需要同時指定x方向的半徑和y方向的半徑，屬性分為是rx和ry。對於圓和橢圓來說，如果省略cx或者cy，則預設為0，如果半徑為0，則不會顯示圖形，如果半徑為負數，則會報錯。來幾個例子看看：

多邊形

咱們可以使用<polygon>元素繪製多邊形，使用points屬性指定一系列的x/y座標對，並用逗號或者空格分隔座標個數必須是偶數。指定座標不需要在最後指定返回起始座標，<polygon>元素會自動回到起始座標。來幾個例子看看：

<svg width='200' height='200' xmlns='http://wwww.w3.org/2000/svg'>
  <!--平等四邊形-->
  <polygon points='15,10 55,10 45,20 5,20'
    style='fill:red; stroke: black;'
  />
  <!--五角星-->
  <polygon points='35,37.5 37.9,46.1 46.9,46.1 39.7,51.5
    42.3,60.1 35,55 27.7,60.1 30.3,51.5 23.1,46.1 32.1,46.1'
    style='fill: #ccffcc; stroke: green;'
    />
  <!--不規則圖形-->
  <polygon points='60 60, 65,72 80 60, 90,90 72,85 50,95'
    style="fill: yellow; fill-opacity:.5; stroke:black"
  />
</svg>

從上面很容易看出多邊形都很容易填充，因為多邊形的各邊都沒有交叉，很容易區分出多邊形的內部區域和外部區域。但是，當多邊形彼此交叉的時候，要區分哪些區域是圖形內部並不容易。如下如融合所示，中間的區域是算內部還是外部呢？

<svg width='200' height='200' xmlns='http://wwww.w3.org/2000/svg'>
  <polygon points='48,16 16,96 96,48 0,48 80,96'
    style='fill:none; stroke: black;'
  />
</svg>

SVG有兩種判斷某個點是否在多邊形中的規則。分別對應fill-true屬性的nonezero（預設值）和evenodd。其效果圖分別如下：

<body style='padding: 100px 0 0 200px'>

<svg width='200' height='200' xmlns='http://wwww.w3.org/2000/svg'>
  <polygon points='48,16 16,96 96,48 0,48 80,96'
    style='fill-rule: nonzero; fill:yellow; stroke: black;'
  />

  <polygon points='148,16 116,96 196,48 100,48 180,96'
    style='fill-rule: evenodd; fill:red; stroke: black;' />
</svg>

拆線

<polyline>元素與 <polygon> 有相同的屬性，不同之處在於圖形並不封閉，直接來個事例看看：

<svg width='200' height='200' xmlns='http://wwww.w3.org/2000/svg'>
  <polyline points="5,20 20,20 25,10 35,30 45,10
    55,30 65,10 74,30 80,20 95,20"
    style="stroke:black; stroke-width:3; fill:none"
  />
</svg>

總結

形狀元素

線段：<line x1=" " y1=" " x2=" " y2=" "/>

矩形：<rect x=" " y=" " width=" " height=" " />

圓角矩形：<rect x=" " y=" " rx=" " ry=" " />

圓形：<circle cx=" " cy=" " r=" "/>

橢圓形：<ellipse cx=" " cy=" " rx=" " ry=" " />

多邊形：<polygon points=" " />

折線：<polyline points=" " /> //注意需把fill設成none

SVG有兩種判斷某個點是否在多邊形中的規則。分別對應fill-true屬性的nonezero（預設值）和evenodd。其效果圖分別如下：

筆畫特性：

屬性	值
stoke	筆畫顏色，預設為none
stroke-opacity	筆畫透明度，預設為1.0（完全不透明），值範圍：0.0~1.0
stroke-dasharray	用一系列數字指定虛線和間隙的長度，如：stroke-dasharray:5,10,5,20
stroke-linecap	線頭尾的形狀：butt（預設）、round、square
stroke-linejoin	圖形的稜角或一系列連線的形狀：miter（尖的，預設值）、round（圓的）、bevel（平的）
stroke-miterlimit	相交處顯示寬度與線寬的最大比例，預設為4

填充顏色

屬性	值
fill	指定填充顏色，預設值為 black
fill-opacity	從 0.0 到 1.0 的數字， 0.0 表示完全透明, 1.0(預設值) 表示完全不透明
fill-rule	屬性值為 nonzero (預設值) 或 evenodd。

在 SVG 中使用樣式

在 SVG 的使用樣式中 CSS 很相似，主要有 4 種，分別如下：

內聯樣式
內部樣式表
外部樣式表
表現屬性

內聯樣式

用法跟 css 一樣，如下所示：

<line style="fill:yellow;stroke:blue;stroke-width=4" x1="10" y1="10" x2="100" y2="100"/>*

內部樣式表

用法也跟 css 的類名一樣，如下所示：

.linestyle{
stroke:red;
stroke-width:2;
}
// 那麼在使用標籤時，指定此樣式即可：
<line class="linestyle" x1="10" y1="10" x2="100" y2="100"/>

外部樣式表

跟 CSS 用法一樣，把樣式寫在另外檔案中，然後匯入使用。

表現屬性

咱們可能通過 style 屬性修改樣式，當然 style 裡面的屬性值，可以單獨寫，這種也叫表現屬性：

<circle cx='10' cy='10' r='5'
  fill='red' stroke='black' stroke-width='2'/>

分組與引用物件

雖然可以將所有的繪圖看成是由一系列幾乎一樣的形狀和線條組成的，但通常咱們還是認為大多數非抽象的藝術作品是由一系列命名物件組成的，而這些物件由形狀和線條組合而成。SVG 提供了一些元素，允許咱們對元素進行這樣的分組，從而使文件更加結構化以及更易理解。

<g> 元素

1）<g>元素會將所有子元素作為一個組合，通常還有一個唯一的id作為名稱;
2）每個組合還可以擁有自己的<title>和<desc>來供基於文字的xml應用程式識別或者為視障使用者提供更好的可訪問性;
3）閱讀器會讀取<title>和<desc>元素的內容。滑鼠懸停或者輕觸組合內的圖形時，會顯示<title>元素內容的提示框。
4）<g>元素可以組合元素並可以提供一些註釋，組合還可以比較巢狀;

在起始 <g> 標籤中指定的所有樣式會應用於組合內的所有子元素，如下面示例所示，咱們可以不用複製每個元素上的

 <svg width='240' height='240' xmlns='http://wwww.w3.org/2000/svg'>
  <title>歡樂一家人</title>
  <desc>一家人在一起就是簡單幸福的了</desc>

  <g id='house' style='fill:none; stroke:black'>
    <desc>房子</desc>
    <rect x='6' y='50' width='60' height='60'/>
    <polyline points='6 50, 36 9, 66 50' />
    <polyline points='36 110, 36 80, 50 80， 50 110' />
  </g>

  <g id='man' style='fill:none; stroke:green'>
    <desc>男人</desc>
    <circle cx='85' cy='56' r='10'/>
    <line x1='85' y1='66' x2='85' y2='80'/>
    <polyline points='76 104, 85 80, 94 104'/>
    <polyline points='76 70, 85 76, 94 70'/>
  </g>

  <g id='woman' style='fill:none; stroke:red'>
    <desc>女人</desc>
    <circle cx='110' cy='56' r='10'/>
    <polyline points='110 66, 110 80, 100 90, 120 90, 110 80'/>
    <line x1='104' y1='104' x2='108' y2='90'/>
    <line x1='112' y1='90' x2='116' y2='104'/>
    <polyline points='101 70, 110 76, 119 80'/>
  </g>
 </svg>

<use> 元素

1）複雜的圖形中經常會出現重複元素，svg 使用<use>元素為定義在<g>元素內的組合或者任意獨立圖形元素提供了類似複雜黏貼的能力;
2）定義了一組<g>圖形物件後，使用<use>標籤再次顯示它們。要指定想要的重用的組合就給xlink:href屬性指定URI即可，同時還要指定x和y的位置以表示組合應該移動到的位置。
3）<use>元素並不限制只使用在同一個檔案內的物件，還可以指定任意有效的檔案或者URI.

因此為了建立另一個上面的房子和一組小人，只要把下面的程式碼入<svg>元素裡面即可。

<use xlink:href='#house' x='70' y='100'/>
<use xlink:href='#woman' x='-80' y='100'/>
<use xlink:href='#man' x='-30' y='100'/>

<defs>元素

上面例子有幾個缺點：

複用man和woman組合時，需要知道原始影象中這些圖形的位置，並以此位置作為利用的基礎，而不是使用諸如0這樣的簡單數字
房子的填充和筆畫顏色由原始圖形建立，並且不能通過 <use> 元素覆蓋，這說明咱們不能構造一行彩色的房子。
文件中會畫出所有的三個元素 woman,man 和 house,並不能將它們單獨 '儲存' 下來，然後只繪製一排房子或者只繪製一組人。

<defs>元素可以解決這些問題

1）SVG規範推薦我們將所有想要複用的物件放置在元素內，這樣SVG閱讀器進入流式環境中就能更輕鬆地處理資料。
2）由於組合在<defs>元素內，它們不會立刻繪製到螢幕上，而是作為"模板"供其他地方使用。

<svg width='240' height='240' viewBox='0 0 240 240' xmlns='http://wwww.w3.org/2000/svg'>
  <title>歡樂一家人</title>
  <desc>一家人在一起就是簡單幸福的了</desc>
  
  <defs>
    <g id='house' style='stroke:black'>
      <desc>房子</desc>
      <rect x='0' y='41' width='60' height='60' />
      <polyline points='0 41, 30 0, 60 41' />
      <polyline points='30 110, 30 71, 44 71， 44 101' />
    </g>
    
    <g id='man' style='fill:none; stroke:green'>
      <desc>男人</desc>
      <circle cx='10' cy='10' r='10' />
      <line x1='10' y1='20' x2='10' y2='44' />
      <polyline points='1 58, 10 44, 19 58' />
      <polyline points='1 24, 10 30, 19 24' />
    </g>
    
    <g id='woman' style='fill:none; stroke:red'>
      <desc>女人</desc>
      <circle cx='10' cy='10' r='10' />
      <polyline points='10 20, 10 34, 0 44, 20 44, 10 34' />
      <line x1='4' y1='58' x2='8' y2='44' />
      <line x1='12' y1='44' x2='16' y2='58' />
      <polyline points='1 24, 10 30, 19 24' />
    </g>

    <g id='couple'>
      <desc>夫妻</desc>
      <use xlink:href='#man' x='0' y='0'/>
      <use xlink:href='#woman' x='25' y='0'/>
    </g>
  </defs>
  <use xlink:href='#house' x='0' y='0' style='fill:#cfc'/>
  <use xlink:href='#couple' x='70' y='40'/>

  <use xlink:href='#house' x='120' y='0' style='fill:#99f' />
  <use xlink:href='#couple' x='190' y='40' />
</svg>

<symbol>元素

<symbol>作為模板，同<defs>一樣，內部的所有元素都不會展現在畫布上，因此咱們無需把它放在 <defs> 規範內。然而，咱們還是習慣將它放到<defs>中，因為 symbol 也是咱們定義的供後續使用的元素。

<svg width='240' height='240' viewBox='0 0 240 240' xmlns='http://wwww.w3.org/2000/svg'>
  <defs>
    <symbol id="circle" viewBox="0 0 100 100" preserveAspectRatio="xMinYMin meet">
      <circle cx="50" cy="50" r="50"></circle>
    </symbol>
    <symbol id="triangle" viewBox="0 0 100 100" preserveAspectRatio="xMaxYMax slice">
      <polygon points="0 0, 100 0, 50 100"></polygon>
    </symbol>
  </defs>
  <g stroke="grey" fill="none">
    <rect x="0" y="0" width="50" height="100"></rect>
    <rect x="100" y="0" width="50" height="100"></rect>
  </g>
  <use xlink:href="#circle" width="50" height="100" fill="red"></use>
  <use xlink:href="#triangle" width="50" height="100" fill="red" x="100"></use>
</svg>

image 元素

<image>顧名思義裡面放圖片的，至於說是向量圖(vector)還是點陣圖(raster)，都成，用起來也方便：

<svg width='310' height='310' viewBox='0 0 310 310' xmlns='http://wwww.w3.org/2000/svg'>
  <ellipse cx='154' cy='154' rx='150' ry='120' style='fill: #999'/>
  <ellipse cx='152' cy='152' rx='150' ry='120' style='fill: #999' />

  <image xlink:href='3.jpg' x='72' y='92'
    width='160' height='120'
  />
</svg>

SVG入門指南

SVG 簡介

SVG 的應用

SVG瀏覽器的相容情況

SVG 與 Canvas 區別

圖形系統

柵格圖形

向量圖形

建立 SVG 影象

SVG 文件基本結構

基本形狀和屬性

基本形狀 --- 圓形

指定樣式的屬性

圖形物件分組

圖形物件分組

其他基本圖形

路徑

路徑

在網頁中使用 SVG

在 <img> 元素內包含 SVG

在css中包含 SVG

使用 object 標籤引入 SVG （不推薦）

在網頁中直接使用 SVG 標籤

SVG 的視窗，視野和全域性（世界）

線段

筆畫的特性

stroke-width

筆畫的顏色和透明度

stroke-dasharray 屬性

矩形

圓和橢圓

多邊形

拆線

總結

形狀元素

筆畫特性：

填充顏色

在 SVG 中使用樣式

分組與引用物件

<g> 元素

<use> 元素

<defs>元素

<symbol>元素

image 元素

相關推薦