データ

SVG 最適化

Figma や Illustrator、Sketch から書き出した SVG はそれ自体は正しい XML ですが、ブラウザーが描画しないものが詰め込まれています。エディターのメタデータ、ジェネレーターのコメント、パス 1 本だけを包むグループ、小数点以下 5 桁まで持った座標、長い書き方の色などです。このツールは貼り付け一回でそれをすべて取り除きます。マークアップを貼り込むと効果が等価で最小サイズの SVG が返り、元・最適化後・gzip の 3 つのサイズを並べて表示し、最適化前後の図形を並べてプレビューできるので、形が一切変わっていないことを確認できます。ビルドパイプラインが使う svgo エンジンそのものがブラウザー内で完結して動くため、貼り付けた内容がタブの外に出ることはありません。

  • ビルドパイプラインが使うのと同じ svgo エンジンで、SVG をツリーに解析してから数十の安全な変換を適用します。テキストを雑に切るのではありません
  • 元・最適化後・gzip の 3 つのサイズを並べて表示するので、生のバイト数ではなくサーバーが実際に送る量で結果を判断できます
  • 元の SVG と最適化後の SVG を市松模様の上に並べて描画するので、最適化がアートワークを壊していないことが一目で分かります
  • すべてブラウザー内で動くため、貼り付けた SVG（未公開のロゴやアイコンを含む）は端末に留まり、タブを閉じれば消えます
工具/SVG 最適化
523 B
現在の SVG523 B
削減 0%
最適化エンジンを読み込み中
8%
svgo エンジンは一度だけダウンロードされ、この訪問の間はキャッシュされます。
オプション

概要

SVG 最適化ツールが使う価値を持つのは、出力を信頼でき、効果が見えるときだけです。このツールはその両方を軸にしています。出荷できる正確な圧縮と、それが安全だったと示す数値とプレビューです。

  1. 01

    ツリーベースの最適化

    何かを変える前に SVG を本物の要素ツリーに解析するので、メタデータや空グループ、冗長な属性が消え、描画は同一のまま保たれます。グラデーションや入れ子の transform で壊れる、もろい置換処理はありません。

  2. 02

    数十の安全な変換

    エディターの残骸や XML 宣言、ジェネレーターのコメントが削除され、色は短縮され、既定値の属性は落とされ、パスデータはよりコンパクトな形に書き換えられます。各変換は描画結果を変えないように選ばれています。

  3. 03

    調整できる精度コントロール

    小数点以下 5 桁で書き出された座標はまず不要です。切り捨ててパスデータを縮め、並列プレビューを見ながら細部がぼやけ始めた瞬間に止めましょう。

  4. 04

    レスポンシブ対応の出力

    width と height 属性を任意で外し、SVG が入るボックスのサイズを継承するようにできます。伸縮が必要なアイコンやインラインの図版でよく選ばれる設定です。

  5. 05

    信頼できるサイズ内訳

    元・最適化後・gzip のサイズが編集に合わせて更新され、隣に正確な削減率が出ます。回線を実際に流れる量に合うのは gzip の数値です。

  6. 06

    出荷前に目で確認

    出力を「プレビュー」に切り替えると、元と最適化後の SVG が市松模様の上に一緒に描画され、壊れたクリップパスや落ちた塗りが結果をコピーする前に明白になります。

使い方

数ステップで、肥大したエディターの書き出しをスリムで本番対応の SVG に。削減とプレビューを常に目の前に置いたままで。

  1. 01

    SVG を入力パネルに貼り付けるか、「アップロード」でディスクから .svg ファイルを直接読み込みます。

  2. 02

    オプションを選びます。最小の結果には「マルチパス」を有効のままにし、プレビューを見ながら「精度」を下げ、アイコンをコンテナーに合わせたいときは「幅・高さを削除」をオンに。

  3. 03

    出力を「プレビュー」に切り替え、最適化後の SVG が元とまったく同じに描画されることを確認してから、サイズ内訳で効果を読み取ります。

  4. 04

    最適化後の SVG をコピーするか .svg ファイルとしてダウンロードし、マークアップやスプライトシート、コンポーネントに組み込みます。

詳細

