一文で言うと
SVG最適化とは、最終的な画像の見た目を変えることなく、SVGファイルの元となるXMLコードをアルゴリズムによって書き換え、可能な限り小さく効率的にするプロセスのことです。
解決される問題
昔々、ウェブ黎明期のピクセル王国には、主に2種類の画像がありました。単純なアニメーションやロゴ用のGIFと、写真用のJPEGです。これらはラスター画像、つまりピクセルの集まりでした。拡大すれば、ブロックノイズだらけのガビガビな画像になってしまいます。
そこに登場したのがSVG、スケーラブル・ベクター・グラフィックスです。これはW3Cの標準規格で、線、曲線、図形、色といったものを数学的に記述して画像を表します。そのすべてがXMLテキストファイルに書かれているんです。つまり、SVGはビルボードのサイズまで拡大しても、完璧にクッキリしたままでいられるってこと。ウェブ上のロゴやアイコン、イラストにとって、これは革命でした。
でも、ここに落とし穴があります。これらのSVGを作成するソフトウェア（Adobe Illustrator、Inkscape、Figmaなど）は、ウェブのパフォーマンスのために作られているわけではありません。デザイナーのために作られているのです。これらのツールは、エディタに関するメタデータ、隠しレイヤー、コメント、たくさんの空白を含む人間が読みやすいフォーマット、そして過剰に複雑な図形記述など、大量の余分な情報をSVGファイルに詰め込みます。シンプルなアイコンのSVGが、ほんの2KBで済むはずなのに20KBにもなってしまう、なんてことがあるのです。
この「コードの肥大化」こそが問題。何十ものアイコンやイラストがあるウェブサイトでは、その余分な重みが積み重なり、ページの読み込みを遅くし、回線が遅いユーザーをイライラさせます。SVG最適化は、デジタルのお掃除屋さんとして機能し、すべてのガラクタを掃き出し、スリムでキレキレの、ウェブ向けのグラフィックを残してくれるというわけです。
ボンネットの中身はどうなってるか
最適化を理解するためには、まず基本的な真実を受け入れる必要があります。SVGは本当は絵ではない、ということです。それは絵を記述するテキストドキュメントなのです。そして、どんなコードもそうであるように、それは汚くもなれば、クリーンにもなり得ます。
結局のところ、ただのXML
SVGファイルの中核は、単なるXML（eXtensible Markup Language）です。テキストエディタで開いて読むことができます。シンプルな赤い円は、こんな風に見えるかもしれません：
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<!-- このコメントは削除できる -->
<metadata>
<rdf:RDF>
<!-- ここにエディタのメタデータがたくさん入る -->
</rdf:RDF>
</metadata>
<g id="layer1">
<circle
style="fill:#ff0000;stroke-width:0"
id="path31"
cx="50"
cy="50"
r="45" />
</g>
</svg>
最適化ツールは、このコードを画像としてではなく、リファクタリングされるべきプログラムとして見ます。
不要なものを取り除く
最初で最も簡単なステップは、画面上の最終的なピクセルに貢献しないものをすべて削除することです。
- コメント:
<!-- ... -->は人間のためのもので、ブラウザのためではありません。ポイっ。 - メタデータ:
<metadata>ブロックは、作成アプリケーション、作者、日付などの情報でいっぱいです。レンダリングには無用。ポイっ。 - エディタ固有のデータ: 多くのエディタは、独自のネームスペースを持つ属性や要素（例：
inkscape:groupmodeやsodipodi:docname）を追加します。ブラウザはこれらを無視します。ポイっ。 - DoctypeとXML宣言:
<?xml ... ?>宣言は、SVGがウェブで使われる場合、通常は不要です。<doctype>はほとんど必要ありません。ポイっ。 - 未使用の定義:
<defs>セクションには、画像で実際には使用されていないグラデーション、パターン、またはフィルターが含まれていることがあります。最適化ツールはこれらを発見し、削除することができます。
構造と属性の最小化（ミニファイ）
次に、最適化ツールは構造自体を整理します。
- 空白の削除: 人間がコードを読みやすくするための改行やインデントはすべて、ブラウザにとっては無駄なバイトです。これらはすべて取り除かれます。
- グループの折りたたみ: 空のグループ（
<g></g>）は無意味です。特別な属性がないグループ（<g><circle.../></g>）は、多くの場合、円を外に出してグループを削除することでフラット化できます。 - スタイルの変換:
style="fill:#ff0000; stroke:none"は、個別の属性fill="red" stroke="none"に変換できます。こちらのほうが短い場合があります。最適化ツールはどちらがよりコンパクトかを確認します。また、#ff0000がキーワードのredと同じで、そちらが1バイト短いことにも気づくかもしれません。
これらのステップの後、私たちの円のSVGは次のようになります：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle fill="red" cx="50" cy="50" r="45"/></svg>
見てください！これだけでもうずっと小さくなりましたが、描画される画像はまったく同じです。
パス単純化の魔法
ここで最も印象的な節約が起こります。SVGの複雑な形状のほとんどは、<path>要素によって定義されます。これには、移動（M）、線（L）、曲線（C）、閉じる（Z）コマンドのミニ言語を含むd属性があります。
デザインツールからのパスは、こんな感じかもしれません：
d="M 10.12345,20.54321 C 30.98765,40.11111 60.55555,40.22222 80.43210,20.32109"
最適化ツールはここでいくつかのトリックを使います：
- 精度の削減: 100x100の画像内の座標に、小数点以下5桁も本当に必要でしょうか？いいえ。最適化ツールはこれらの数値を妥当な精度（例：小数点以下2桁）に丸め、大量のバイトを節約できます。
10.12345は10.12になります。 - 相対コマンド: パスには絶対（大文字の
L）と相対（小文字のl）の2種類があります。相対コマンドは、多くの場合、より小さな数値となり、結果としてパス文字列が短くなります。 - シェイプへの変換: 最適化ツールは
<path>を分析し、「おや、このパスは完璧な長方形を描いているじゃないか！」と気づくことがあります。そして、その長い<path>文字列を、はるかに短い<rect>要素に変換します。 - パスのフィッティング: （Ramer-Douglas-Peuckerのような）賢いアルゴリズムを使用して、最適化ツールはパス内の一連の短い直線セグメントを分析し、それらを視覚的には区別がつかない単一の滑らかな曲線に置き換えることができます。しかし、記述に使う文字数ははるかに少なくなります。
ファイルからデータURIへ
最後に、SVGができる限り小さくなったら、ファイルとして保存したくないかもしれません。最適化ツールは、最小化されたSVGテキスト全体をデータURIと呼ばれる単一の文字列に変換できます。これにより、HTML（<img src="data:image/svg+xml,...">）やCSS（background-image: url("data:image/svg+xml,...");）に画像を直接埋め込むことができます。これでネットワークリクエストを丸々1つ節約できるので、サイトがさらに速く感じられるようになります。
実世界での話
肥大化したロゴのケース
あるスタートアップが大規模なリブランディングを終え、デザイン会社からイケてる新しいロゴを受け取りました。開発者はそのlogo.svgファイルをホームページに設置しました。見た目は最高。しかし、ファイルサイズは45KB。たった1つのロゴのために！ファイルを開いてみると、コメント、隠されたガイドラインレイヤー、そして小数点以下8桁のパス座標でいっぱいでした。最適化ツールにかけると、わずか4KBにまで縮小——90%の削減です。ホームページのLargest Contentful Paint (LCP) スコアは、特にモバイルネットワークのユーザーにとって、即座に改善されました。
教訓： デザインツールからのアセットは出発点であって、ウェブ向けの完成品ではありません。常に最適化できるものだと考えましょう。
カクつくアニメーションアイコン
あるフロントエンド開発者が、ホバーでアニメーションするインタラクティブなアイコンセットを構築していました。そのうちの一つ、複雑な歯車のアイコンが、回転アニメーション中にページをカクつかせていました。ブラウザの開発者ツールを使うと、ブラウザが常に「再描画」に苦労していることがわかりました。SVGのソースを調べると、歯車が何十もの別々の<path>要素で構成され、それらすべてが複数の<g>グループタグの中にネストされているのを発見しました。最適化ツールはグループを折りたたみ、さらに重要なことに、すべての別々のパスを1つの複合パスに結合しました。結果として得られたDOM要素ははるかにシンプルになりました。ブラウザの仕事が大幅に減り、アニメーションはシルクのように滑らかになりました。
教訓： SVGの最適化はファイルサイズだけの話ではありません。レンダリングパフォーマンスも重要なのです。よりシンプルなSVG構造は、ブラウザのレンダリングエンジンにとって仕事が少ないことを意味します。
チャートライブラリの大失敗
あるデータ分析チームが、ダッシュボード用の複雑なチャートやグラフを生成するために、強力なJavaScriptライブラリを使用していました。問題は？各チャートはSVGであり、ライブラリはそれらをユーザーのブラウザ上で動的に生成していました。5つのチャートがあるダッシュボードは、ライブラリをダウンロードした後、1MB近くの最適化されていないSVGコードを生成し、ブラウザが数秒間フリーズしていました。彼らの解決策は、チャートの生成をサーバーサイドに移動することでした。Node.jsでSVGコードを生成し、その結果の文字列をSVG最適化ライブラリに通し、そして小さく事前に最適化されたSVGをクライアントに送信する小さなサービスを作成しました。ダッシュボードの読み込み時間は75%も短縮されました。
教訓： 最適化は、単発のアセットに対する手動ステップだけでなく、自動化されたビルドプロセスやバックエンドのワークフローの一部にすることができますし、そうすべきです。
よくある間違いと落とし穴
- IDを削除してインタラクティブ性を破壊する: 多くの最適化ツールは、バイトを節約するために要素のIDを積極的に削除します。もしそれらのIDをターゲットにするJavaScriptやCSS（例:
document.getElementById('my-button-shape')）がある場合、コードは壊れてしまいます。必要なIDを保持するように最適化ツールを設定してください。 - 過度にアグレッシブなパスの単純化: 「精度」の設定を低くしすぎると、画像が目に見えて歪んでしまうことがあります。曲線がギザギザの線になったり、細かいディテールが消えたりするかもしれません。品質が犠牲になっていないことを確認するために、常にオリジナルと最適化後のバージョンを視覚的に比較してください。
- アクセシビリティ機能を削ぎ落とす: SVG内の
<title>と<desc>タグは、スクリーンリーダーのための代替テキストを提供します。単純な最適化ツールはこれらを「不要」として削除してしまうかもしれません。優れたツールには、アクセシビリティを維持するためにこれらのタグを保持するオプションがあります。 - スタイルシート情報を失う: SVGはHTMLと同様に
<style>ブロックを持つことができます。SVGのさまざまな部分をクラスを使ってスタイリングしている場合、最適化ツールがそのスタイルブロックを削除したり、依存しているクラス名を破壊したりしないように注意してください。
なぜ気にかけるべきなのか
Core Web Vitalsとモバイルファーストインデックスの時代において、サイトのパフォーマンスは贅沢品ではなく、必須要件です。1キロバイトたりとも無駄にはできません。現代のウェブでは、ロゴ、アイコン、ヒーローイラスト、データビジュアライゼーションなど、SVGは至る所にあります。これらは、手軽に得られるパフォーマンス改善の成果（low-hanging fruit）の最大の源泉の一つなのです。
ユーザーエクスペリエンスを気にかけるウェブ開発者やデザイナーにとって、SVGを最適化する方法を知ることは基本的なスキルです。これは、サイトの体感速度に測定可能な影響を与えることができる、手早く簡単な勝利です。複雑なJavaScriptバンドルをリファクタリングするのに1週間を費やす前に、5分間、画像の最適化に時間を費やしてみてください。その結果に驚くかもしれませんよ。
さらに深く知る
- MDN Web Docs: SVG Tutorial - SVGで何ができるかを学ぶための決定的な出発点。
- W3C Scalable Vector Graphics (SVG) 2 Specification - 公式の技術仕様書。内容は濃いですが、これが「正典」です。
- SVG on Wikipedia - フォーマットの歴史、能力、技術的な詳細に関する優れたハイレベルな概要。
- A Practical Guide to SVGs on the web (CSS-Tricks) - プロダクションでSVGを使用するあらゆる側面をカバーする、定番の記事とガイド集。
- SVGO (SVG Optimizer) - 多くの人気最適化ツールの背後にあるエンジン。そのプラグインドキュメントを読むことで、可能なすべての最適化技術について深く理解できます。