CSSツール

無料 SVG最適化ツール

コメント、メタデータ、エディタデータを削除し、空白を削減してSVGファイルを最適化します。前後のサイズ比較を表示。すべてローカル処理。

ツールを読み込み中...

SVG最適化ツールとは

視覚的な出力に影響を与えない要素を削除することでSVGファイルサイズを削減するブラウザベースのツールです。

クイックアンサー

SVGマークアップを貼り付けるかSVGファイルをアップロードして、コメント、メタデータ、エディタデータ、余分な空白を削除します。すべての処理はローカルで実行されます。

Last updated: 2026-06-09

制限事項

  • 構造的なクリーンアップのみを実行します。
  • 埋め込みラスター画像を含むSVGは大幅なサイズ削減が見られない場合があります。
  • 一部のSVGファイルは非標準の名前空間プレフィックスを使用しています。

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

使い方

  1. 入力エリアにSVGマークアップを貼り付けるか、SVGファイルをアップロードします。
  2. ツールは自動的にSVGを処理し、最適化された出力を表示します。
  3. 前後のサイズ比較を確認します。
  4. 最適化されたSVGコードをコピーするか、.svgファイルとしてダウンロードします。

主な用途

  • Webページに埋め込む前にSVGファイルサイズを削減します。
  • デザインツールからエクスポートされたSVGをコミット前にクリーンアップします。
  • CSSデータURIで使用するためにSVGを準備します。

用途

使用例

Figmaエクスポートのクリーンアップ

FigmaからエクスポートされたSVGアイコンを平均4KBから1.2KBに削減します。

インラインSVGのパフォーマンス向上

28KBのヒーローSVGを9KBに削減します。

よくあるミス

  • 小さなSVGが常に視覚的に同一であると想定する。デプロイ前にプレビューを確認してください。
  • viewBox属性を削除する。
  • 再利用可能なシンボル定義を見落とす。

検証

  1. デザインツールからエクスポートされたSVGをアップロードし、メタデータが削除されたことを確認します。
  2. 元のSVGと最適化されたSVGの両方をブラウザで開き、同一にレンダリングされることを確認します。

FAQ

SVG最適化ツールのFAQ

最適化ツールは何を削除しますか?

XMLコメント、doctype宣言、エディタ固有のメタデータ、空のグループ、不要な空白を削除します。

パスデータを最小化しますか?

このツールは構造的なクリーンアップに焦点を当てています。

SVGのインラインCSSは壊れますか?

いいえ。インラインCSS、<style>ブロック、クラスベースのスタイリングは保持されます。

関連ツール

その他のcssツール

こちらもお試しください

こちらもお試しください