出力を安心して出荷でき、すぐに信頼できるようにする細部です。

  • 標準的な SVG 最適化ツール svgo をベースにし、テキスト置換ではなく解析済みツリー上で動作し、ビルドツールが既定とするのと同じプリセットを使います。
  • gzip サイズはブラウザー内蔵の圧縮で測るので、実際のサーバーが送る量を反映します。
  • 最適化は編集に合わせて動き、ボタンを押す必要はなく、オプションを変えてから新しいサイズとプレビューが出るまで遅延がありません。
  • 解析エラーはメッセージとともにその場に表示され、壊れた出力や空の出力を黙って生むことはありません。
  • アップロードもログ記録もありません。貼り付けた SVG（未公開のブランド資産を含む）はブラウザーに留まり、タブを閉じれば消えます。

活用シーン

SVG を本質だけに絞り込むことが効いてくる場面。

  1. インラインのアイコンとロゴ

    HTML やコンポーネントに直接埋め込まれた SVG は、ページ読み込みのたびに送られます。最適化はブラウザーが解析するマークアップとダウンロードするバイトを削り、しかもユーザーが最初に目にする資産に効きます。

  2. アイコンスプライトシート

    数十のアイコンを重ねるスプライトは、無駄なバイトを一つひとつ倍増させます。各シンボルをシートに入れる前に最適化すれば、結合後のファイルをスリムに保てます。

  3. CSS と Data URI

    SVG を背景画像や Data URI として埋め込むと、1 文字ごとが重く、しかも個別に gzip できません。より小さいソースが唯一使えるレバーです。

  4. デザインからコードへの受け渡し

    Figma や Illustrator、Sketch から直接書き出したファイルは残骸が最も多いです。リポジトリに入る前にここを通し、コンポーネントをきれいなマークアップから始めましょう。

関連情報

縮めるのではなく、そもそも SVG を用意したいならSVG パターンジェネレーター で生成できます。そしてアイコンがブラウザーのタブ向けなら、ファビコン生成ツール で必要な各サイズに変換できます。

SVG のバイトはどこに費やされているか

SVG の最適化は gzip 圧縮と同じではなく、難読化でもありません。描画される画像を同一に保ちながら、ブラウザーが必要としないマークアップを取り除きます。何が消え、なぜ安全なのかを見てみましょう。

  1. エディターのメタデータとコメント

    デザインツールはジェネレーターのコメント、XML 宣言、プライベート名前空間、id として残るレイヤー名を埋め込みます。どれも描画画像には届かないので、残すと選んだ本物のコメントを除いてすべて削除されます。

  2. ラッパーグループと空ノード

    書き出しは 1 つの図形を、transform もスタイルも持たない <g> の 1 層あるいは複数層で包むことがよくあります。これらは子要素に畳み込まれ、完全に空のコンテナーや定義はまるごと削除されます。

  3. 過剰に精密な数値

    16.00000 と書かれた座標は 16 と同じ意味で、13.847221 も画面上では小数 2〜3 桁で足りることがほとんどです。パスと座標データの丸めは、アイコンでは単項として最大の削減になることが多いです。

  4. 長い書き方の色と既定値

    #FFFFFF のような 6 桁の 16 進数は #fff やキーワードに縮み、既定値に設定された属性はレンダラーがどのみち前提とするため削除されます。

  5. コンパクトなパスデータ

    パスの d 属性は相対コマンド、区間の結合、区切りの省略で書き換え、まったく同じ曲線をはるかに少ない文字で表現できます。

  6. なぜ gzip が重要な数値なのか

    サーバーは SVG を gzip や brotli で圧縮して送り、それらは繰り返しの空白をすでに畳みます。最適化は依然として有効です。圧縮が扱えないものを取り除き、よりきれいな入力を圧縮器に渡すからです。ただし本当の効果は生のバイトではなく gzip サイズで判断してください。

使い方のヒント

