SVG最適化ツール

ソースによって大きく異なります。Adobe Illustrator からエクスポートされた SVG ファイルには、通常、大量の Illustrator 固有のメタデータ、レイヤー データ、フォント参照、および XML ネームスペースが含まれており、これらは削除されます。Inkscape のエクスポートには独自の編集用ネームスペースとコメントが含まれています。Figma の SVG は一般的にクリーンです。一般的な削減率は、すでにクリーンな SVG で 20-40%、重いメタデータを含む Illustrator や Inkscape のエクスポートで 40-70% です。ツールは最適化前後の正確なバイト数を示すため、常に結果を確認できます。

デザインツールは、独自の編集機能を維持するために SVG ファイル内に固有のデータを埋め込みます。Inkscape は sodipodi: および inkscape: ネームスペースにレイヤー名やガイドの位置を保存し、Illustrator は i: および dc: ネームスペースにデータを埋め込み、古いツールには Sketch や Adobe のメタデータが含まれています。ブラウザで SVG を描画するためにこれらは一切必要ありません。編集データの削除は、特に複雑な Illustrator ファイルにおいて、最大のサイズ削減をもたらすことがよくあります。

小数点精度は、座標値の小数点以下に保持される桁数を制御します（例：d="M 10.3456789 20.1234567"）。6 から 2 に減らすと、それらは d="M 10.35 20.12" になり、わずかな座標の丸めを犠牲にしてバイトを節約できます。アイコンや単純なイラストの場合、精度 2-3 であれば目立たないはずです。詳細な技術図面や細かい曲線を含むイラストの場合は、4-5 を維持してください。精度の削減後は、丸めによるアーティファクトがないか確認するために、100% ズームでプレビューを確認してください。

SVG 要素には、デザインツールによって生成された冗長な ID が付いていることがよくあります（例：id="rect_123456789" または id="Layer_1_xA0_Background"）。ID の整理では、これらを有意に短い名前（例：id="a" や id="b"）に置き換え、多くの参照要素を持つ大きな SVG ファイルのバイトを節約します。これは単体で使用する SVG ファイルには安全です。もし SVG の ID がウェブページ内の外部 CSS セレクターや JavaScript (例: document.getElementById("myIcon")) で参照されている場合は、このオプションを無効にするか、最適化後に参照を更新してください。

はい。「または SVG コードを貼り付ける」をクリックしてコード入力パネルに切り替え、SVG マークアップを直接貼り付けてください。これは、HTML ファイルに埋め込まれた SVG や、デザインツールからコピーされたもの、またはチャートライブラリによって生成されたものがある場合に便利です。最適化した後は、Copy Code ボタンで結果をコピーし、必要な場所に貼り付け直してください。

いいえ。このツールはブラウザ内蔵の DOMParser API を使用して、SVG の解析とクリーンアップをすべてブラウザのタブ内で行います。ファイルのアップロードは発生せず、サーバーがあなたの SVG を処理することも、マシンから外部へ何も送信されることもありません。これにより、製品図面やブランド資産などの独自の、または機密性の高い SVG アセットを安全に最適化できます。

コミット前に最適化してください。サイズの小さい SVG ファイルは、高速な git 操作、より小さなリポジトリサイズ、およびクリーンな diff（エディタのメタデータは Illustrator で保存するたびに変更されることが多いため）を意味します。推奨されるワークフローは次の通りです：デザインツールから SVG をエクスポートし、この最適化ツールを実行し、プレビューを確認してから、最適化されたバージョンをコミットしてください。後で再編集する必要がある場合は、元のソースファイルを別のデザイン資産フォルダに保管しておきましょう。