SVGオプティマイザー（SVGO）

Q: 最適化後にCSSが動かなくなったのはなぜですか？

SVGOは未使用のIDを短縮または削除します。スタイルやスクリプトがそれらを参照している場合は、**ID を保持**を有効にしてください。

Q: viewBoxは削除されますか？

いいえ。SVGO 4の既定のプリセットはviewBoxを保ちます。任意の**width/height を viewBox に置き換える**は、固定サイズのほうを削除して、SVGをレスポンシブにします。

ブラウザ内でSVGOを使ってSVGコードを最適化・最小化。エディタのメタデータ、コメント、冗長なマークアップを削除し、プレビューと削減サイズを表示します。

ここに SVG ファイルをドロップするか、クリックして選択

クリップボードから画像を貼り付けることもできます（Ctrl+V / ⌘V）

SVG コード

複数パス（より小さく）ID を保持（CSS やスクリプトが参照する場合に必要）width/height を viewBox に置き換える（レスポンシブ）出力を整形数値の精度（小数点以下桁数）

SVGO の既定プリセットを使用し、viewBox、タイトル、アクセシビリティ用の説明は保持します。

すべてブラウザ内で実行されます。データがアップロードされることはありません。

SVGオプティマイザーとは？

SVGオプティマイザーは、標準的なSVG最適化ライブラリのSVGOをSVGコードに適用します。エディタのメタデータ、コメント、非表示や空の要素を取り除き、パスデータ、数値、色を短縮し、統合できるものを統合します。最適化されたコード、処理前後のプレビュー、サイズの削減量が得られます。

SVGオプティマイザーの使い方

SVG コードにSVGコードを貼り付けるか、.svg ファイルをドロップ/選択します。
オプションを調整します：複数パス、数値の精度、ID を保持、width/height を viewBox に置き換える、出力を整形。
処理前後のプレビューとサイズのバッジを比較します。
最適化されたSVGをコピーするか、name-min.svg としてダウンロードします。

例

入力

100×100 SVG from an editor with an XML declaration, a comment, <metadata>, empty <defs> and a nested <g> around a rect (474 bytes)

出力

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M10 10h80v80H10z" style="fill:red;stroke:none"/></svg>

SVGオプティマイザーを使うべき場面

Figma、Illustrator、Inkscape、Sketchから書き出したアイコン、ロゴ、イラストを、Webサイトやアプリに載せる前に使います。CSS、JavaScript、他の場所の <use> の参照が要素のIDに依存している場合は、ID を保持をオンにしてください。必ずプレビューを確認してください。スクリプトや外部参照を含む特殊なSVGは、手動の調整が必要な場合があります。

SVGオプティマイザーの仕組み

ツールはSVGO 4のブラウザ版を必要に応じて読み込み、preset-default のプラグインを適用します。XML宣言、doctype、コメント、メタデータ、エディタの名前空間の削除、属性と数値のクリーンアップ、図形のパスへの変換、グループの統合、パスデータと変換の書き換えなどです。SVGO 4の既定のプリセットは viewBox、<title>、エディタ由来でない <desc> を保つため、拡縮とアクセシビリティが維持されます。複数パスでは、出力が小さくならなくなるまでプラグインが繰り返されます。