SVGの最適化
生成されたSVGを最適化する理由、安全に整理できる要素、公開前にSVGを確認する方法を説明します。
要点
- SVG最適化は、不要なマークアップ、メタデータ、空白を除去し、必要に応じて重複した構造を整理します。
- 最適化は変換や書き出しの後、実際のサービスへ公開する前に行います。
- 目的はサイズだけを減らすことではなく、正しく描画され、確認と保守ができるSVGを作ることです。
- カテゴリー
- 最適化
- 難易度
- 初級
- 読了時間
- 約6分
- 関連ツール
- SVG Optimizer
- 適している用途
- 生成されたSVG, デザインツールからのSVG, Web画像素材
- 適さない用途
- 未確認の変更, 元データの置き換え, 無条件の圧縮
はじめに
SVGはテキストベースの形式です。変換ツールやデザインツールから書き出したファイルには、不要なメタデータ、過剰な小数精度、重複した属性、空白、使われていない定義が含まれることがあります。
最適化は、それらを整理して公開用のファイルを作る工程です。ただし変更が安全かどうかは、SVGの使い方によって異なります。見た目だけでなく、ID、CSS、アニメーション、アクセシビリティも確認します。
SVG最適化が変更するもの
| 対象 | 期待できる効果 | 注意点 |
|---|---|---|
| コメント、空白、メタデータ | ファイルサイズを減らす | 必要なライセンス情報は残す |
| 小数精度 | 座標データを短くする | 精度を下げすぎると形が変わる |
| 重複属性 | マークアップを整理する | CSS継承が変わらないか確認する |
| 未使用の定義 | 不要な要素を除去する | スクリプトや外部参照を確認する |
| ID | 短縮できる場合がある | CSS、ARIA、アニメーション参照を壊さない |
どの最適化が安全ですか？
空白やエディター固有メタデータの除去は比較的安全です。一方、パスの結合、IDの変更、viewBoxの除去、titleやdescの削除は利用方法に影響する可能性があります。
「安全な最適化」は固定の一覧ではありません。SVGを画像ファイルとして表示するのか、Reactコンポーネントとして使うのか、CSSやARIAから参照するのかによって判断が変わります。
実際の最適化例: ロゴSVG
2026年9月25日、ブラウザーから実際にダウンロードした結果を計測しました。Balancedではロゴが 14,349バイトから8,404バイトへ、約41.4%小さくなりました。2個のパスを残しながら命令を短く表現しています。削減率は入力によって異なり、すでにコンパクトなSVGは小さくならない場合があります。
この結果は長辺256ピクセルと768ピクセルの2サイズでSVGKITの描画比較を通過しました。この検査は小さな描画差を許容し、数学的な同一性やすべてのブラウザー・表示サイズでの保持を保証するものではありません。形状の差を検出した場合や検証できない場合は、最適化結果の代わりに元ファイルを提供します。実際のページと小さなアイコンサイズでも確認してください。
2サイズで描画を確認したロゴ最適化
Balancedの結果は41.4%小さくなり、ブラウザーの描画検査を通過しました。両方のファイルを実際の表示サイズでも比較してください。
- 元ファイル
- 14,349 B
- SVG
- 8,404 B
- パス
- 2
計測日: · 設定: Balanced
3つのモードを比較する
| モード | 出力バイト数 | パス | 削減率 | このファイルでの変化 |
|---|---|---|---|---|
| Balanced | 8,404 | 2 | 41.4% | パス命令を圧縮、描画検査を通過 |
| Smallest | 8,253 | 2 | 42.5% | 条件を満たす直線区間をさらに圧縮、描画検査を通過 |
| Editable | 11,716 | 2 | 18.3% | 外側のグループを保持、描画検査を通過 |
Smallestの結果とEditableの結果をダウンロードして、上のBalancedファイルと比較できます。3つともviewBoxを保持します。表はHTTP転送量ではなく、圧縮前のファイルサイズです。Balancedから比較し、グループ構造が重要ならEditableを選んでください。この例ではSmallestがさらに151バイト小さくなりますが、すべてのファイルで同じ差が出るわけではありません。
このロゴだけでは確認できないこと
このファイルにはID、グラデーション、クリップパス、アクセシビリティ用のタイトルがありません。それらの保持を証明するテストではありません。該当するSVGでは、url(#id)とARIA参照が解決されるか、viewBoxが適切か、実際のページでアクセシブルな名前が提供されるかを確認してください。細い線は拡大時だけでなく実際のアイコンサイズでも比較し、問題があれば元ファイルを保ちます。
よくある失敗
視覚確認せずに最適化する
小数精度やパス結合の変更は、細い線や小さな形を変えることがあります。処理前後を比較します。
アクセシビリティ情報を無条件に削除する
意味のある画像のtitle、desc、ARIA参照は必要な場合があります。利用文脈を確認します。
最適化後のSVGをデザイン原本にする
公開用の最適化ファイルは編集しやすさを失うことがあります。元データは別に保管します。
ファイルサイズだけを確認する
小さくなっても見た目、参照、アニメーションが壊れていれば成功ではありません。
ベストプラクティス
- 元のSVGを別ファイルとして保管します。
- 使用中のID、CSS、ARIA、アニメーションを確認します。
- まず保守的な設定で最適化します。
- 小さい表示と大きい表示で処理前後を比較します。
- ファイルサイズ、要素数、パス数を一緒に確認します。
- 実際のページまたはコンポーネントで動作確認します。
実務での手順
- 1元のSVGを保管し、利用方法を確認します。
- 2ID、CSS、ARIA、アニメーションの参照を洗い出します。
- 3保守的な設定で最適化します。
- 4サイズと構造の変化を記録します。
- 5複数の表示サイズで見た目を比較します。
- 6実際の製品環境で確認したファイルだけを公開します。
FAQ
SVG最適化は可逆ですか？
常に可逆とは限りません。メタデータや精度、編集情報が失われる場合があるため、元ファイルを保管してください。
すべてのSVGを最適化すべきですか？
公開用SVGは確認する価値がありますが、すでに小さく整理されたファイルでは削減がわずかな場合もあります。
最適化でSVGが壊れることはありますか？
あります。ID参照、CSS、viewBox、精度、アニメーションが変更されると表示や動作が変わる可能性があります。
最適化はパフォーマンスを改善しますか？
転送量と解析量を減らせる場合があります。ただし実際の効果はファイルサイズ、構造、再利用、描画方法によって異なります。
SVGを公開用に整理しますか？
元ファイルを保管し、保守的な設定から最適化を始めてください。
SVG Optimizerを開く