アップロードなし, 100%ローカル, アカウントなし

SVG最適化

SVGを貼り付けるかドロップして、SVGOで縮小します。すべてブラウザ内で完結します。

SVG最適化の仕組み

SVGオプティマイザーはSVGO(SVG Optimizer)をブラウザのWeb Worker内で実行し、SVGファイルをアップロードすることなく最小化・クリーニングします。SVGOはコメントの削除、空白の折りたたみ、同一パスのマージ、形状をより コンパクトな表現への変換、視覚的効果のない属性の削除など、設定可能なプラグインセットを適用します。結果は元のSVGと同じようにレンダリングされる小さなSVGです。

Figma、Illustrator、InkscapeなどのデザインツールからエクスポートされたSVGファイルには、エディタ固有のメタデータ、空のグループ、冗長な変換属性、ブラウザが必要としない名前空間宣言など、かなりのオーバーヘッドが含まれていることがよくあります。SVGOのデフォルトプラグインセットはこのオーバーヘッドを確実に除去します。最適化されたファイルはダウンロードとして提供され、パーセントのサイズ削減が表示されるため、最適化が有効だったかどうか確認できます。

SVG最適化の使い方をステップごとに解説

  1. SVGファイルをアップロードエリアにドロップするか、クリックして参照します。
  2. SVGO Web Workerがデフォルトプラグインセットですぐに最適化を実行します。
  3. 削減率と元のファイルサイズ対最適化後のファイルサイズを確認します。
  4. 「ダウンロード」をクリックして最適化されたSVGをデバイスに保存します。
  5. 特定のプラグインがレンダリング問題を引き起こす場合は、プラグイン設定を調整して再最適化します。

よくある使用例

  • フロントエンド開発者がFigmaからエクスポートされたアイコンを本番アセットパイプラインにコミットする前に最適化し、各アイコンを4KBから1KB以下に削減する場合。
  • ブラウザには見えないがファイルを膨張させるエディタのメタデータの層を含むIllustratorからエクスポートされたSVGイラストをWebデザイナーがクリーニングする場合。
  • フォントビルドステップの前に各ソースSVGがクリーンで一貫した構造であることを確認するために、SVGグリフからアイコンフォントを構築する開発者の場合。
  • HTMLのインラインSVGを監査し、ページの重さを改善するために各膨張した元のSVGをSVGO最適化版に置き換えるパフォーマンスエンジニアの場合。

よくある質問

SVGOはSVGの見た目を変えますか?

SVGOのデフォルトプラグインは視覚的に無損失になるように選ばれています。最適化されたSVGはすべての標準ブラウザで元のSVGと同一にレンダリングされます。一部の積極的なプラグイン(パス座標を大幅に丸めるものなど)は、微妙なレンダリングの違いを引き起こす可能性があります。視覚的な変化に気づいた場合は、元のSVGと最適化されたSVGをブラウザで比較し、問題を引き起こしている特定のプラグインを無効にしてください。

SVGファイルは最適化のためにサーバーに送信されますか?

いいえ。SVGOはブラウザタブのWeb Worker内で実行されます。SVGテキストはローカルディスクから読み込まれ、JavaScriptのメモリで処理され、出力はダウンロード用にページに返されます。ファイルコンテンツはデバイスの外に出ることはありません。

SVGはどれくらい小さくなりますか?

削減量はソースによって異なります。エディタのメタデータを含むデザインツールからエクスポートされたSVGは、一般的に30〜70%縮小します。既にリーンな手書きのSVGは5〜15%の削減しか見られないかもしれません。ツールは正確なバイト数とパーセンテージを表示するため、各ファイルを個別に評価できます。

最適化はファイル内のSVGアニメーションやJavaScriptに影響しますか?

SVGOのデフォルト設定はアニメーション要素とSMIL属性を維持します。一方でscript要素は削除します。これから埋め込むSVGに実行可能なコードを含めるべきではないため、このツールはSVGOのデフォルトプリセットにremoveScriptsプラグインを追加しています。属性をクリーンアップする一部のプラグインは、アニメーションがそれらの属性をIDで参照している場合、アニメーションと干渉する可能性があります。複雑なアニメーションを使用するファイルを最適化した後は、レンダリングされた出力を確認してください。

複数のSVGファイルを一度に最適化できますか?

現在のバージョンは1つのSVGファイルを1回で処理します。ファイルをドロップし、結果をダウンロードし、次のファイルをドロップします。1回のセッションで複数ファイルのバッチ処理は、このリリースでは利用できません。

ツールが使用するSVGOのバージョンは何ですか?

ツールはWeb WorkerでSVGOをバンドルして実行します。バンドルされたバージョンはツールのアバウト情報に記載されています。SVGOは活発にメンテナンスされており、v1、v2、v3の間でプラグインAPIが大幅に変更されました。現在のツールはv3プラグイン形式を使用しています。