SVG 定義 symbol 並重複利用圖形與 SVG Sprite

標籤: SVG SVG Sprite

在 svg 裡我們也可以將要重複使用的圖形用 symbol 定義起來,之後再用 use 來使用即可。

使用方法為在 svg 用 symbol 標籤,在裡面繪製圖形,為了要給 use 使用所以要設定一個 id,使用方法像這樣 xlink:href="#heart",以下為範例:

 

以往要製作小圖示會使用到 css sprite 的技巧,後來因為 rwd 及需要在視網膜解析度也能漂亮呈現 icon,就有用 icon font 取代 css sprite 的技術,但由於 icon font 一次需載入整包字型檔加上文字可能會有鋸齒,於是就又有些人會使用 svg sprite 的方式來製作,只要善用 SVG Sprite 的特性,先定義一些圖示後再把這些圖示用到想呈現的地方即可。

首先我們會用 svg 的 symbol 來定義一些圖樣,像這樣:

<svg>
<symbol id="symbol1">
...
</symbol>
</svg>

 

要使用的時候再用 use 去指定 id 就可以了

<svg>
<use xlink:href="#id"></use>
</svg>

 

這邊則是寫了一個功能是改變目標的 xlink:href 屬性就可以切換 icon