デザイン・Web制作

SVG 最適化ツール (サイズ削減・メタデータ除去)

1MBまでのスクリプト・外部参照を含まないSVGをブラウザ内で検査・最適化。SVGO v4でメタデータやコメントを整理し、ID・title・desc・style/class・要素構造を保持する安全優先設定、見た目・コード比較、コピー、ダウンロードに対応。

登録不要

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

スクリプト・外部参照を含まないSVG・UTF-8・1MB・2,000タグ・CSS 16KB・入れ子256階層まで。処理はブラウザ内で完結します。

SVGコードを直接入力・編集

スクリプト、イベント属性、外部参照、埋め込み画像、SMILアニメーション要素を含むSVGは対象外です。埋め込みCSSアニメーションは保持される場合があります。

このツールについて問い合わせる →

SVG 最適化ツール (サイズ削減・メタデータ除去)について

SVG最適化ツールとは

Inkscape・Illustrator・Figmaなどから書き出したSVGを、SVGO v4で軽量化するブラウザツールです。メタデータ、コメント、余分な空白、小数精度などを整理し、最適化前後のコードと見た目を比較できます。

ファイルはサーバーへ送信せず、読み込み、最適化、プレビュー、コピー、ダウンロードまでブラウザ内で処理します。削減量はSVGの内容と設定により異なり、すでに整理されたSVGではサイズが変わらない場合もあります。

対応するSVGと上限

  • 形式: UTF-8で保存され、スクリプトや外部参照を含まないSVG
  • ファイルサイズ: 1MBまで
  • タグ数: 2,000個まで
  • SVG内CSS: 合計16KBまで
  • 入れ子: 256階層まで

ブラウザの長時間停止と安全でないプレビューを防ぐため、script、イベント属性、外部URL、埋め込み画像、DOCTYPE・ENTITY、SMILのanimation・foreignObjectを含むSVGは対象外です。style要素内のCSSアニメーションは保持される場合がありますが、動きの同一性は判定しません。SVGサニタイズを目的としたツールではありません。

安全優先のデフォルト設定

初期設定では、外部CSS、アクセシビリティ情報、後からの再編集に影響しやすい変換を避けます。

色、数値、path、transform、属性順などは最適化されるため、属性値の完全一致へ依存するCSSセレクターやJavaScriptがある場合はコード比較と掲載先で確認してください。

設定初期値理由
viewBox・ID・title/desc保持レスポンシブ表示、参照、読み上げ情報を残すため
metadata・編集ソフト固有情報削除通常の表示に不要な編集情報を減らすため。設定をOFFにすると両方保持
コメント削除通常の表示に不要な注釈を減らすため
未使用名前空間削除参照されていない宣言を整理するため
style要素・class/typeセレクター・要素境界保持埋め込みCSS、外部CSS、再編集時の構造を残すため
グループ簡略化・非表示要素削除・shape変換無効CSSセレクターや再編集時の構造を変え得るため
小数桁数3一般的な圧縮と精度のバランス。図面や極小座標では増やして確認

追加圧縮オプションの注意点

ID削除、グループ構造の簡略化、非表示要素の削除、一部shapeのpath変換を有効にすると、さらに短くなる場合があります。一方で、HTML側のCSS・JavaScriptからのID参照、要素名を使うCSS、編集ソフトへ戻したときのレイヤー構造などへ影響する可能性があります。

shape変換は、SVGOが短くできるrect・line・polyline・polygonなどの一部が対象です。すべてのcircleや基本形状が必ずpathへ変換されるわけではありません。設定変更後は再度最適化し、見た目比較とコード比較の両方を確認してください。

使い方

  1. SVGファイルを選ぶか、SVGコードを入力します。
  2. 必要に応じて保持・削除・小数精度の設定を変更します。
  3. 「SVGを最適化」を押します。
  4. 最適化前後のサイズ、見た目、コードを確認します。
  5. 結果をコピーするか、.min.svgとしてダウンロードします。

見た目比較は確認を補助するもので、すべての利用環境での同一表示を保証するものではありません。実際に使うWebサイトやアプリでも最終確認してください。

こんなときに使う

  • デザインツールから書き出したロゴやアイコンをWeb掲載前に整理したい
  • アクセシビリティ情報とIDを残したまま不要な編集情報を削除したい
  • インラインSVGや配布用SVGのコード量を確認しながら減らしたい
  • SVGOの設定差を最適化前後で比較したい

よくある質問

Q. 見た目は必ず変わりませんか?
保証はできません。安全優先の初期設定でも小数値の丸めなどが行われます。見た目比較とコード比較を確認し、図面や精密な座標を使うSVGでは小数桁数を増やしてください。実際の掲載先でも最終確認が必要です。
Q. IDを削除してもよいですか?
SVG内外のCSS、JavaScript、use、gradient、clipPathなどから参照されていないと確認できる場合だけ削除してください。初期設定ではIDを保持します。
Q. 画像を埋め込んだSVGやアニメーションSVGを扱えますか?
埋め込み画像、外部参照、script、イベント属性、SMILのanimation要素、foreignObjectなどは扱えません。style要素内のCSSアニメーションは保持される場合がありますが、最適化前後の動きが同じであることは保証しないため、実際の掲載先で確認してください。
Q. 1MBを超えるSVGを最適化できますか?
このツールではできません。同期処理でブラウザが長時間停止するのを防ぐため、1MB、2,000タグ、SVG内CSS 16KB、入れ子256階層の上限を設けています。大規模SVGはデザインソフト側でレイヤーや不要要素を整理してから利用してください。
Q. ファイルはサーバーへ送信されますか?
送信されません。SVGの読み込み、検査、最適化、プレビュー、コピー、ダウンロードはブラウザ内で完結します。
このツールを評価
—(0件)