SVG最適化 — SVGコードを軽量化

SVGを最適化する手順

SVGを読み込む。左の入力欄にコードを貼り付けるか、「.svgファイルを読み込み」から端末のファイルを開きます。
「最適化」を押す。整理されたコードが右の欄に表示され、どれだけ軽くなったかも表示されます。
結果を確認する。最適化後のSVGは、表示すると見た目は元とまったく同じで、裏側のコードだけが無駄のない状態になっています。
コピーまたはダウンロードする。「コピー」でHTMLやCSSにそのまま貼り付けたり、「ダウンロード」でファイルとして保存したりできます。

このツールでできること

Illustrator・Figma・SketchなどのデザインツールからSVGを書き出すと、エディタのメタデータ、コメント、非表示レイヤー、たっぷりの空白といった、ブラウザには不要なデータが一緒に付いてきます。この最適化ツールはそうした余分な情報を取り除き、まったく同じ絵を描く、より小さなファイルにします。

処理はすべてブラウザ内で完結します。ファイルやコードがサーバーに送信されることは一切ないため、手元に保たれたまま、その場ですぐに（オフラインでも）最適化できます。

SVGのサイズが大切な理由

SVGはJPEGやPNGのようなピクセルの集まりではなく、図形を記述したXMLコードです。だからどれだけ拡大しても輪郭が鮮明なままで、ロゴやアイコンの定番になっています。その一方で、見た目に影響しないテキストをいくらでも抱え込めてしまうため、書き出したままのSVGは必要な容量の2〜3倍になっていることも珍しくありません。

この余分な重さがとくに効いてくるのが、SVGをHTMLやCSSに直接埋め込んでいる場合です。ページを読み込むたびに毎回その分が乗ってきます。削っておけば表示も速くなり、マークアップも読みやすくなります。なお写真にはSVGは向いていません。写真はJPEG、より小さくしたいならWebPを使ってください。

よくある質問

最適化すると見た目は変わりますか？

変わらないはずです。見た目に影響しないデータだけを取り除くためです。ただし複雑なイラストの場合は、元のファイルを差し替える前に必ず表示を確認してください。

書き出したSVGが大きいのはなぜ？

デザインツールが、メタデータ・コメント・レイヤー名・整形用の空白などを埋め込むためです。いずれも画像を表示するには不要なので、安全に削除できます。

最適化した後もSVGを編集できますか？

できます。SVGとしては有効なままです。ただしコードは読みにくくなり、レイヤー名が失われることもあります。編集用には元のファイルを残し、Web用に最適化版を使うのがおすすめです。

コードはサーバーに送信されますか？

いいえ。処理はすべてお使いのブラウザ内で行われるため、ファイルやコードが端末から外に出ることはありません。