SVG最適化ガイド：品質を損なわずにファイルサイズを30〜70%削減する方法

InkscapeやAdobe IllustratorからSVGをエクスポートした後、テキストエディタで開いたことはありますか？シンプルなアイコンのはずが、膨大なメタデータ、エディタの設定、ライセンス情報、ブラウザが決して使わないXML名前空間でいっぱいになっています。実際のパスデータは2KB程度なのに、エディタメタデータのせいでファイル全体が15KBになっていることもあります。

1つのアイコンだけなら大した差ではありませんが、ページに数十個のアイコンがあると話が変わります。SVGの最適化は、一度やっておけばずっと効果が続く作業です。このガイドでは、SVGファイルの中に実際に何があるのか、何を安全に削除できるか、何を触ってはいけないか、そしてToolBox HubsのSVG Optimizerツールの使い方を解説します。

肥大化したSVGの中身

Inkscapeで単純な図形をエクスポートすると、こんな出力になります：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   width="100" height="100" viewBox="0 0 100 100">
  <sodipodi:namedview
     inkscape:zoom="5.6"
     inkscape:cx="50"
     inkscape:cy="50" />
  <metadata id="metadata5">
    <rdf:RDF>
      <cc:Work rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1">
    <circle cx="50" cy="50" r="40" style="fill:#4a90d9" />
  </g>
</svg>

このファイル全体が、青い円を一つ描くためのものです。意味のあるコンテンツは<circle>要素の一行だけです。残りはすべてエディタの状態がファイルに保存されたものです。ブラウザはレンダリング時にこれらをすべて無視しますが、パースとダウンロードのコストは発生します。

安全に削除できるもの

XML宣言とコメント

ファイル先頭の<?xml version="1.0" encoding="UTF-8"?>は、HTMLに埋め込んだりimgタグで使ったりするSVGには不要です。モダンブラウザにはこれなしでSVGを処理できます。

のようなコメントも、バイトを無駄に消費するだけです。削除しましょう。

エディタ名前空間の宣言

これらの名前空間は、それぞれのエディタ内部でのみ意味を持ちます：

xmlns:inkscapeとxmlns:sodipodi — Inkscape専用
xmlns:dc、xmlns:cc、xmlns:rdf — Dublin CoreとCreative Commonsメタデータ

名前空間の宣言を削除すると、それを使用する属性と要素もすべて削除できます。

`sodipodi:namedview`要素

これは純粋にInkscapeのエディタ状態です — ズームレベル、パン位置、グリッド設定、ルーラー単位。SVGコンテンツと比較してサイズが大きく、レンダリングには全く貢献しません。

RDFメタデータブロック

<metadata>要素内の<rdf:RDF>には、dc:title、dc:description、dc:creator、ライセンス情報などDublin Coreメタデータが格納されています。著作権管理が必要でなければ安全に削除できます。

Inkscape固有の属性

Inkscapeがよく追加する属性：

inkscape:label="Layer 1" — エディタのレイヤー名
inkscape:groupmode="layer" — グループ動作のメタデータ
inkscape:connector-curvature="0" — コネクタルーティングのヒント
sodipodi:nodetypes="cccc" — エディタ用のノードタイプヒント

これらはいずれもレンダリングに影響しません。

不必要な小数精度

M 49.999998 50.000001のようなパスデータは、ほとんどの場合M 50 50に丸めても視覚的な違いはありません。

削除してはいけないもの

これが問題になりやすいポイントです。明確に整理します。

CSSやJavaScriptが参照するID

スタイルシートに.icon #arrow-head { fill: red; }があったり、JavaScriptでdocument.getElementById("tooltip-area")を呼び出したりしていれば、そのIDは必須です。削除するとSVGはレンダリングされますが、スタイルやインタラクションが適用されなくなります。

最適化前に、SVGのIDがコードベースの他の場所で参照されていないか確認してください。

SVG内部要素が参照するID

SVG自体がIDを内部参照します：

<clipPath id="myClip"> → clip-path="url(#myClip)"
<linearGradient id="grad1"> → fill="url(#grad1)"
<mask id="mask0"> → mask="url(#mask0)"
<filter id="blur"> → filter="url(#blur)"

これらのIDを削除または変更すると、参照している図形がスタイルなしでレンダリングされるか、まったく表示されなくなります。

アニメーションのターゲット

SMILアニメーション（<animate>、<animateTransform>）とCSSアニメーションはどちらも要素IDをターゲットにします。SVGにアニメーションがある場合は、最適化後に必ずテストしてください。

