SVG最適化ツール
SVGを最適化し、不要な情報を自動で整理することで、表示を保ったままファイルサイズを小さくします。
すべての処理はブラウザ内で完結するため、データが外部に送信されることはありません。
ここにファイルをドロップ または、ここをクリックして選択してください
- 安全
- お使いの端末上で処理されるため、入出力情報はどこにも送信されません。
解説
SVGの構造を解析し、描画結果を損なわない範囲で不要な記述を整理します。スタイルの展開やサイズ指定の最適化、属性の削減、数値およびパスデータの簡略化を行い、視覚的な品質を維持したままデータ量を効果的に削減します。
最適化で行うこと
| スタイル | <style>内のCSSを可能な範囲で各要素のstyle属性へ展開します。展開後、さらにfillやstrokeなどのプレゼンテーション属性へ変換し、中身が空になり不要となった<style>要素は削除します。 |
|---|---|
| サイズ | ルートの<svg>要素から、style内のwidth / height宣言および属性としてのwidth / heightを削除します。レスポンシブ表示に必要なviewBoxは保持されます。 |
| 属性 | FigmaやAdobe XD、Illustratorなどのデザインツールが付与する不要な属性（data-nameなど）を削除します。idやclassは、参照されていない場合や、要素の統合・変換（例：<line>から<path>へ）に伴い不要となった場合に削除されることがあります。 |
| 参照 | filter、clip-path、maskなどの参照系属性をチェックし、参照先が存在しない場合は属性を削除します。見た目に影響を与えるため、有効な参照先がある場合はそのまま保持されます。 |
| 数値・パス | 数値の丸め精度（floatPrecision）は、複数の候補から描画結果を比較し、見た目の差異を抑えつつ最も軽量な設定を自動的に採用します。あわせて、<path>のd属性などのパスデータを簡略化し、不要な空白や冗長な記述を削減。さらにmultipassを適用して最適化を繰り返すことで、徹底した軽量化を図ります。 |
| 互換性 | 表示崩れを防ぐため、viewBoxは保持されます。また、<text>要素が含まれる場合は、空白の扱いを制御するxml:spaceを維持します（<text>要素が無いSVGでは削除される場合があります）。アニメーションが含まれるSVGでは、動作が崩れやすい一部の最適化を抑制して安全側に倒します。インライン化が困難な複雑なCSSについても、元の描画結果を優先してそのまま保持される場合があります。 |
注意点
SVGの構造や記述内容によって、最適化によるファイルサイズの削減率や最終的な出力結果は異なります。複雑なCSSセレクタやメディアクエリなど、自動での展開（インライン化）が困難なスタイルについては、描画を優先してそのまま保持される場合があります。
要素の統合や変換（例：<line>から<path>への変換）が行われる際、元の要素に付与されていたidやclassは、構造の変化に伴い不要と判断され削除されることがあります。
filter、clip-path、maskなどの参照系属性は、参照先が存在しない場合（リンク切れのurl(#...)参照など）に、データの整合性を保つため自動的に削除されます。
アニメーション（CSSアニメーションや<animate>タグなど）を含むSVGも最適化可能ですが、動作が崩れやすい一部の最適化は抑制されます。SVG内にスクリプト（JS）が含まれる場合は、最適化によって意図しない動作になる可能性があります。