🗜️ SVG 圧縮（最適化）

SVGコードを貼り付けて圧縮（最適化）します。コメント・余分な空白・改行や、Inkscape/Illustratorなどが残すメタ情報（<metadata>・sodipodi:/inkscape: 名前空間）を取り除いて軽量化し、元サイズ・圧縮後サイズ・削減量・削減率をUTF-8バイトで表示します。属性値の文字列は保護。処理はすべてブラウザ内で完結します。

圧縮結果

⚠️ 本ツールは簡易的な最適化です。複雑なSVGや、パスデータの座標を丸める（小数点以下の削減）といった高度な最適化には対応していません。適用前に必ず見た目を確認し、元データのバックアップを取っておくことをおすすめします。

解説

SVGの圧縮（最適化）とは、画像の見た目（描画結果）を変えずに、ファイルサイズだけを小さくする処理です。SVGはテキスト（XML）で書かれた画像フォーマットのため、人が読むための改行・インデントや、作成ツールが挿入したコメント・メタ情報など、ブラウザの描画に不要な情報が多く含まれがちです。とくにInkscapeやIllustratorなどのエディタで書き出したSVGには、編集用の付帯情報が大量に残ります。これらを取り除くと、同じ絵のままファイルが軽くなり、ページの読み込みやアイコン表示が速くなります。

本ツールが削るのは主に次のものです。 形式のコメント、タグ間のインデント・改行といった余分な空白、属性のあいだの余分なスペースです。加えてオプションで、先頭の <?xml … ?> 宣言や <!DOCTYPE> を除去できます（インライン埋め込みや多くのブラウザ表示では省略しても問題ありません）。さらに、エディタが残す <metadata> ブロックや、sodipodi:namedview のような編集専用要素、inkscape: / sodipodi: で始まる属性、描画に使われない xmlns:dc・xmlns:cc・xmlns:rdf などの名前空間宣言も、オプションでまとめて取り除きます。

安全のために、値の中身は壊さないよう配慮しています。属性値（"..." や '...' で囲まれた文字列）は逐語的に保護するため、パスの d 属性や style の中身、URL などはそのまま残ります。また、<text> などの本文テキストは触らず、タグとタグのあいだにある「純粋な空白だけのノード（インデントや改行）」だけを取り除きます。CDATA（<![CDATA[ … ]]>）の内側も逐語的に温存します。ブラウザ上では DOMParser（image/svg+xml）でXMLとしての妥当性を確認し、入力は正しかったのに圧縮後に解析エラーが出た場合は警告を表示します。

実際のWeb配信ではサーバー側でgzipやBrotliによる転送時圧縮が併用されるのが普通で、最適化（テキストの無駄取り）とgzip/Brotli（通信路での圧縮）は重ねて効きます。そのため通信量の実削減は、本ツールが示す削減率よりさらに大きくなるのが一般的です。ただし本ツールは正規のSVG/XMLパーサではなく、タグと属性を手がかりにした簡易的な最適化であり、パスデータの座標を丸める（小数点の桁を減らす）・不要な属性や空要素を意味を解析して削るといった高度な処理は行いません。複雑なSVGでは意図しない結果になり得るため、適用前に元データのバックアップを取り、出力の表示を必ず見比べてから使ってください。処理はすべて端末内で行い、貼り付けた内容はどこにも送信されません。

よくある質問

圧縮すると画像の見た目は変わりますか？

基本的に変わりません。取り除くのはコメント・余分な空白・編集用のメタ情報だけで、パス・図形・色・座標といった描画そのものの情報は残します。ただし簡易ツールのため、特殊な構造では意図せぬ結果になり得ます。適用前に必ず表示を確認し、元データのバックアップを取ってください。

「エディタのメタ情報を除去」では何が消えますか？

InkscapeやIllustratorが書き出し時に残す編集用データです。具体的には <metadata>…</metadata> ブロック、<sodipodi:namedview> のような編集専用要素、inkscape: / sodipodi: で始まる属性、描画に使われない xmlns:dc・xmlns:cc・xmlns:rdf・xmlns:inkscape・xmlns:sodipodi といった名前空間宣言です。いずれもブラウザ表示には不要で、削っても見た目は変わりません。

XML宣言やDOCTYPEは消して大丈夫ですか？

HTMLにインラインで埋め込む場合や、通常のブラウザ表示では、<?xml … ?> 宣言や <!DOCTYPE> は無くても問題ないのが一般的です。一方、単独の .svg ファイルとして特定の環境で厳密に扱う場合などは、宣言が必要になることもあります。用途に応じてオプションのオン/オフを切り替えてください。

パスの座標（小数）を丸めて、もっと小さくできますか？

本ツールは対応していません。d 属性などのパスデータは逐語的にそのまま残します。座標の丸め・不要属性の意味解析による削除・図形の統合といった高度な最適化が必要な場合は、SVGOなどの専用ツールをご検討ください。本ツールは、貼るだけで安全側に軽量化できる手早い下ごしらえに向いています。

<text> の文字やパスの中身は壊れませんか？

壊れないよう配慮しています。属性値（"..." / '...'）は逐語的に保護し、<text> などの本文テキストや CDATA の内側も温存します。取り除くのは、タグとタグのあいだにある「空白だけのノード（インデント・改行）」に限っています。ただし、文字周りの空白に厳密な意味を持たせている特殊なケースでは表示が変わり得るため、確認をおすすめします。

削減率はどう計算していますか？gzipとの関係は？

削減率 = (元サイズ − 圧縮後サイズ) ÷ 元サイズ × 100 で、サイズはUTF-8のバイト数（TextEncoderで計測）です。実際の配信ではサーバーがgzip/Brotliで転送時圧縮も行うため、両者は重ねて効きます。通信量の実削減は、本ツールの数値よりさらに大きくなるのが一般的です。

「圧縮後のSVGが壊れている可能性があります」と出ました。

入力は妥当なSVGだったのに、圧縮後の文字列を DOMParser で解析するとエラーになった場合に表示します。特殊な記法で簡易処理が追随できなかった可能性があります。その出力は使わず、元データを別ツール（SVGOなど）で最適化するか、オプションを切り替えて再度お試しください。念のため元データのバックアップからやり直せる状態にしておくと安全です。

入力したSVGはサーバーに送られますか？

送られません。圧縮も妥当性チェックもすべてブラウザ内のJavaScriptで完結し、貼り付けた内容やサイズの計測結果はどこにも送信されません。ネットワークを切った状態（オフライン）でも利用できます。