今回の仕上がり
自作SVGの元データと最適化後のデータを並べました。見た目だけでなく、下の手順で容量と出力コードを比べます。
出力SVGを見る。編集部が確認した自作データです。
この記事の目次 開く・閉じる
SVGの中身を整理する、小さな道具
SVGは、線や図形をコードで記述する画像形式です。SVGOMGは画像を新しく描くエディターではなく、すでにあるSVGの記述を最適化するツール。Jake Archibald様の公開プロジェクトで、SVGOの機能を画面から扱えます。
今回の緑の角丸四角は、みっけメディアが検証用に用意したもの。PNGやJPEGをSVGへ変換した実験ではありません。SVGの最適化に絞った画面なので、初めて使うときも設定と結果を見比べやすいと感じました。
スクショで追う、最初の最適化
左上のメニューから入力する
公式サイトを開き、左上の三本線を押します。ファイルならOpen SVG、コードならPaste markupです。今回は自作SVGのコードを貼り付けました。手元にSVGがなければDemoで画面を見る入口もあります。
形と容量を別々に見る
IMAGEで見た目を確認します。右側のShow originalは元の表示へ切り替える設定。容量表示のCompare gzippedは、圧縮後の比較か、元のSVGコードの容量比較かを切り替えます。同じ条件で比べてください。
今回の入力では、初期のgzip比較が175→137バイト、Compare gzippedをオフにすると223→159バイトでした。後者は64バイト、約28.7%減。この一つの簡単な図形の結果であり、すべての画像やサイトが同じ割合で軽くなるわけではありません。
MARKUPでコードを見て、別名で保存する
上のMARKUPを押すと出力コードを見られます。今回、コメントと不要なグループがなくなり、数値や色の表記が短くなることを確認しました。右下の下向き矢印からDownloadへ進めます。元データは残し、出力は別名で保存してください。
同じ形を見比べたい方へ：元の自作SVG ／ 画面で確認した出力の作例。配布ファイルは末尾の改行を含むため、画面内の入力文字列の容量と1バイト差があります。
「小さくなった」だけで完成にしない
Number precisionを下げると、細かい形が変わる場合があります。最初は設定をむやみに変えず、実際に使う大きさで元と比較してください。viewBox、ID、タイトルなどは、拡大縮小・CSS・アクセシビリティで必要なことがあります。容量だけを理由に消さないようにします。
この道具は権利確認やSVGの安全性検査の代わりではありません。第三者の素材のクレジットやライセンスは別途残してください。未公開ロゴなどの機密データは、この試験では使っていません。通信内容やプライバシー保護の仕組みを網羅的に調べたわけではありません。
無料のSVG素材を探すならTabler Iconsのガイドへ。実装時の確認ポイントはSVGアイコンの公開前チェックにまとめました。
作者・出典・確認範囲
確認日：2026年9月29日。PCブラウザで自作コードの貼り付け、IMAGE／MARKUP、Compare gzippedの切り替えを操作しました。出力ファイルの保存完了、複雑なSVG、スマホでの編集、外部通信の網羅的調査は未確認です。画像は実画面で、AI生成画面ではありません。
MITはツールのコードのライセンス。入力した素材の権利が変わるわけではありません。現在のSNS人気やAI利用は断定せず、長く公開され、保守が続けられている道具として紹介します。