前面介紹了很多的圖形元素，如果很多圖形本身是一樣的，需要每次都去定義一個新的麼？我們能否共用一些圖形呢？這是這節的重點 - SVG元素的重用。

組合 - g元素

g元素是一種容器，它組合一組相關的圖形元素成為一個整體；這樣，我們就可以對這個整體進行操作。這個元素通常可以和desc和title元素配合使用，提供文件的結構資訊。結構良好的文件通常可讀性和渲染效率都不錯。看一個小例子：

<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1" width="5cm" height="5cm">
  <desc>Two groups, each of two rectangles</desc
 
>
  <g id="group1" fill="red">
    <rect x="1cm" y="1cm" width="1cm" height="1cm"/>
    <rect x="3cm" y="1cm" width="1cm" height="1cm"/>
  </g>
  <g id="group2" fill="blue">
    <rect x="1cm" y="3cm" width="1cm" height="1cm"/>
    <rect x="3cm" y="3cm" width="1cm"
 
 height="1cm"/>
  </g>

  <!-- Show outline of canvas using 'rect' element -->
  <rect x=".01cm" y=".01cm" width="4.98cm" height="4.98cm"
        fill="none" stroke="blue" stroke-width=".02cm"/>
</svg>

注意幾點：
1. xmlns=”http://www.w3.org/2000/svg”表明了整個svg元素預設的名稱空間是svg。這個在無歧義的時候可以省略。這裡由於svg文件是一個XML文件，XML名稱空間的相關規則這裡都是適用的。例如可以給svg顯示的指定名稱空間，給名稱空間提供別名等。
2. g元素是可以巢狀的。
3. 組合起來的圖形元素就和單個的元素一樣，可以給id值，這樣，需要的時候(例如動畫和重用一組元素)只用引用這個id值就可以了。
4. 組合一組圖形元素可以統一設定這組元素的相關屬性(fill,stroke,transform等)，這也是使用組合的一種場景。

模板 - symbol元素

symbol元素用於定義圖形模板(模板可以包含很多圖形)，這個模板可以被use元素例項化。模板的功能與g元素很相似，都是提供一組圖形物件，但是也有一些區別。與g元素不同的地方是：

1.symbol元素本身是不會被渲染的，只有symbol模板的例項會被渲染。
2.symbol元素可以擁有屬性viewBox和preserveAspectRatio，這些允許symbol縮放圖形元素。

從渲染角度來說，與symbol元素相似的元素是marker(定義箭頭和標號)和pattern(定義顏色)元素；這些元素不會直接被渲染；他們的使用方式基本都是由use元素去例項化。正是這個原因，對於symbol來說，’display’屬性是沒有意義的。
下面這個修改過的程式碼顯示了symbol的使用方式：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1" width="5cm" height="5cm">
  <desc>Two groups, each of two rectangles</desc>
  <symbol id="group1" fill="red">
    <rect x="1cm" y="1cm" width="1cm" height="1cm"/>
    <rect x="3cm" y="1cm" width="1cm" height="1cm"/>
  </symbol>
  <g id="group2" fill="blue">
    <rect x="1cm" y="3cm" width="1cm" height="1cm"/>
    <rect x="3cm" y="3cm" width="1cm" height="1cm"/>
  </g>
  <use xlink:href="#group1" target="_blank" rel="nofollow">

  <!-- Show outline of canvas using 'rect' element -->
  <rect x=".02cm" y=".02cm" width="4.96cm" height="4.96cm"
        fill="none" stroke="blue" stroke-width=".02cm"/>
</svg>

定義 - defs元素

SVG允許定義一組物件，然後重用這組物件(注意，不僅僅是圖形物件)。最常見的例子如定義漸變色，然後再其他的圖形物件中賦給fill屬性。漸變色定義的時候是不會渲染的，所以這型別的物件可以放到任何地方。重用對於圖形物件中也是經常存在的，而且我們也不希望定義的時候直接渲染，而是想在引用的地方渲染，這個可以用defs元素實現。

通常情況下，推薦的做法是：只要有可能，就把被引用的物件放到defs元素中。這些物件通常是：altGlyphDef,clipPath,cursor,filter, marker,mask,pattern,linearGradient,radialGradient，symbol和圖形物件等。把這些物件定義在defs元素中很容易理解，所以就提高了可訪問性。

其實作為容器物件的g元素、symbol元素、defs元素都不同程度上提供了重用的作用，只不過每個元素的特性可能少許不同：比如g元素是直接渲染的，symbol和defs不會直接渲染，symbol含有viewBox屬性，會建立新的視窗。

通常都會給在defs中定義的元素賦予id屬性，並在用到的地方直接使用。根據元素的不同，這些定義可以用到不同地方，比如下面的漸進色作為屬性來使用了：

