ZeroTool Workbench

SVG オプティマイザー

ブラウザ上で SVGO を使い SVG を最適化。プラグイン切替・差分バイト表示・コピー / ダウンロード対応。アップロードもサインアップも不要。

100% クライアントサイド データはブラウザ外に出ません 無料 · 登録不要

Plugins

Ready

関連ツール

SVG → PNG 変換器 SVGをオンラインでPNGに変換。ファイルアップロードまたはコード貼り付け、サイズ・背景指定対応。完全ブラウザ完結。 SVG → JSX コンバーター SVGをReact JSXコンポーネントに即座に変換。キャメルケース属性・className・xmlns削除に対応。TypeScript・forwardRef・memoラップもオプションで選択可能。完全クライアントサイド。 Favicon ジェネレーター 絵文字・テキスト・画像・SVGから完全なファビコンセットを生成。ICO・複数サイズPNG・apple-touch-icon・webmanifestを一括出力。完全ブラウザ完結。 WebP 変換器 PNG/JPG/GIFをWebPに、またはWebPをPNGに変換。バッチ変換・品質調整・サイズ比較対応。完全ブラウザ完結。 EXIF メタデータビューアー JPEG 写真の EXIF メタデータをオンラインで確認・削除 — GPS、カメラ情報、タイムスタンプを一括除去。完全ブラウザ完結、アップロード不要。 画像カラーパレット抽出 任意の画像から主要色を抽出するブラウザツール。k-means で HEX/RGB/HSL/OKLCH、CSS 変数、Tailwind 設定を生成。完全ブラウザ完結、アップロード不要。

使い方

  1. SVG マークアップを貼り付け、または「ファイルをアップロード」タブで .svg をドロップします。
  2. 必要なプラグインを切り替えます。既定値は SVGO の preset-default に揃え、主トグル 8 件で最頻出の判断をカバーします。
  3. SVG を最適化を押下。最適化前 / 後でバイト数・削減率・実際の描画結果を並べて表示し、視覚的なリグレッションを即座に確認できます。
  4. 出力をコピーでコードベースに即貼付、または.svg をダウンロードでファイル保存。

削除される内容

SVGO はエディタのメタデータ、コメント、非表示要素、既定属性など描画に影響しないマークアップを削除し、パスデータを書き直し、隣接パスを統合し、色記法を短縮します。一般的なアイコンは 40–70% の削減が見込め、その大部分は convertPathData・mergePaths・cleanupNumericValues によるものです。

注意すべき 2 つのトグル

viewBox を削除とwidth/height を削除が既定でオフなのには理由があります。viewBox がない SVG はレスポンシブにスケールできず、width / height がない SVG は親要素から描画ボックスを継承します — ダウンロード可能なアイコンとして配布する場合はまず望ましくない結果です。埋め込みコンテキストを完全に制御している場合（親 <use> でサイズを指定したスプライトシートなど）に限り有効化してください。

最適化のタイミング

  • 本番ビルド：vite-plugin-svgo 等でバンドラ側に SVGO を組み込みます。本ツールは CLI を起動せず結果を即確認したい場合に便利です。
  • 手書き / エクスポートされた SVG：Figma・Illustrator・Sketch はエディタのメタデータと未使用 id 属性を大量に残します。SVGO はそれらをきれいに除去します。
  • HTML へのインライン SVG：マークアップが直接埋め込まれる場合、1 KB ごとに初回描画が遅れます — 小さければ小さいほど良好です。

仕様：1 ファイル単位

本ツールは 1 ファイルずつ最適化します。バッチ最適化、カスタムプラグイン記述、CI 統合は SVGO コマンドラインに任せましょう — npm install -g svgo 後、svgo input.svg -o output.svg でディレクトリや glob を一括処理できます。本ツールでトグル構成を確定したら、SVGO 公式ドキュメントから対応する svgo.config.js をコピーしてビルドに組み込めます。

最適化後に PNG へ変換、または React へ抽出したい場合は SVG → PNG 変換 と SVG → JSX を続けて使用してください。

FAQ

SVGOMG と何が違いますか？

SVGO のコアは同じです。ZeroTool 版は SVGO v4 を固定し、使用頻度の高い 8 プラグインを主面盤トグルに昇格、英語・中国語・日本語・韓国語のネイティブ UI を備えます。SVGOMG は英語のみです。

SVG がサーバーに送られることは？

ありません。SVGO は JavaScript モジュールとして現在のタブに読み込まれ、貼り付けやアップロードした SVG をローカル メモリ上だけで処理します。入力・出力・プラグイン設定すべてデバイス内に留まります。

最適化後に SVG が壊れて見える理由は？

最も多い原因は「viewBox を削除」を有効にしている場合です。viewBox のない SVG はレスポンシブにスケールできません。オフに戻して再最適化してください。「width/height を削除」も固定サイズアイコンで同様の副作用があります。

インライン <style> や CSS クラスはどうなりますか？

既定では SVGO が style を要素属性へインライン化し圧縮します（inlineStyles + minifyStyles）。ランタイム CSS 上書きのためにクラスを残したい場合は、「すべてのプラグイン (34) を表示」パネルで両者をオフにしてください。

<script> を含む SVG も最適化できますか？

可能です。SVGO は script の内容を変更せず、周辺のコメント削除と空白整形のみ行います。<use href="sprite.svg#id"> のような外部参照も保持されます。