入力
ワークスペースを準備中…
使い方
- SVG ソースを貼り付けるか、UTF-8 の SVG ファイルを開きます。
- 「SVG を最適化」を実行し、プレビューとバイト数を比較します。
- SVG をダウンロードするか、結果を展開してソースを確認・コピーします。
ベクターマークアップを最適化する
SVG には見える図形以外にも、エディターのメタデータや冗長な描画命令が含まれる場合があります。最適化はマークアップを書き換え、不要なバイトを減らします。
SVGO を使用し、座標精度は小数点以下 3 桁で、viewBox と ID を保持します。最終環境で比較できるよう元のソースも残してください。
変わる可能性があるもの
最適化でメタデータを除き、描画命令を簡略化できます。座標を小数点以下 3 桁にすると、特に小さい画像や大きく拡大した画像で形がわずかに変わる場合があります。
viewBox はレスポンシブなサイズに使われ、ID は図形、スタイル、周囲のコードから参照されることがあります。この設定は短縮・削除せず保持します。
<svg viewBox="0 0 10 10"><metadata>demo</metadata><path d="M0 0 L10 10"/></svg><svg viewBox="0 0 10 10"><path d="m0 0 10 10"/></svg>メタデータ除去とコンパクトなパスを示す省略例です。ダウンロード出力には SVG 名前空間も含まれます。
プレビューと埋め込み
プレビューはページのマークアップに直接挿入せず、分離された画像として読み込みます。アプリ内のインライン SVG と動作が違う場合があります。
最適化はサニタイズではありません。信頼できない SVG をインライン埋め込みする前に確認し、周囲の文書に依存するスタイル、参照、動作をテストしてください。
出力を確認・保存する
ダウンロードは optimized.svg を保存します。結果を展開すると生成ソースとコピーボタンが表示されます。バイト数が減っただけでは見た目の同等性は証明できません。
PNG、JPEG、WebP の静止画は 20 MiB、2,400 万画素、一辺 8,192 ピクセルまで。Base64 は 2 MiB、SVG は 1 MiB。ファイル検査は 1 GiB までで、先頭 256 バイトのみ読み取ります。コーデックの対応はブラウザーによって異なります。ファイルはアップロードしません。
よくある質問
最適化後の SVG は安全にインライン使用できますか？
最適化はソースのサニタイズを行いません。信頼できない要素、属性、URL、スタイルを確認してから埋め込んでください。
viewBox と ID は保持されますか？
はい。この設定では保持します。ただし他のマークアップは書き換わるため、使用先で参照とスタイルを確認してください。
最適化で見た目が変わることはありますか？
座標の丸めや構造の書き換えが描画に影響する場合があります。プレビューを比較し、実際の使用先でテストしてください。
プレビューと自分のページで違って見えるのは？
画像プレビューは周囲の CSS やインライン SVG の動作を共有しません。外部の文脈や文書全体への参照が影響する場合があります。
コピーボタンはどこにありますか？
最適化後、プレビューの下にある結果を展開すると、SVG ソースとコピーボタンがあります。SVG のダウンロードはプレビューの上から行えます。