SVGを軽量化する使い方｜不要なコードを削ってサイズを減らす

SVG のコードを貼るだけで、コメントや余分な記述を削って軽くできます。前後でサイズがどれだけ減るかも表示されます。

最適化したコードは、コピーやダウンロードで取り出せます。貼り付けたコードは外部へ送らず、手元だけで処理します。

SVGのサイズでつまずくところ

デザインツールが書き出す SVG には、余分な記述が残りがちです。そのため、こんな場面で気になります。

• コメントやメタ情報が残り、ファイルが必要以上に大きい
• 数値の桁が細かく、コードが読みにくい
• アイコンを何個も埋め込むと、ページが重くなる

SVG最適化ツールは、この軽量化を手元で肩代わりします。

SVG最適化ツールの使い方

ツールを開くと、SVG コードの入力欄が出ます。

コードを貼ると、その場で軽量化されます。上には「最適化前」と「最適化後」のサイズが並び、削減率も出ます。

下には最適化後のコードが表示され、そのまま使える形になります。

最適化したコードを取り出す

「コピー」を押すと、軽量化したコードを写せます。「ダウンロード」で、ファイルとして保存もできます。

元のファイルを差し替えるだけで、表示はそのままにサイズを減らせます。

削る項目を選ぶ

「詳細設定」を開くと、何を削るかを選べます。コメントの除去や数値の丸めなど、項目ごとに切り替えられます。

見た目に関わる項目は残し、不要な記述だけを削る、といった調整ができます。

こんな場面で使える

• アイコンの軽量化：Web に埋め込む SVG アイコンを軽くします。
• 書き出しSVGの整理：デザインツールの余分な記述を削ります。
• ページの高速化：多数の SVG を減量し、表示を軽くします。

使用例

たとえば、デザインツールから書き出したアイコンを整える場面を思い浮かべてみます。

コードを貼ると、コメントや余分な記述が削られます。サイズの表示を見れば、どれだけ軽くなったかが分かります。

処理は手元で動くので、素材を外に出さずに軽量化できます。

安心して使えるポイント

貼り付けたコードは、どこにも送信されません。すべて手元のブラウザの中だけで処理します。

未公開のロゴやアイコンも、外に出さずに軽量化できます。

関連ツール

• SVG最適化ツール：SVGの不要なコードを削って軽くする
• 画像リサイズツール：画像のサイズを変更する
• ファビコン生成ツール：画像からファビコンを作る

補足: 開発者の方へ

軽量化では、コメント・XML 宣言・不要な空白・冗長な属性を削り、数値の桁を丸めます。stroke-width="2.000" は 2 に、#ffffff は #fff に短縮されます。<title> のようなアクセシビリティに関わる要素は、設定で残せます。処理はブラウザ内の文字列・DOM 操作で行い、外部のサービスや API は使いません。

まとめ

書き出した SVG には、余分な記述が残りがちです。コードを貼れば、不要な部分を削ってサイズを減らせます。

削減率も一目で分かります。まずは軽くしたい SVG を貼って、最適化を試してみてください。

SVG最適化ツールを開く