SVG Spriteを作成する

Yukimi Sato 15views 更新:2016年11月11日

SVGでアイコンやらイラストやら作成した時に、

  • CSSでスタイルを変更できるようにしたい!
  • でもファイルをベタで読み込むのはちょっと…
  • それに1つのファイルに纏めたい!

という場合にどうぞ!
ちなみに、サイズがバラバラでも全く問題ないです。

参考:IllustratorとIcoMoonでSVGスプライトのラクラク設定!

SVGファイルを作成

まず、IllustratorでSVGファイルを作成します。
纏めたいアイコンの数だけ適当なサイズでアートボードを作成し、それぞれにアイコンを配置。
アートボードとアイコンのサイズが合っていない時は、アイコンを選択した状態で、オブジェクトアートボード選択オブジェクトに合わせるでOK。
ファイル書き出し書き出し書式をクリックし、下記設定で任意の場所に保存します。

  • ファイル形式:svg
  • アートボードごとに作成:チェック入れる(すべてを選択)

軽量化

次に作成したSVGファイルを下記サイトで軽量化させます。
作成したSVGをアップし、軽量化させて先程作成したSVGファイルに上書きします。
https://jakearchibald.github.io/svgomg/

今後もSVGを作成した時は必ずこのサイトで変換させた方がいいです。結構軽くなる…!

合体

次にバラバラのSVGファイルを下記サイトで1つのファイルに纏めます。
https://icomoon.io/app/#/select

左上の「Import icons」からSVGファイルを選択し、全て選択してアクティブにします。
(Untitle Setの右端にあるハンバーガーメニューから「Select All」でも可)
左下の「Generate SVG & more」をクリックして作成すると、ボタンが「Download」に変わるのでクリックしてダウンロード。

読み込み

<body>直下に作成された「symbol-defs.svg」の中身をペターっとコピペ。
<symbol>のIDが読み込みのキーとなります。
アイコンを表示したいところに下記書式で記述。

<svg class="任意のクラス">
<use xlink:href="#symbolのID"/>
</svg>

CSSで制御

CSSで色やサイズを変えたい場合、下記のように記述すればできます。

.任意のクラス{
    width: 500px;
    height: 287px;
    fill: red;
}

SVGの色指定はfillで行います。

パーツ毎に色変える

パーツごとにCSSで色を変更することもできます。
<body>直下に記述した時に<symbol>内の<path>にそれぞれクラスを付与。
CSSでは下記のように記述することで変更できます。

.任意のクラス{

    .pathのクラスその1{
      fill: green;
    }
    .pathのクラスその2{
      fill: blue;
    }
}

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません