SVGオプティマイザー

Illustrator、Figma、Sketchといったデザインツールから書き出したアイコンやロゴのSVGには、見た目とは無関係な「荷物」がたくさん含まれています。エディタ独自のメタデータ、XMLコメント、意味のないグループの入れ子、小数点以下15桁まで書き出された座標、誰も参照していないid属性——これらはレンダリング結果にはまったく影響しませんが、ダウンロードのたびに無駄な容量を積み増します。サイトの中で数十個のSVGアイコンを使っていれば、そのオーバーヘッドはあっという間に積み重なります。

このツールは、SVGOMGの裏側でも使われている最適化エンジンsvgoを、そのままブラウザの中だけで動かしています。SVGのコードを貼り付けるか、ファイルをドロップするだけで、コメントやエディタ由来の不要な情報を取り除き、可能な箇所ではパスを結合し、無駄なグループをまとめ、座標を指定した精度で丸めてくれます。処理はすべて端末内で完結し、アップロードもサーバーとの通信も一切発生しないため、社外秘のクライアントロゴであっても公開用のアイコンとまったく同じように安心して使えます。

デフォルトの設定はあえて控えめに調整されています。viewBoxはそのまま維持されるので、アイコンをどこに配置してもスケーリングは崩れませんし、width/heightもそのまま残ります。「width/heightを削除」をオンにするのは、SVGをHTMLにインラインで埋め込み、サイズ指定をCSS側に任せたい場合に便利です。ルート要素に固定サイズが残っていると、スタイルシート側の指定とぶつかってしまうことがあるためです。マルチパスは最適化処理を複数回繰り返すオプションで、1回目のパスでマークアップが単純化された後にだけ現れる追加の削減余地を拾ってくれます。基本的にはオンのままにしておいて損はありません。

精度は、パスの座標に何桁の小数まで残すかを決める設定です。数値を下げるほどファイルはさらに小さくなりますが、非常に細かい線画では見た目にわずかなズレが生じることがあるため、調整した後はプレビューで確認しておくのがおすすめです。一般的なアイコンやロゴであれば、デフォルト設定のままでもファイルサイズを40〜60%削減でき、見た目の違いはほとんど分かりません。ダウンロードする前に、プレビューとビフォー/アフターのサイズ表示で結果を確かめてください。