SVGの最も有用な使用法の一つ、「複数のベクターグラフィックを一つのデータにまとめて、使いたい時に呼び出す」という「SVGスプライト」があります。 「SVGを使おう!」でもほんの少しお話ししましたが、cssスプライトとの大きな違いとしては、やはり「スタイルを都度変更できる」ところでしょう。 カラーバリエーションやサイズバリエーション、ちょっとした違いごとに同じグラフィックをいくつも作成する必要が無くなります。また、ベクターグラフィックなのでサイズを気にする必要もまったくありません。 極端に言えば、10×10pxのSVGを1000×1000pxに引き延ばそうが何ら問題はないのです。(※画像と同様 描画は重くなりますけれど・・) 今回はこの「SVGスプライトのつくり方」として、基礎となる部分をお話しさせていただきます。 この部分をしっかり理解しておくとIllustratorなどからSVGスプラ
![SVGスプライトをつくってみよう1](https://cdn-ak-scissors.b.st-hatena.com/image/square/13c3317cc5ae3d60c49add86945fd8a59299584f/height=288;version=1;width=512/https%3A%2F%2Fglitter-style.jp%2Flabo%2Fwp-content%2Fuploads%2F2014%2F09%2Fmake-svg-sprites-450x219.png)