アクセシビリティのための`title`と`desc`

インラインSVGでスクリーンリーダーのサポートが必要な場合、<title>と<desc>要素は重要です。アクセシビリティ要件を理解した上で扱ってください。

スプライトシートのシンボルID

SVGスプライトシートはこのようなパターンを使います：

<svg style="display:none">
  <symbol id="icon-home" viewBox="0 0 24 24">...</symbol>
  <symbol id="icon-search" viewBox="0 0 24 24">...</symbol>
</svg>

そして別の場所で：<use href="#icon-home" />。最適化中にシンボルIDが削除または短縮されると、HTML内のすべてのuse参照が壊れます。スプライトシートを最適化する際はID短縮機能を無効にしてください。

SVG Optimizerツールの使い方：ステップバイステップ

ツールを開く — toolboxhubs.com/tools/svg-optimizerにアクセス
SVGを貼り付けるかアップロード — ファイルをドラッグするか、SVGマークアップを直接貼り付けます。ツールはブラウザ内で完全に動作するため、ファイルはサーバーに送信されません。
設定を確認 — デフォルト設定ではエディタメタデータ、コメント、XML宣言、空の要素が削除され、数値が丸められます。外部から参照されているIDがないと確信できない限り、ID短縮はオフのままにしてください。
最適化をクリック — ツールがSVGを処理し、最適化前後のファイルサイズと削減率を表示します。
ビジュアル確認 — 元のSVGと最適化されたSVGのプレビューを並べて表示します。同じに見えることを確認してください。
結果をコピーまたはダウンロード

一般的なアイコンの場合、全体で約30秒かかります。

実際のファイルサイズ削減例

実際に確認した結果をいくつか紹介します：

Inkscapeのシンプルなアイコン: 8.2KB → 1.4KB（83%削減）。ファイルのほぼすべてがエディタメタデータで、実際のパスは非常に小さかったです。

Illustratorの20レイヤーイラスト: 94KB → 31KB（67%削減）。IllustratorはXML名前空間の宣言とレイヤーメタデータを大量に追加します。

手書きSVG: 3.1KB → 2.9KB（6%削減）。手書きや自動生成されたSVGはすでにコンパクトです。最適化ツールが主にすることは小数点の丸めです。

デザインエージェンシーのロゴ: 22KB → 9KB（59%削減）。典型的なケース — デザインチームが「Web用」でエクスポートしたが最適化はしていない。

パターンはかなり一貫しています：GUIエディタの関与が多いほど、削除できるものも多くなります。

SVGO CLIとの比較

SVGO（SVG Optimizer）はSVG最適化のスタンダードなコマンドラインツールです。ブラウザツールとSVGOは同様の作業を行っています — エディタメタデータの削除、コメントの削除、数値の丸め、冗長な要素の結合。

SVGO CLIが優れている点：

自動化：webpack/vite/rollupビルドパイプラインへの統合。保存時の自動最適化。フォルダ全体のバッチ処理。
設定可能性：svgo.config.jsでプラグインの有効化/無効化、精度設定、特定の属性の保持。
より多くのプラグイン：属性の並べ替え、図形をパスに変換、スタイルのインライン化など数十のプラグイン。
再現性：同じ設定、同じ出力、常に。

ブラウザツールが優れている点：

設定不要：Node.js、npm、設定ファイル不要。
ビジュアルプレビュー：結果を確認してから反映するかどうかを決断。
素早い単発作業：ブラウザを開いて貼り付けてコピーするだけ。
非開発者でも使える：デザイナーがターミナルなしで使えます。

個人的なワークフロー：プロジェクトのアイコンにはビルドパイプラインでSVGOを使い、デザイナーからSVGが送られてきたときに素早く確認したい場合はブラウザツールを使っています。

よくある最適化ミス

視覚的な結果を確認しない。積極的な丸めは、複雑なパスを変形させることがあります。必ずプレビューを確認してください — 特にフォントアウトラインや技術的な図解のような非常に精密なSVGの場合。

バックアップなしで上書き。最適化ツールは元のファイルを保持しません。ソースファイル（Inkscape/Illustrator）を保管するか、少なくとも最適化前のSVGをバージョン管理に保存しておいてください。

使われていないと思ったIDを削除。まず検索してください。grep -r "my-id" ./srcは2秒でできて、2時間のデバッグを防ぐことができます。