SVGオプティマイザー
-
Original Size
-
Optimized Size
-
Savings
なぜSVGファイルを最適化するのか？
Illustrator、Figma、Inkscapeからエクスポートされたフスファイルには多くの不要なデータが含まれています — コメント、エディタのメタデータ、冗長な属性、精度の高すぎる小数点、空のコンテナなど。最適化後はファイルサイズが30-70%削減され、読み込みが速くなります。
8つの最適化戦略
各最適化パスを独立して有効/無効にして、何が削除されるかを細かく制御
サイズ削減統計
各最適化後にオリジナルサイズ、最適化後サイズ、節約率を確認
非破壊的な最適化
すべての最適化でSVGのビジュアル外観を維持 — 見えないメタデータのみ削除
3ステップでSVGを最適化する方法
SVGコードを貼り付け
デザインツールまたはファイルからSVGソースコードをコピーして入力フィールドに貼り付け
最適化を選択
適用する最適化オプションにチェックを入れる — またはデフォルトで最大削減
コピーしてデプロイ
最適化済みSVGをコピーして元のファイルと置き換えるか、HTMLに直接埋め込む
SVG最適化のユースケース
アイコンライブラリ
FigmaまたはIllustratorからエクスポートしたアイコンセットをライブラリに組み込む前に最適化
ロゴ
Webサイトヘッダー、ファビコン、ブランドアセット用のSVGロゴをクリーンアップ
アニメーションSVG
アニメーションデータで既に大きくなっているアニメーションSVGのベースサイズを削減
PWAとモバイル
小さいSVGはモバイルデータ消費を削減してLighthouseパフォーマンスを改善
SVG最適化のベストプラクティス
✓ CSSアニメーションでIDを削除する際は注意
SVGがID要素を対象とするCSSまたはJavaScriptアニメーションを使用する場合、アニメーションが壊れないように「IDを削除」のチェックを外してください。
✓ viewBoxを保持して幅/高さを削除
幅/高さ属性を削除してviewBoxのみ維持することでSVGがCSSでレスポンシブにスケーリングできます — レスポンシブデザインのベストアプローチです。
✓ 数値を小数点2桁に丸める
5桁以上の小数点を持つパス座標は視覚的に区別できません。小数点2桁に丸めると視覚的な差なしにファイルが削減されます。
✓ CI/CDでSVGOを自動化
大規模プロジェクトでは自動的にすべてのSVGを最適化するためにビルドパイプラインにSVGOを統合してください。このツールは素早い手動チェックに使用してください。
❓ よくある質問
SVG最適化でどれくらいサイズが削減できますか？
ソースによって通常30〜70%の削減が可能です。IllustratorのSVGが最も削減効果が高いことが多く、FigmaのエクスポートはすでにCleanです。最大の効果はエディタのメタデータ、コメント、小数点精度の削減から得られます。
最適化はSVGの外観を変えますか？
いいえ — このツールのすべての最適化は見えないデータ（コメント、メタデータ、冗長な属性）のみを削除するか、知覚できないほどの精度で数値を丸めます。視覚的な結果はオリジナルと同一です。
なぜ幅と高さの属性を削除するのですか？
ハードコードされた幅/高さ値はSVGがCSSでレスポンシブにスケーリングするのを妨げます。それらを削除してviewBoxのみを維持することで、CSSプロパティを通じてSVGのサイズを完全に制御できます。
このツールとSVGOの違いは何ですか？
SVGOはNode.jsコマンドラインツールでSVG最適化の標準です。このツールはNode.jsをインストールせずに最も一般的な最適化のための便利なブラウザインターフェースを提供します。