デザインツールから書き出したSVGを小さくする

やりたいこと

InkscapeやFigmaから書き出したアイコンには、<metadata>ブロック・エディタの名前空間属性・XMLコメント・余分な空白がよく入っています。描画には一切影響しませんが、SVGをインラインで埋め込む・キャッシュする全てのページで余計な転送量になります。

具体例

一般的なエディタ出力は圧縮で15〜40%ほど小さくなります。コメントと<metadata>が消え、sodipodi:/inkscape: 系の属性が取り除かれ、タグ間の空白が詰まります。前後のバイト数が表示されるので、削れた量をその場で確認できます。

• 除去するもの：コメント、<metadata>要素、エディタ名前空間属性（sodipodi・inkscape・sketch・figma）、XML宣言、タグ間の空白。
• 残すもの：すべてのパス・図形・グラデーション・id・class・style属性。描画結果は変わりません。

ファイルを置き換える前に

出力を一度ブラウザで開くか、その場でプレビューしてください。CDATA内のコメントやSVG内スクリプトを含む特殊なファイルは、圧縮後に挙動が変わることがあります。バイト数だけでなく描画結果を確認します。