<svg width="8cm" height="3cm"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Local URI references within ancestor's 'defs' element.</desc>
  <defs>
    <linearGradient id="Gradient01">
      <stop offset="20%" stop-color="#39F" />
      <stop offset="90%" stop-color="#F3F" />
    </linearGradient>
  </defs>
  <rect x="1cm" y="1cm" width="6cm" height="1cm" 
        fill="url(#Gradient01)"  />
</svg>

圖形相關元素的定義可以用use元素連結到文件。例如：

<svg width="10cm" height="3cm" viewBox="0 0 100 30" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Example Use01 - Simple case of 'use' on a 'rect'</desc>
  <defs>
    <rect id="MyRect" width="60" height="10"/>
  </defs>
  <rect x=".1" y=".1" width="99.8" height="29.8"
        fill="none" stroke="blue" stroke-width=".2" />
  <use x="20" y="10" xlink:href="#MyRect" />
</svg>

在這裡請注意xlink名稱空間的使用。儘管大多數檢視器沒有它也將正確顯示這一項，但為了保持一致，xlink名稱空間應該在元素上定義。

引用 - use元素

use元素也有x, y, width和height屬性，這些屬性可以省略，如果不省略的話，會將被引用的圖形內容座標或長度對映到當前的使用者座標空間來。

use元素的作用過程就相當於把被引用的物件深拷貝一份到獨立的非公開的DOM樹中；這棵樹的父節點是use元素。雖然是非公開的DOM節點，但是本質上還是DOM節點，所以被引用物件的所有屬性值、動畫、事件、CSS的相關設定等都會拷貝多來並都還是會起作用，而且這些節點也會繼承use元素和use祖先的相關屬性(注意引用元素是深拷貝，這些拷貝過來的元素與原來的元素已經無關係了，所以這裡不會繼承被引用元素祖先節點的屬性)，如果這些節點本身有相關(CSS)屬性，還會覆蓋繼承來的屬性，這些與普通的DOM節點是一致的，所以對use元素使用”visibility:hidden”時要小心，並不一定會起作用。但是由於這部分節點是非公開的，在DOM操作中，也只能看到use元素，所以也只能操作到use元素。
從視覺效果來看，use元素更像是佔位符，渲染完成後的視覺效果就和直接用被引用物件渲染是一樣的：

1. use元素引用一個symbol元素
   這種情況下，視覺效果就相當於：
   (1) 把use元素換成g元素；
   (2) 把use的除x,y,width,height,xlink:href外的屬性全部移到g元素；
   (3) 把use的x,y屬性變成translate(x,y)，追加到g元素的transform屬性最後；
   (4)把引用的symbol元素換成svg元素，這個svg元素會顯式使用use元素的width和height屬性(use元素沒有這些屬性則是100%)；
   (5) 把引用的symbol元素的圖形內容深拷貝到替換的svg中。
2. use元素引用一個svg元素
   這種情況下，視覺效果就相當於：
   (1) 把use元素換成g元素；
   (2) 把use的除x,y,width,height,xlink:href外的屬性全部移到g元素；
   (3) 把use的x,y屬性變成translate(x,y)，追加到g元素的transform屬性最後；
   (4) 把引用的svg元素包括內容拷貝過來，這個svg元素會顯式使用use元素的width和height屬性(use元素沒有這些屬性則使用原來的值)；
3. 其他情況
   這些情況下的視覺效果就相當於：
   (1) 把use元素換成g元素；
   (2) 把use的除x,y,width,height,xlink:href外的屬性全部移到g元素；
   (3) 把use的x,y屬性變成translate(x,y)，追加到g元素的transform屬性最後；
   (4) 把引用元素拷貝過來；
   看下面例子的視覺效果：

<svg width="10cm" height="3cm" viewBox="0 0 100 30" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Example Use03 - 'use' with a 'transform' attribute</desc>
  <defs>
    <rect id="MyRect" x="0" y="0" width="60" height="10"/>
  </defs>
  <rect x=".1" y=".1" width="99.8" height="29.8"
        fill="none" stroke="blue" stroke-width=".2" />
  <use xlink:href="#MyRect"
       transform="translate(20,2.5) rotate(10)" />
</svg>

下面的圖和上面的圖外觀是一樣的：

<svg width="10cm" height="3cm" viewBox="0 0 100 30"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example Use03-'use' with a 'transform' attribute</desc>

  <rect x=".1" y=".1" width="99.8" height="29.8"
        fill="none" stroke="blue" stroke-width=".2" />

  <g transform="translate(20,2.5) rotate(10)">
    <rect x="0" y="0" width="60" height="10"/>
  </g>
</svg>