XMLは手打ちするもんじゃない、とはよく言いますが。

今回は手打ちする人向きのお話かもしれません。
SVGがXMLベースのベクター画像だということはご存知だと思いますが、実はこれ、パスが使い回しできます。
今回ちょっと訳あって、ひとつの画像の中に似たような小さい絵がいくつもある画像(参考)をベクター画像でほしくなったのでちょっと調べていたら出てきました。

defsとuse

早速今回の主役のご紹介です。使うのはdefsタグとuseタグです。察しの通り、defsタグは使いまわしたいパスの定義、useはパスを使うためのタグです。以下がその例。全部見たい方はこちらからどうぞ。

<svg width="303.402" height="467.144" viewBox="0 0 303.40 467.14"><!--←いくつか要素を省略-->
  <defs>
    <path id="hoge" fill="#006432" fill-opacity="1" stroke-width="0.704" stroke-linejoin="round" stroke="#006432" stroke-opacity="1" d="(1200文字くらいパスの指定してる)"/>
  </defs>
  <use xlink:href="#hoge" x="0" y="0"/>
  <use xlink:href="#hoge" x="0" y="260"/>
  <use xlink:href="#hoge" x="110" y="0"/>
  <use xlink:href="#hoge" x="110" y="260"/>
  <use xlink:href="#hoge" x="220" y="0"/>
  <use xlink:href="#hoge" x="220" y="260"/>
</svg>

特に難しいことはありませんね。こうする前はこんなかんじでした。これだけで10KBが3KBになります。たかだか数KBの削減ですがオブジェクトの構成の見通しが良くなります。ツールを持ち出すまでもないようなシンプルな画像を手打ちするような物好きはいるのか知りませんが、一度作ったパスを使い回しできるのもステキです*1。
とくに件の画像群は結構使いまわせるものが多いので効果てきめんです。色違いもありますが、ラスター画像と違ってサッとテキストを書き換えるだけで終わります。

*1:元画像は私がExpression Designでさくっと作りました