SVGスプライト最適化ツール

SVGスプライト最適化ツールについて

このツールは複数のSVGアイコンを受け取り、2つの処理をします。まず各ファイルからXML宣言、コメント、メタデータ、Inkscape・Sodipodi・Sketchの編集用属性を消し、空白を詰め、小数の桁を切り詰めて軽くします。次にその結果を、symbolベースのスプライト1枚か、data URIを入れたCSSクラス群にまとめます。

SVGOのようにパスを計算し直すのではなく、決まったルールでテキストを取り除く方式です。結果は予測しやすい反面、どのルールが何を壊しうるかを知っておくことが大切です。

symbolとuseでスプライトになる仕組み

symbol要素はそれ自体は描画されないテンプレートです。各symbolにidとviewBoxを付けて1つのSVGに集めておけば、ページのどこからでもuse要素のhrefで「#icon-home」のようなidを指して複製を描けます。アイコンごとにHTTPリクエストを送る必要がなく、同じアイコンを何度使ってもパスデータは1回分で済みます。

idはファイル名から作ります。小文字にして英数字以外をハイフンに置き換え、「icon-」を付け、数字で始まる場合はさらに接頭辞を付けます。元にviewBoxがなければwidth・heightから作り、それもなければ0 0 24 24とみなします。useが別ファイル（sprite.svg#id）を指す場合、ブラウザは同一オリジンのファイルしか許さないため、CDNなど別ドメインに置いたスプライトは参照できません。その場合はスプライトをHTML本文にインラインで入れてください。

複数ファイルのidがぶつかる問題

デザインツールから書き出したSVGには、グラデーションやクリップパスに「paint0_linear」「clip0」「a」といったidがよく付いています。こうしたファイルを1つのスプライトにまとめると同じidが何度も現れ、ブラウザは文書内の最初のものだけを参照するため、2つ目のアイコンが1つ目のグラデーションで塗られる不具合が起きます。

このツールはsymbolごとに内部idの前に「icon-home__」のようなsymbolのidとアンダースコア2つを付け、url(#…)、href="#…"、アニメーションのbegin・endの参照も合わせて書き換えます。そのファイル内で定義されていないidへの参照には手を付けません。

消してよいもの、消してはいけないもの

コメント、XML宣言、metadataブロック、編集ソフト専用の属性は描画に影響しないので安全に消せます。一方viewBoxはサイズを変えたときに比率を保つ基準なので消してはいけません。SVGOもviewBoxの削除とtitleの削除を既定設定（preset-default）から外しており、このツールもviewBoxは残します。

titleとdescは削除しません。metadataブロックと違い、スクリーンリーダーがアイコンの名前として読み上げるアクセシビリティ情報だからです。スプライトでも各symbolの中にそのまま残ります。ただしuseで呼び出したアイコンのtitleを読まないブラウザーとスクリーンリーダーの組み合わせもあるので、意味のあるアイコンならHTML側でもaria-labelや非表示テキストで名前を付けておくと安全です。

空白の圧縮はタグ間の空白をすべて取り除きます。図形だけのアイコンには影響しませんが、textやtspanで文字を入れたSVGは単語間のスペースが消えることがあります。文字を含むSVGは結果を目で確認してください。

小数の精度はviewBoxの大きさで選ぶ

精度スライダー（0〜4、既定2）は文書内のすべての小数を丸めます。誤差は座標単位で生じるので、見た目への影響はviewBoxの大きさ次第です。24×24のアイコンで小数第2位なら最大0.005単位、24pxで描けば0.005pxで、まったく見えません。0にすると最大0.5単位の誤差が出て、24pxのアイコンでは線が半ピクセル揺れることがあります。

逆に「0 0 1 1」のようなごく小さな座標系で描かれたSVGは、小数第2位の丸めだけでも形が目に見えて崩れます。プレビューで曲線が角ばって見えたら精度を上げてください。

symbolスプライトとCSSスプライト、どちらを使うか

symbolスプライトはインラインSVGとして描かれるので、fill="currentColor"で作ったアイコンは周囲の文字色に追従し、CSSで色や線幅を変えられます。CSSスプライトはアイコンをbackground-imageのdata URIとして埋め込みますが、この形で読み込まれたSVGは別文書扱いになり、ページのCSSやcurrentColorを受け取りません。色が固定のロゴやイラスト向きです。

data URIはbase64ではなくURLエンコードを使います。base64は元より約3分の1長くなりgzipで縮みにくいのに対し、URLエンコードしたSVGはテキスト構造が残るため転送時の圧縮が効きやすくなります。

例

使い方

1. SVGファイルを複数ドラッグ＆ドロップします。
2. 小数の精度を決め、ファイルごとの削減量を確認します。
3. symbolスプライトかCSSスプライトの結果をコピーまたはダウンロードします。

よくある質問