SVG 最適化・圧縮ツール｜不要な属性削除・小数点丸め

🔗 関連ツール

・画像 → Base64
・HTML / CSS / JS Minifier

📖 つまずきやすいポイント

SVG からコメント・メタデータ・エディタ固有の属性を削除し、空白を圧縮し、小数点を丸めてサイズを削減します。CSS の data URI・HTML の img・JSX・Vue 形式での出力にも対応し、処理はブラウザ内で完結します。削除してよいものと、削除すると図が壊れるものがあります — とくに id は、<use>・clipPath・グラデーションから参照されている可能性があるので、機械的に消せません。

ケース	何が起きるか	どうする
最適化したら図が崩れた	原因はほぼ 2 つです。1 つは `id` の削除 — `<use xlink:href="#icon">`・`clip-path="url(#mask1)"`・`fill="url(#grad1)"` はすべて `id` を参照しており、消えると図形が表示されない、あるいは黒く塗り潰されます。もう 1 つは小数の丸めすぎで、小さなアイコンや細い線では、小数点以下 1 桁に丸めただけで座標が潰れ、形が崩れます。どちらも「サイズは減ったが図が違う」という結果になり、数値だけを見ていると成功したように見えるのが厄介です。	小数は 2〜3 桁に留めてください — 1 桁まで落とすと、削減量に対して壊れるリスクが割に合いません。そして最適化の前後を必ず並べて目視で比較してください (このツールのプレビュー) — ファイルサイズの数字だけを見て判断するのが、この作業で最も多い失敗です。`id` については、インライン SVG で外部の CSS や JavaScript から参照している場合、その ID を保持する設定が必要です — SVGO でも `cleanupIds` は既定で有効なので、同じ問題が起きます。複数の SVG を同じページに置く場合は逆の注意も要ります — `id` はページ内で一意でなければならないので、同じ ID を持つ SVG を 2 つ置くと、後のほうが前の定義を参照してしまいます。
title / desc を消してアクセシビリティが落ちる	`<title>` は SVG における代替テキストにあたる要素です — スクリーンリーダーはこれを読み上げます。装飾用の SVG なら消して構いませんが、意味を持つアイコン (ボタンの中身、状態を示すアイコン、グラフ) から消すと、そのボタンが何をするのか読み上げられなくなります。とくに危険なのは、アイコンだけのボタンです — テキストラベルが無いので、`<title>` が唯一の手がかりだった場合、それを消すと「ボタン」としか読み上げられなくなります。見た目には何の変化も無いので、気付く機会がありません。	SVG の役割で判断してください。`<img>` で読み込むなら `alt` 属性が代替テキストになるので、SVG の中の `<title>` は不要です — 消して構いません。インラインで意味を持つ場合は、`<title>` を残したうえで `role="img"` と `aria-labelledby` を付けてください — `<svg role="img" aria-labelledby="t1"><title id="t1">保存</title>` の形です。純粋な装飾なら、`<title>` を消したうえで `aria-hidden="true"` を付けてください — これは空の `alt` と同じ意味で、「読み上げなくてよい」と明示することになり、消しただけの状態より良いです。判断の基準は「この図が無かったら意味が変わるか」です。
data URI にしたらサイズが増えた	Base64 は必ず約 33% サイズが増えます — SVG を最適化して 30% 削ったあと Base64 にすると、元のファイルとほとんど変わらない大きさに戻ります。しかもBase64 の文字列は gzip がほとんど効きません — SVG はテキストなので本来 gzip で 70% 前後圧縮できるのに、Base64 化するとその性質が失われます。「data URI にすればリクエストが減って速くなる」という前提で、実際には転送量が倍近くになっていたというのは、この工程でよく起きる逆転です。	SVG を data URI にするなら、Base64 ではなく URL エンコードを使ってください — `data:image/svg+xml,%3Csvg...` の形式です。SVG はテキストなので、パーセントエンコーディングのほうが Base64 より小さく、gzip も効きます。エスケープが必須なのは `#`・`%`・`"` の 3 つで、他はそのまま置けます (`<` と `>` もエスケープしたほうが安全ですが、必須ではありません)。そもそも data URI が有利なのは、数 KB 以下のアイコンだけです — それ以上なら通常の `<img>` かインライン SVG のほうが、キャッシュが効くぶん速くなります。data URI は「CSS の中で完結させたい」ときの手段であって、速度の最適化ではありません。

最大の削減は、ツールではなく書き出しの設定にあります。Illustrator や Figma の SVG 書き出しは、既定でエディタ固有のメタデータ・レイヤー名・不要なグループを大量に含みますが、「最小限」や「SVG 1.1 プロファイル」といったオプションを選ぶだけで、そもそもそれらが出力されません — 後から削るより、最初から出さないほうが確実で速いです。アイコンを大量に使うなら、1 つずつ最適化するより SVG スプライトにまとめてください — リクエスト数と総容量の両方で有利になります。最後にセキュリティ — 外部から受け取った SVG を、そのままインライン展開しないでください。SVG は <script> と onload 属性を含められる XML なので、インラインで出すとそのまま XSS になります。ユーザーがアップロードした SVG を表示するなら、<img src="..."> で読み込んでください — この経路ではスクリプトが実行されません。インラインで扱う必要があるなら、DOMPurify の SVG プロファイルで必ずサニタイズしてください。

📖 使い方

1

SVG を貼り付けまたはファイルを開く

左側のテキストエリアに SVG コードを貼り付けるか、「開く」ボタンで SVG ファイルを選択します。「サンプル」ボタンでデモ SVG を試せます。
2

最適化オプションを選択

コメント削除・メタデータ削除・エディター属性削除・空白圧縮などのチェックボックスを必要に応じて切り替えます。小数点桁数を下げるとさらにサイズを削減できます。
3

出力をコピーまたは形式を選択

右側に最適化済み SVG が表示されます。Raw SVG のほか、CSS の background-image (data URI)・HTML の img タグ・JSX・Vue 形式でも出力できます。

❓ よくある質問

どれくらいサイズを削減できますか?

Inkscape や Illustrator などで書き出した SVG は多くのメタデータを含みます。一般的には 20〜60% のサイズ削減が見込めます。全オプションを有効にすると最大限に削減できます。

title / desc を削除するとアクセシビリティに影響しますか?

はい。SVG を img タグで使う場合は通常問題ありませんが、インライン SVG としてアクセシブルなアイコンに使う場合は title と desc をそのまま残してください。

JSX 形式は React で使えますか?

はい。JSX 形式を選ぶと kebab-case 属性が camelCase に変換され、class が className に置き換えられます。React コンポーネントに直接貼り付けられます。

🐛 このツールで問題が発生しましたか？

完全無料・登録不要。再現手順だけでも結構です。届いたご報告は運営者に直接届き、修正の参考にします。

✂️ SVG 最適化

プレビュー

🔗 関連ツール

📖 つまずきやすいポイント

📖 使い方

❓ よくある質問

ご報告ありがとうございます！