SVG オプティマイザー

SVGを圧縮: コメント、メタデータ、エディタの残骸を削除し、空白をまとめます。

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

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

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

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

機能

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

  1. 入力欄に SVG ソースを貼り付けます。
  2. コメント・メタデータ・エディターデータ・寸法・空白のオプションを必要に応じて切り替えます。
  3. 最適化された出力と、その上に表示されるバイト削減量を確認します。
  4. 最適化された 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 を除去し、空白をまとめた例。

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

よくある質問

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

関連ツール

すべての ArrayKit ツール