SVG 最適化
SVGから編集ソフトの残骸を取り除いて軽くします。座標の桁数・viewBox・idの扱いを選べ、すべてブラウザ内で処理します。
ファイルをドラッグするか、クリックして選んでください
ファイルはサーバーに送信されず、ブラウザ内だけで処理されます。
縮まなくなるまで繰り返します。少し遅く、少し小さくなります。
改行とインデントを入れます。容量は増えます。
使用箇所すべてでCSSがサイズを指定している場合のみ安全です。
ファイル外からそのidを参照している箇所が壊れます。
ファイルはサーバーに送信されず、ブラウザ内だけで処理されます。
使い方
登録もインストールも不要、回数制限もなく無料で使えます。
SVGを貼り付けるかファイルを置くと、整理後の内容が前後の容量とともに表示されます。Figma・Illustrator・Sketchから書き出したファイルには、図そのものとは関係のない編集ソフト専用の属性やコメント、使われないidが残っており、そうしたアイコンを多数含むページは必要以上に重くなります。
もっとも容量が減るのは座標の桁数です。編集ソフトはパスの座標を小数点以下何桁も書き出しますが、24ピクセルで描くアイコンなら3桁でも画面が表現できる以上に細かい精度です。プレビューを見ながら下げてください。下げ続けると曲線が目に見えて角張ってきます。
viewBoxの削除は既定でオフです。そのアイコンが使われるすべての場所でCSSがサイズを指定していると確信できない限り、オフのままが安全です。viewBoxがないと図は拡大縮小できず、症状は「おかしく見える」ではなく「まったく表示されない」になりがちです。
idの短縮も既定でオフです。多少は減りますが、ファイルの外からそのidを参照している箇所が一つでもあれば（CSSでもスクリプトでも他文書のuseでも）その参照は静かに壊れます。
プレビューは元ファイルではなく最適化後のSVGを描画します。つまり、これからダウンロードするそのものを見ていることになります。桁数を下げすぎたかどうかは、元と見比べる以外に確かめる方法がありません。
ファイルはブラウザの外に出ません。最適化エンジン自体もボタンを押したときに読み込むので、ページを開くだけでは何もダウンロードされません。