不要な属性と空白を削除して SVG マークアップを最適化する方法

デザインツールから出力されたSVGファイルには、描画に直接関係のないメタデータやコメント、過剰な桁数の小数値、余分な改行や空白が含まれていることがよくあります。これらを整理してマークアップを軽量化するには、オンラインツールのSVGオプティマイザーを利用します。

最適化の仕組みと特徴

SVGオプティマイザーは、UTF-8形式のSVGマークアップを解析し、構造を損なわずに不要な情報を取り除くツールです。

• コメントとメタデータの除去: <metadata>タグやXMLコメントを安全に削除します。
• 空白の圧縮: タグ間の余白や連続する空白文字、不要な改行を整理して記述をコンパクトにします。
• 小数の丸め処理: 属性内の小数点以下数値を指定した桁数（0から6桁、初期値2）に丸め、無駄な末尾の0を省きます。

SVGを最適化する手順

1. SVGデータを指定する: 最大2MBまでのUTF-8形式のSVGファイルを読み込みます。
2. 削除オプションを選択する: 「コメントを削除」「メタデータを削除」の各チェックボックスで削除対象を指定します（初期値はどちらも有効）。
3. 数値の精度を設定する: 「数値の精度」を0から6の間で指定します（初期値は2）。
4. 最適化を実行する: 処理が完了すると、最適化されたSVGコードとともに、元のバイト数、最適化後のバイト数、削減されたバイト数、および削減率が表示されます。
5. 結果を活用する: 軽量化されたコードをコピーするか、保存してWebサイト等に組み込みます。ラスター画像が必要な場合はSVGをPNGに変換を使って変換することも可能です。

処理例

デザインツールから書き出したアイコンSVGを最適化する例です。

• 設定: コメント削除：有効、メタデータ削除：有効、数値精度：2
• 処理前: 制作アプリのメタデータ要素、XMLコメント、小数点以下6桁の座標値、複数の改行を含むコード（850バイト）
• 処理後: メタデータとコメントが除去され、小数が第2位までに丸められ、タグ間の空白が圧縮されたSVG（420バイト）
• 結果: 430バイト削減、削減率50.6%

制限事項

• 最大ファイルサイズは2MBまでです。
• XMLとして整形式でないSVGや、DOCTYPE宣言およびエンティティ宣言を含むファイルは処理できません。
• 本ツールはセキュリティ用のサニタイザーではないため、スクリプトやリンク、イベントハンドラーなどのアクティブコンテンツは除去されず保持されます。

よくある間違い

• パスデータ（d属性）の変形を期待してしまう: 本ツールの数値丸めは一般的な数値属性を対象としており、パスデータ内の複雑な頂点コマンドを再計算するものではありません。
• セキュリティ対策として使う: 外部から提供されたSVGの無害化には対応していません。悪意のあるスクリプトの混入を防ぐ用途には別途専用の検証が必要です。
• 不正なXML構文: 開始タグと終了タグの対応が崩れているファイルは構文エラーとなります。

よくある質問

コメントやメタデータの一部だけを残すことはできますか？

はい、画面上の「コメントを削除」「メタデータを削除」のチェックを個別に切り替えることで、必要な要素だけを保持したまま最適化できます。

どのようなファイルだとエラーになりますか？

ファイルサイズが2MBを超える場合、ルート要素がSVGでない場合、XML構文が不正な場合、またはDOCTYPEやエンティティ宣言が含まれる場合にエラーとなります。

数値の精度を下げすぎるとどうなりますか？

精度を0や1など極端に小さく設定すると、微細な曲線や図形の輪郭が粗くなり、見た目に歪みが生じることがあります。通常は初期値の2を推奨します。