SVG オプティマイザーとは何で、何を除去しますか?

XML プロローグ・doctype・コメント・メタデータ・title と desc、そして Inkscape・Sodipodi・Adobe などのツールのエディター不要データを除去し、空白をまとめるブラウザ内の SVG 圧縮ツールです。各ステップはトグルで制御できます。

このツールで SVG を圧縮するには?

SVG マークアップを入力欄に貼り付け、必要なクリーンアップを切り替えてから、最適化された出力をコピーします。バイト数と削減率が結果の上に表示されるので、縮小を確認できます。

最適化すると SVG の見た目は変わりますか?

いいえ。デフォルト設定では非視覚的なデータと空白のみを除去します。視覚的なパスや図形は保持されるため、描画されるグラフィックは同一のままです。

width と height 属性は除去すべきですか?

SVG に viewBox がある場合のみ外してください。viewBox がグラフィックをスケーラブルに保つので、レスポンシブや CSS でサイズ指定するアイコンに最適です。

SVG オプティマイザーは SVGO とどう違いますか?

ビルドツールや Node のセットアップをインストールせずに、最も一般的な SVGO のクリーンアップをブラウザ内でカバーする、軽量で依存関係のないオプティマイザーです。

私の SVG はどこかにアップロードされますか?

いいえ。SVG オプティマイザーはマークアップをブラウザ内のローカルで処理するため、データが端末から外に出ることも、サーバーにアップロードされることもありません。

SVG オプティマイザーオンライン

この SVG オプティマイザーで SVG マークアップを圧縮し、コメント・メタデータ・エディターの不要データを除去し、空白をまとめてファイルサイズを縮小。

SVG はブラウザ内のローカルで最適化され、サーバーにアップロードされることはありません。

開発・運営：Udit Agarwal

ラスター画像も縮小したいですか? Image Optimizer を試してください。

SVG オプティマイザーについて

この SVG オプティマイザーは SVG マークアップを圧縮し、アイコンやグラフィックをより小さく出荷して高速に読み込めるようにします。Figma・Illustrator・Inkscape・Sketch からエクスポートした SVG を貼り付けると、XML プロローグ・doctype・コメント・メタデータ、そして Inkscape・Sodipodi・Adobe のエディター固有の不要データを除去し、空白をまとめてバイト数を削ります。任意でルートの width と height 属性を外して、viewBox によりグラフィックをレスポンシブレイアウト向けに完全にスケーラブルなまま保てます。SVG を圧縮したい、または HTML・CSS・React コンポーネントにアイコンをインライン化したいフロントエンド開発者やデザイナーなどに便利な、軽量な SVGO 代替ツールです。すべてはブラウザ内のローカルで処理され、前後のバイト数を表示するので、ファイルがどれだけ小さくなったかを正確に確認できます。

機能

インラインやウェブの SVG に不要な XML プロローグと DOCTYPE 宣言を除去
エクスポートされたマークアップを整理するためコメントを削除
ファイルサイズを膨らませる metadata・title・desc 要素を削除
Inkscape・Sodipodi・Adobe のエディター不要データを名前空間付き属性を含めて整理
任意でルートの width と height を除去し、viewBox でグラフィックをスケーラブルに保持
タグ間の空白と余分なスペースをまとめる
最適化後のバイト数と削減率を表示
各クリーンアップをオン・オフして必要なマークアップだけを残す

SVG オプティマイザーの使い方

入力欄に SVG ソースを貼り付けます。
コメント・メタデータ・エディターデータ・寸法・空白のオプションを必要に応じて切り替えます。
最適化された出力と、その上に表示されるバイト削減量を確認します。
最適化された SVG をコピーしてプロジェクトに貼り付けます。

例

入力

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <!-- heart icon -->
  <title>heart</title>
  <path d="M12 21 4 13a4 4 0 1 1 8-5 4 4 0 1 1 8 5z"/>
</svg>

出力

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 21 4 13a4 4 0 1 1 8-5 4 4 0 1 1 8 5z"/></svg>

