SVG 意為可縮放向量圖形（Scalable Vector Graphics），SVG 使用 XML 格式定義影象。

g表示分組元素，將多個元素 設定為組，實現多個元素如：平移、旋轉之類的整體操作；

defs實現元素定義，定義的元素不直接顯示在畫板上，通過use重用desf、g、symbol定義的元素，實現元素重用；

symbol 兼具<g>的分組功能和<defs>初始不可見的特性，同時可使用viewbox與preserveAspectRatio，在虛擬座標系中實現圖形繪製。

備註：在繪製svg圖形時，若未定義viewbox，當圖形大小超過繪製面板大小時，繪製的圖形直接被擷取，但使用viewbox後，畫板將按照viewbox定義的邊界進行縮放，確保圖形能夠完整繪製到畫板上；

g元素示例：

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
        width="300" height="200">
    <g id="group" fill="red" transform="translate(50)rotate(110)">
      <rect x="10" y="10" width="100" height="100" />
      <rect x="120" y="10" width="100" height="100" />
    </g>
  </svg>
 

使用use複用g示例：

<svg xmlns="http://www.w3.org/2000/svg"  version="1.1">
    <g id="group" fill="red" >
      <rect x="10" y="10" width="100" height="100"/>
    </g>
    <use id="one" x="0" y="110" xlink:href="#group"/>
    <use id="two" x="0" y="220" xlink:href="#group" stroke="black" stroke-width="2"/>
  </svg>
 

備註：在use中使用xlink:href 屬性引用相關待複用元素ID，use中x、y座標是相對於原圖形定義的初始座標的位移座標，相當於使用了transform="translate(x,y)"

defs示例：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
      <rect
            id="defs"
            x="90" y="110"
            width="100" height="100" />
    </defs>
  
    <use id="ant"
         transform="translate(0 110) rotate(10 0 0)"
         fill="red"
         xlink:href="#defs" />
    <rect id="rect"
          fill="blue"
          x="90" y="220"
          width="110" height="110"
          transform="rotate(10 0 110)"
          fill-opacity="0.5" />
  </svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="400">
    <defs>
        <g id="ShapeGroup">
            <rect x="50" y="50" width="100" height="100" fill="#69C" stroke="red" stroke-width="2"/>
            <circle cx="100" cy="100" r="40" stroke="#00f" fill="none" stroke-width="5"/>
        </g>
    </defs>
    <use xlink:href="#ShapeGroup" transform="translate(-10,0) scale(0.5)"/>
    <use xlink:href="#ShapeGroup" transform="translate(10,10) scale(1)"/>
    <use xlink:href="#ShapeGroup" transform="translate(50,60) scale(1.5)"/>
</svg>

symbol示例：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <symbol id="symbol" viewBox="0 0 250 250">
      <rect x="90" y="110" width="100" height="100" />
    </symbol>
  
    <use id="ant"
         transform="translate(0 110) rotate(10 0 0)"
         fill="red"
         xlink:href="#symbol" />
    <rect id="rect"
          fill="blue"
          x="90" y="220"
          width="110" height="110"
          transform="rotate(10 0 110)"
          fill-opacity="0.5" />
  
  </svg>