吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【SVG】シンボル要素(コンテナ要素)

2015年2月26日 / category : svg

シンボル要素について、書いてみます。
使い方は、g要素とほぼ同じです。

HTML
<svg width="300" height="300"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <symbol id="s0">
  <rect x="0" y="0" width="15" height="15" fill="#7db960" />
  <rect x="15" y="0" width="15" height="15" fill="#b96060" />
  <rect x="0" y="15" width="15" height="15" fill="#607db9" />
  <rect x="15" y="15" width="15" height="15" fill="#b9a760" />
 </symbol>
 <use xlink:href="#s0" x="0" y="0" width="30" height="30" />
</svg>

symbol要素内に、グラフィック要素を定義します。symbol要素自体は描画されませんので、defs要素で囲む必要はありません。
symbol要素を使用するためには、use要素を使用します。xlink:href属性でsymbol要素のidを指定することで描画することができます。

もちろん、use要素を複数用意し、symbol要素を使いまわすこともできます。

HTML
<svg width="300" height="300"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <symbol id="s1">
  <rect x="0" y="0" width="15" height="15" fill="#7db960" />
  <rect x="15" y="0" width="15" height="15" fill="#b96060" />
  <rect x="0" y="15" width="15" height="15" fill="#607db9" />
  <rect x="15" y="15" width="15" height="15" fill="#b9a760" />
 </symbol>
 <use xlink:href="#s1" x="0" y="0" width="30" height="30" />
 <use xlink:href="#s1" x="45" y="0" width="30" height="30" />
</svg>

ここで、ひとつの疑問が。
g要素とどう違うのか。上のサンプルを、g要素で作ってみます。

HTML
<svg width="300" height="300"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <defs>
  <g id="g0">
   <rect x="0" y="0" width="15" height="15" fill="#7db960" />
   <rect x="15" y="0" width="15" height="15" fill="#b96060" />
   <rect x="0" y="15" width="15" height="15" fill="#607db9" />
   <rect x="15" y="15" width="15" height="15" fill="#b9a760" />
  </g>
 </defs>
 <use xlink:href="#g0" x="0" y="0" width="30" height="30" />
 <use xlink:href="#g0" x="45" y="0" width="30" height="30" />
</svg>

g要素でも問題なく、同じように描画できました。
では、symbol要素とg要素で何が違うのでしょうか。

次のサンプルを見ています。

HTML
<svg width="300" height="300"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <symbol id="s2" viewBox="0 0 30 30">
  <rect x="0" y="0" width="15" height="15" fill="#7db960" />
  <rect x="15" y="0" width="15" height="15" fill="#b96060" />
  <rect x="0" y="15" width="15" height="15" fill="#607db9" />
  <rect x="15" y="15" width="15" height="15" fill="#b9a760" />
 </symbol>
 <use xlink:href="#s2" x="0" y="0" width="30" height="30" />
 <use xlink:href="#s2" x="45" y="0" width="60" height="60" />
</svg>

symbol要素には、viewBox属性を設定することができます。
viewBox属性とは、グラフィックをコンテナ要素に描画する際に、拡縮させたい場合に使用する属性です。
symbol要素内に定義したグラフィック要素のサイズは、30px × 30pxです。ぴったりと収めるためにviewBox属性を”0 0 30 30″としました。
実際に描画するuse要素のwidth属性とheight属性を見てみます。
1つ目のuse要素は、

width=”30″ height=”30″

としています。これは、viewBox属性と同じサイズなので、等倍で描画されます。

次に2つ目のuse要素ですが、

width=”60″ height=”60″

としています。これは、2倍のサイズなので、描画も2倍の大きさになります。

このviewBox属性は、g要素では設定できない属性なので、ここが大きい違いとなります。