SVG最適化ツール

SVGファイルを軽量化・クリーンアップ

SVGファイルをブラウザ上で最適化・軽量化します。不要なメタデータの削除、座標の丸め、空白の除去、コメント削除などを行い、ファイルサイズを大幅に削減します。すべてブラウザ内で処理され、ファイルは外部に送信されません。

📁

SVGファイルをドラッグ＆ドロップ

またはクリックしてファイルを選択

✨

SVGファイルを選択またはコードを貼り付けてください

使い方

1

SVGファイルを読み込む

「ファイル選択」タブでSVGファイルをドラッグ＆ドロップするか、「コード貼り付け」タブにSVGコードを直接貼り付けます。

2

オプションを調整する

必要に応じて最適化オプション（メタデータ削除、空白除去、座標丸めなど）のON/OFFを切り替えます。

3

結果をダウンロード

最適化されたSVGのプレビューとサイズ削減率を確認し、「ダウンロード」または「コピー」で出力します。

SVG最適化の詳細

SVG（Scalable Vector Graphics）はXMLベースのベクター画像形式で、Webサイトのロゴ・アイコン・イラストに広く使われています。デザインツール（Illustrator、Figma、Inkscapeなど）からエクスポートしたSVGファイルには、表示に不要なメタデータや冗長なコードが含まれていることが多く、最適化によりファイルサイズを大幅に削減できます。

最適化の内容

  • メタデータ削除：エディタ固有のメタデータ（Illustratorのai:、Inkscapeのinkscape:、sodipodi:など）を除去します
  • コメント削除：<!-- --> 形式のXMLコメントを除去します
  • 空白の最適化：不要な改行・インデント・連続スペースを除去します
  • 座標の丸め：小数点以下の桁数を2桁に丸めます（例: 12.345678 → 12.35）
  • 不要属性の削除：xmlns:xlink（未使用時）、xml:space、data-name 等の不要な属性を除去します
  • 空要素の削除：子要素のない <g>、<defs> 等の空コンテナを除去します

最適化のメリット

  • ページ速度の改善：ファイルサイズが小さくなり、読み込み時間が短縮されます
  • コードの可読性向上：不要なコードが除去され、編集しやすくなります
  • SEOの改善：ページのパフォーマンススコア（Core Web Vitals）が向上します

よくある質問

最適化でSVGの見た目が変わることはありますか？

基本的に見た目は変わりません。ただし座標の丸め精度を極端に下げると微細な差が出る場合があります。本ツールでは小数点以下2桁に丸めるため、通常は視覚的な差は生じません。プレビューで確認してからダウンロードしてください。

どのくらいサイズが削減できますか？

元のSVGの内容によりますが、デザインツールから直接エクスポートしたSVGでは20〜60%の削減が期待できます。メタデータが多い場合やコメントが多い場合はさらに大きく削減できます。

アニメーション付きSVGにも対応していますか？

はい。CSS/SMILアニメーションを含むSVGも処理できます。アニメーション関連の属性は保持されます。ただし、JavaScriptを含むSVGの場合はスクリプトが除去される可能性があります。

SVGファイルはサーバーにアップロードされますか？

いいえ。すべての処理はブラウザ上のJavaScriptで行われます。SVGファイルの内容が外部サーバーに送信されることは一切ありません。

データについて

このツールは時効性のないデータのみを使用しています。計算式や変換係数は普遍的な値に基づいており、定期的な更新は不要です。

入力データはブラウザ内のみで処理されます。サーバーへの送信は一切ありません。