最適化した SVG を小さく、かつ見た目を保つための習慣。

  • 最適化後は必ずプレビューを確認しましょう。特に精度を下げたときは。丸めこそ、攻めた設定が曲線を微妙に歪めたり形をずらしたりする箇所です。
  • 効果は gzip サイズで判断しましょう。それがサーバーが実際に転送する量です。生サイズでの大きな削減も、転送圧縮をかけるとわずかになることがあります。
  • SVG をコンテナーに合わせて伸縮させたいときは幅と高さを削除しますが、固有サイズを固定する必要がある画像（メールや一部の SNS 埋め込みなど）では残します。
  • viewBox は残しましょう。SVG がきれいに伸縮できるのはそれのおかげで、本ツールは既定で残します。数バイトのために外さないでください。
  • 最適化はビルドや受け渡しの一工程として結果をコミットし、編集可能なソースはデザインツールに残しましょう。最適化後のパスデータは手編集向きではありません。

制限事項

このツールがすることと、他の工程に任せること。

  • 単一の SVG ドキュメントを最適化します。スプライトシートの構築、参照ファイルのバンドル、外部画像やフォントのインライン化は行いません。
  • SVG を PNG にラスタライズしたり、形式間で変換したりはしません。ビットマップが必要なときは画像形式変換ツールと組み合わせてください。
  • SVG 内部のスクリプトやインタラクティブ性は保持されますが解析はしません。最適化の対象は描画であって、埋め込まれた JavaScript の挙動ではありません。
  • 解析できない不正なドキュメントは修復せず報告するので、ひどく壊れた入力が中途半端な出力を生むことはありません。

よくある質問

SVG 最適化についてのよくある質問。何が変わるのか、いつ使うのか。

最適化で SVG の見た目は変わりますか？

既定の設定なら変わりません。最適化ツールはブラウザーが描画しないマークアップを取り除き、同じ意味のより短い形に書き換えるだけなので、画像は同一です。唯一注意すべきは「精度」コントロールで、座標を丸めすぎると細部が微妙に歪むことがあります。だからこそ並列プレビューがあります。プレビューを見ながら精度を下げ、何かがぼやける前に止めてください。

最適化と SVG の gzip 圧縮の違いは？

両者は協働します。最適化は SVG マークアップそのものを編集し、圧縮器では不要と判断できないメタデータや空グループ、過剰に精密な数値を取り除きます。次に gzip や brotli が送るものを圧縮し、回線上の繰り返しを畳みます。両方が必要です。まず最適化して最もきれいな入力を作り、次にサーバーに転送用の圧縮を任せます。本当の効果はここに表示される gzip の数値で判断してください。

width と height 属性は削除すべきですか？

SVG の使い方によります。削除して viewBox を残すと、SVG は入るコンテナーに合わせて自由に伸縮します。インラインのアイコンや図版では通常これが望ましいです。画像に固有サイズの固定が必要なとき、たとえば viewBox を無視する一部のメールクライアントや SNS 埋め込みでは残してください。いずれにせよツールは常に viewBox を保持します。

SVG はどれくらい小さくなりますか？

どう書き出されたかで大きく変わります。Figma や Illustrator、Sketch から直接のファイルは余白が最も多く、生サイズで 3 分の 1 から 3 分の 2 を落とすことがよくあります。一方すでに最適化されたアイコンはわずかしか削れないこともあります。gzip がかかると割合は縮みます。圧縮がすでに空白の多くを回収しているからで、これが gzip の数値のほうが正直な理由です。

viewBox は安全ですか？削除すると伸縮が壊れると聞きました。

ここでは安全です。viewBox こそ SVG を解像度非依存にするもので、本ツールは既定で残し、決して外しません。任意で削除できるのは固定の width と height 属性だけで、そうすることは伸縮を損なうどころか改善します。

グラデーションやフィルター、アニメーション付きの SVG も最適化できますか？

できます。グラデーション、フィルター、クリップパス、マスク、SMIL や CSS アニメーションは読み取られ保持されます。最適化ツールは SVG 構造を理解するので、参照される定義は無傷のまま、何かが指している限りその id は残されます。こうした機能に強く依存するファイルでは、必ずプレビューで確認してください。

私の SVG はどこかにアップロードされますか？

いいえ。すべてブラウザー内で動きます。貼り付けた SVG、アップロードしたファイル、そして結果はローカルで処理され、送信も保存もされず、タブを閉じた瞬間に消えます。ですから非公開のロゴや未公開のブランド資産でも安全です。

関連ツール

データと形式のツール群の残りも見ていきましょう。