SVGオプティマイザ

コメント、メタデータ、不要なスペースを削除してSVGファイルを最適化およびミニファイします。

プレビュー

SVG最適化について

Illustrator、Figma、InkscapeからエクスポートされたSVGファイルには、視覚的なレンダリングに影響を与えずにファイルサイズを増やすメタデータ、コメント、エディター固有の属性、不要なスペースが含まれていることがよくあります。SVGを最適化すると、サイズを20〜60%削減でき、読み込み時間が改善されます。このツールは、視覚的な外観を保持する安全な最適化を適用します。

仕組み

  1. SVGを貼り付けまたはアップロード: SVGマークアップを直接入力するか、Illustrator、Figma、Sketchからエクスポートされた.svgファイルをアップロードします。
  2. 最適化パスを構成: 適用する最適化を選択, コメントの削除、メタデータの削除、パスの簡素化、viewBoxの正規化。
  3. 最適化: ツールは選択されたパスを実行し、サイズ削減のパーセンテージを表示します。
  4. ダウンロードまたはコピー: 最適化されたSVGを保存するか、コードに貼り付けるためにマークアップをコピーします。

なぜSVGを最適化するのか?

デザインツールからエクスポートされたSVGファイルは、不要なデータでいっぱいです, エディタメタデータ、デフォルト値を持つインラインスタイル宣言、空のグループ、冗長な変換属性、コメント。この余分なものは、レンダリングを変更せずにサイズを増やします。SVGO(ここで使用される業界標準のSVGオプティマイザー)は通常、ピクセル単位のレンダリングを保持しながらサイズを50〜80%削減できます。より小さいSVGは、より速く読み込まれ、HTMLにより速くインライン化され、帯域幅を削減します, 1ページに数十のSVGを読み込むアイコンシステムには特に重要です。

適用される最適化

SVG と SVGO の短い歴史

Scalable Vector Graphics は、2つの W3C 提案の競争として始まりました:Adobe、IBM、Netscape、Sun による Precision Graphics Markup Language(PGML)、および Microsoft による Vector Markup Language(VML)です。両方とも 1998年に提出されました。W3C の妥協は SVG となり、2001年9月に SVG 1.0 として勧告されました。Internet Explorer は IE9(2011年)まで悪名高くも SVG サポートを出荷することを拒否しましたが、Firefox、Safari、Opera は 2000 年代半ばからサポートしていました。SVG 1.1 は 2003年に登場し、2011年に第二版が出ました。SVG Tiny 1.2 は 2008年にモバイルデバイスをターゲットにしました。SVG 2 は 2016年頃にドラフトを開始しましたが停滞しました。今日も Candidate Recommendation Draft(最終更新は 2018 年)のままで、ブラウザは個別に部分を出荷しています。最適化は後から登場しました。SVGO は Kir Belevich(svg-go)によって作成され、2012年10月に JavaScript で書かれて GitHub に初公開されました。webpack-loader、Vite、Sketch、Figma エクスポートプラグイン、および 2015年に立ち上げられた Jake Archibald(Chrome チーム)による SVGOMG Web UI に統合され、デファクト標準となりました。SVGO 3(2023年リリース)はコードベースを近代化しました。このツールは、SVGO の最も影響力のあるプラグインの安全なサブセットを実装し、完全にブラウザで実行されます。

SVG オプティマイザが実際に行うこと

SVG の最適化が重要な場所

SVG を壊す最適化ミス

その他のよくある質問

SVG の最適化は実際にどれくらい節約できますか?

ソースに大きく依存します。Adobe Illustrator のエクスポートは、最初のパスで主にメタデータ、エディタ名前空間、小数精度削減から 60-80% 縮小することが多いです。Figma のエクスポートは箱から出してより清潔です(通常 20-40% 節約)。開発者が手で書いた SVG ですか?削除するものがあまりないため、しばしば 5-15% です。Wikipedia のロゴ、Illustrator 膨張の極端な例は、39 KB から 11 KB になりました。Figma の典型的な 24×24 アイコンは 1.4 KB から 0.6 KB に下がります。

SVG をインライン化するか、外部ファイルとして使用するかはいつ決めますか?

インライン(HTML 内の <svg>...</svg>)は、小さなアイコン(2 KB 未満)、重要なファーストビューコンテンツ、および SVG をスタイル設定する CSS が必要な場所(例:currentColor、ホバー状態、ダークモード)用。外部ファイル(<img src="icon.svg"> または CSS background-image)は、繰り返し使用される同一のアイコン(ブラウザがキャッシュ)、より大きなイラスト、CSS テーマが必要ないコンテンツ用。SVG スプライト(<use> で参照される複数の <symbol> 要素を持つ単一ファイル)は 2014-2019 年のアイコンシステムパターンで、現在は React/Vue/Svelte のインライン svg コンポーネントによって主に置き換えられています。

最適化されていない SVG にセキュリティリスクはありますか?

はい。SVG は <script> タグおよび onload、onclick イベントハンドラを埋め込むことができます。ユーザーがアップロードした SVG は XSS ベクトルです。SVG は <image href="..."> を介して外部リソースを参照でき、ビューアの IP を漏洩します。SVG フォント(非推奨ですが解析可能)には歴史的にバッファオーバーフローがありました。良いオプティマイザはクリーンアップの一部として <script> とイベントハンドラを取り除きます。ユーザーの SVG アップロードを受け入れる場合は、提供する前に強化された衛生化ツール(SVG プロファイル付きの DOMPurify)を通してください。

コマンドラインを使用して SVG を最適化できますか?

はい。npx svgo input.svg -o output.svg は標準の SVGO ライブラリを使用します。svgo.config.js でプラグインを設定します。CI 統合:webpack の imagemin-svgo、vite-plugin-svgo、GitHub アクション antfu/svg-opt。バッチ最適化用:svgo -f ./icons -o ./icons-optimised。ここでのブラウザツールは一回限りのケースで高速で、Node がインストールされていなくても動作します。

ここで最適化するとき、私の SVG はサーバーに送信されますか?

いいえ。最適化は、貼り付けた SVG マークアップで JavaScript を介してブラウザで完全に実行されます。最適化中に DevTools で Network タブを開きます。アウトバウンドリクエストはゼロです。独自のロゴ、未公開のアイコンデザイン、内部企業 SVG、および NDA に基づくものに安全です。

関連ツール

CSSミニファイヤー

コメント、スペース、不要な文字を削除してCSSをミニファイします。

画像圧縮ツール

画像を最大80%まで小さく圧縮します。ドラッグ&ドロップ、即時ダウンロード。サーバーアップロードなし。

ファビコンジェネレーター

画像をアップロードして、すべての標準ファビコンサイズ(16×16から512×512)をPNGで生成します。