SVG最適化・圧縮ツール - SVGOでWeb向けにコードを軽量化

ブラウザ上で動作するSVGOにより、SVGファイルをオンラインで圧縮・軽量化します。FigmaやIllustratorから書き出した無駄なベクターコードを整理し、プレビューで効果を確認してコピーできます。

Click for theater mode
SVGファイルをここにドラッグ&ドロップ、または選択

.svgファイルか、SVGコードの直接貼り付けに対応。最適化はブラウザ上でローカルに実行されます。

最適化モード

多くのアイコン素材に適した、より安全で標準的なSVGO最適化を実行します。

SVGコードを貼り付けるか、SVGファイルを選択して開始してください。

SVGファイルは当サイトのサーバーにアップロードされません。

元のサイズ
--
最適化後のサイズ
--
削減量
--

プレビュー

ここに最適化後のSVGプレビューが表示されます。デザインの崩れがないか確認できます。

最適化結果

SVGを読み込むと、最適化されたコード、サイズ比較、およびプレビューがここに表示されます。

How to Use

  1. 「サンプルSVGを読み込む」をクリックしてデザインツールから書き出されたコードの整理プロセスを確認するか、ご自身の.svgファイルをドラッグ&ドロップします。
  2. FigmaやIllustrator、エディタなどからコピーした生の<svg>コードを直接テキストボックスに貼り付けることもできます。
  3. 安全なデフォルト設定である「標準」を選択します。さらにファイルサイズを削減したい場合は「強力(アグレッシブ)」モードへ切り替えてください。
  4. 「元のサイズ」「最適化後」「削減率」を確認し、プレビューで見た目に問題がないかチェックします。
  5. HTML、Reactなどのコンポーネントに埋め込む場合は「SVGコードをコピー」をクリックし、ファイルとして保存する場合は「SVGをダウンロード」をクリックします。

Core Features

  • SVGOによるSVG圧縮:ブラウザ上でSVGOを実行し、ベクターコードからメタデータ、空のグループ、不要な属性を削除してスリム化します。
  • FigmaやIllustratorの出力コードを整理:デザインツール特有の冗長なSVGを、Webページへの組み込みに最適なクリーンなアイコンコードに整理します。
  • 即時のファイルサイズ比較:元のサイズ、最適化後のサイズ、削減率をその場で表示し、ファイル差し替えの効果を確認できます。
  • コードコピーまたはファイルダウンロード:最適化された<svg>コードを1クリックでコピーでき、HTMLやReactなどのコンポーネントに貼り付けられます。そのまま.svgファイルとしてダウンロードも可能です。
  • デザイン資産を守るローカル処理:ファイルの読み込み、SVGO最適化、プレビュー、書き出しはすべてブラウザ上で実行され、外部サーバーにアップロードされることはありません。

Related Tools

FIRE計画シミュレーター (経済的自由の積立予測)

インフレ調整に対応した 2026 年版のFIRE計画計算機。将来の購買力をシミュレーションし、リタイアメントに必要な資産との差分(ギャップ)を分析。ExcelやNotionの管理用ダッシュボードに適したCSVをワンクリックで書き出せます。100%プライベートなクライアントサイド計算。

ポジションサイズ計算機 - 許容リスクによる最適なエントリー量の算出

口座資金、許容リスク比率(%)、エントリー価格、ロスカット価格から取引ポジションサイズを計算します。データは送信されず、ブラウザ上で安全に複数のリスクシナリオを比較できます。

複利計算シミュレーター | 積立投資の将来価値&金利推移グラフ

元本、毎月の積立額、想定利回り(年利)、運用期間から将来の複利効果を計算します。元本、運用益、合計残高をインタラクティブなグラフで視覚化。データは送信されません。

ローン計算機 | 毎月の返済額・元金・金利の内訳計算

元利均等および元金均等返済方式に対応したローンシミュレーター。毎月の返済額、金利総額、返済スケジュール表を計算し、グラフや表で可視化します。

投資・ROI計算機 | 複利シミュレーター&資産推移

初期投資額、毎月の積立額、想定利回り、およびインフレ調整後の結果をローカルで計算します。複利グラフ、投資収益率(ROI)、年次推移表を用いて将来の資産推移をシミュレーションできます。

APR APY 変換 | 名目金利&実質金利計算機

APR(名目年利率)と APY(実質年利率)をローカルで相互変換します。金利を入力し、複利計算の頻度を選択すると、実質金利、スプレッド、および頻度の比較結果が即座に表示されます。

粗利益率・マークアップ計算機 | Margin & Markup 相互変換

粗利益、マークアップ(値入率)、マージン(粗利益率)、および販売価格をローカルで計算します。原価と売価、または原価と目標マージンを入力するだけで、即座に計算結果が表示されます。

CPM & CPC 計算機 | 広告費&クリック率 (CTR) オンラインツール

CPM(インプレッション単価)とCPC(クリック単価)をローカルで計算します。予算、表示回数、クリック数、CPM、CPC、CTRを即座にシミュレーションし、広告キャンペーンの計画に役立ちます。

Calculation Logic

SVGの最適化は、画像をラスタライズ(ビットマップ画像に変換)するのではなく、XMLベースのベクターマークアップ自体をクリーンアップします。本ツールはブラウザ上で直接SVGOを実行し、エディタ用のメタデータの削除、不要なグループの結合、空の属性の削除、パスデータの圧縮、座標数値の丸めなどを行います。

「標準」モードは、ほとんどのアイコンやイラストに対して安全な推奨設定です。「強力(アグレッシブ)」モードでは、複数回の最適化パスと数値精度の短縮が適用されるため、さらにサイズを削減できますが、極めて複雑なパスではごくわずかに形状が変化する場合があります。

FAQ

SVGのファイルサイズを削減するにはどうすればいいですか?

デザインツールが書き出した不要なメタデータ、空のグループ、冗長な属性、および圧縮可能なパスデータを削除するのが最も効果的です。本ツールは、これらのSVGO最適化処理をブラウザ上で実行し、削減率を表示します。

Figmaから書き出したSVGコードをきれいにするには?

書き出した.svgファイルをツールにドラッグ&ドロップするか、生の<svg>コードを直接貼り付けます。「標準」モードから試し、プレビューで表示を確認した上でコピーまたはダウンロードしてください。

SVGを圧縮すると画質は劣化しますか?

通常は劣化しません。SVGはベクターコードであり、SVGOは主に見えないメタデータや冗長なコード構造を整理します。ただし、「強力(アグレッシブ)」モードでは極めて複雑なパスで微細な形状の変化が起こる可能性があるため、本番環境に適用する前にプレビューで確認することをお勧めします。

アップロードした画像はサーバーに保存されますか?

いいえ、保存されません。ファイルの読み込み、SVGO最適化、プレビュー、コピー、およびダウンロード処理はすべてブラウザ上でローカルに行われます。

最適化されたSVGを直接HTMLに貼り付けて使えますか?

はい、「SVGコードをコピー」を使うと、完全な<svg>マークアップコードがコピーされるため、HTMLやReactコンポーネント、アイコンシステムにそのままインラインで貼り付けることができます。

PNGやJPGをSVGに変換することはできますか?

いいえ、できません。本ツールは既存のSVGベクターコードを最適化するためのものであり、ビットマップ画像をベクターデータに変換する機能はありません。