プロローグ・コメント・title を除去し、空白をまとめた例。

よくあるエラーとトラブルシューティング

寸法を除去した後にグラフィックが消える、またはサイズがおかしくなる。 — width と height の除去は SVG に viewBox があるときのみ機能します。viewBox がない場合は寸法のトグルをオフのままにしてください。
CSS や JavaScript が参照する ID やラベルが整理で消えてしまった。 — エディターデータのオプションは data-name や名前空間付きのエディター属性を除去します。コードがそれらのフックに依存している場合はオフにしてください。
title と desc が除去されてアクセシビリティが損なわれる。 — メタデータのオプションは title と desc 要素を除去します。スクリーンリーダーのラベルに頼っている場合は無効にしてください。
貼り付け後に出力が空。 — オプティマイザーには実際の SVG マークアップが必要です。ファイルパスやバイナリ画像ではなく、完全な svg 要素を貼り付けたか確認してください。

よくある質問

SVG オプティマイザーとは何で、何を除去しますか?: XML プロローグ・doctype・コメント・メタデータ・title と desc、そして Inkscape・Sodipodi・Adobe などのツールのエディター不要データを除去し、空白をまとめるブラウザ内の SVG 圧縮ツールです。各ステップはトグルで制御できます。
このツールで SVG を圧縮するには?: SVG マークアップを入力欄に貼り付け、必要なクリーンアップを切り替えてから、最適化された出力をコピーします。バイト数と削減率が結果の上に表示されるので、縮小を確認できます。
最適化すると SVG の見た目は変わりますか?: いいえ。デフォルト設定では非視覚的なデータと空白のみを除去します。視覚的なパスや図形は保持されるため、描画されるグラフィックは同一のままです。
width と height 属性は除去すべきですか?: SVG に viewBox がある場合のみ外してください。viewBox がグラフィックをスケーラブルに保つので、レスポンシブや CSS でサイズ指定するアイコンに最適です。
SVG オプティマイザーは SVGO とどう違いますか?: ビルドツールや Node のセットアップをインストールせずに、最も一般的な SVGO のクリーンアップをブラウザ内でカバーする、軽量で依存関係のないオプティマイザーです。
私の SVG はどこかにアップロードされますか?: いいえ。SVG オプティマイザーはマークアップをブラウザ内のローカルで処理するため、データが端末から外に出ることも、サーバーにアップロードされることもありません。

コードフォーマッターの他のツール

MongoDB クエリ整形ツール — MongoDB のクエリや find() 文をブラウザ内で整形・インデントします。
MongoDB 集計整形ツール — MongoDB の集計パイプラインをブラウザ内で整形・インデントします。
MongoDB エクスプローラー — MongoDB のドキュメントやコレクションのサンプルを調べ、フィールドのスキーマと型を推測します。
OpenAPI / Swagger フォーマッター — OpenAPI / Swagger 仕様（JSON または YAML）を整形・検証し、パスと操作の数を数えます。
CSS単位変換ツール — px・rem・em・pt・% をリアルタイムに相互変換します。
glob to regex 変換ツール — globパターンをJavaScriptのregexに変換し、パスでテストできます。
HTML to Markdown 変換ツール — HTMLをきれいで読みやすいMarkdownに変換します。
TOML 整形・変換ツール — TOMLを整形・検証し、JSONと相互変換します。
logfmt to JSON コンバーター — logfmt の key=value ログを JSON に、また JSON から logfmt に変換します。
dotenv から JSON への変換 — .env ファイルを JSON オブジェクトに、JSON を .env に相互変換できます。
CSV から Markdown テーブルへの変換 — CSV や TSV を GitHub 形式の Markdown テーブルに変換できます。
INI から JSON への変換 — INI 設定を JSON に、JSON を INI に、セクションやコメントごと相互変換できます。

コードフォーマッターのツールをすべて見る (32) · すべてのツール

SVG オプティマイザー オンライン

SVG オプティマイザー について

機能

SVG オプティマイザー の使い方

例