SVG 圧縮

機能

• コメントと title / desc / metadata を削除（ブロック単位。入れ子も含む）
• タグ間の空白と改行を畳み、`<text>` / `<tspan>` / `<style>` / `<script>` の中は 1 文字も動かしません
• 座標の桁数：パス・points・transform などの数値属性で 0〜3 桁を選択（既定3桁）
• 参照されていない id だけを削除（`url(#a)`、`href="#a"`、SMIL の `begin="a.click"` はすべて参照とみなします）
• viewBox と preserveAspectRatio は一切変更しません
• 色・クラス名・style 属性には数値処理をしません（`#ff0000` が `#ff0` になることはありません）
• xmlns の削除は任意。「HTML に直接埋め込む場合のみ」と明記しています
• 出力はシンタックスハイライト付き。圧縮後の文字数も表示します

使い方

1. SVG のソースを貼り付けます
2. 必要に応じて切り替えます。既定では安全な4項目（コメント・メタデータ・空白・小数3桁）だけを行います
3. さらに小さくしたい場合は小数を 1〜2 桁にするか、「未参照の id を削除」をオンにします
4. 圧縮結果をコピーします

よくある質問

viewBox を削ってはいけないのはなぜですか？

`viewBox` は座標系を定義するもので、図形のどの部分をどの領域に写すかを決めているからです。削ると `preserveAspectRatio` も効かなくなり、SVG は拡大縮小の能力を失います —— それでいて、あなたが指定した固定サイズでは正しく見えたままです。問題は他人が別の場所に置いたときに初めて現れます（アイコンが歪む、一部しか出ない）。節約できるのは十数文字で、この risk に見合いません。

text の中の空白を圧縮しないのはなぜですか？

それが内容だからです。`<text>Hello World</text>` の空白を削ると 1 語になり、画面上では「文字が詰まっている」としか見えません —— フォントの問題と誤解されがちです。そこで空白の畳み込みはタグ間だけに限定し、`<text>`・`<tspan>`・`<style>`・`<script>` の中はそのまま保持します。後の2つはマークアップ言語ですらなく、空白に独自の規則があります。

桁数を下げると図形が歪みますか？

小数3桁ならほとんど分かりません（24px のアイコンで 0.001 は画面上の約 40 分の 1 ピクセル）。1桁（0.1）にすると、大きく表示したときに曲線や斜線でわずかな多角形の角が見え始めます。0桁（整数）は小さなアイコンなら問題ありませんが、拡大すると誤差がはっきり出ます。既定が3桁なのはそのためで、積極的な設定は「この SVG を非常に大きく表示するか」で判断してください。

xmlns は削るべきですか？

使い方によります。HTML に直接埋め込む場合（`<svg>` をページ内に書く）は削れます。数バイトで、親文書の名前空間が引き継ぎます。しかし単体の `.svg` ファイル、CSS の `url()`、`<img src>` の対象にする場合は必ず残してください —— 無いとブラウザがそのファイルを認識せず、症状は「表示されない」です。ファイル自体には何の問題も見えません。既定でオフにし、ラベルに適用条件を書いているのはそのためです。