SVG to Data URI

使い方

1. 完全な SVG ドキュメントを入力欄に貼り付けます。
2. 空白整理のチェックを入れたままにすると、エンコード前にコメント除去と空白の圧縮を行います。
3. 「変換」を押します。2 つの出力が同時に表示され、編集のたびに更新されます。
4. 入力欄下のサイズ表示を見比べて、場面に合う形式を選びます。
5. background-image が必要なら、サイズ指定済みの CSS ブロックをコピーします。

よくある用途

• 小さなアイコンの inline 化 — 小さな画像のために追加リクエストを発生させません。
• メールや単一ファイルのページ — 外部ファイルを読み込めない環境でも画像を表示できます。
• CSS マスクとカーソル — パス解決が不要な画像値を指定できます。
• サイズの見積もり — 可読性とサイズのどちらを取るかを実測で判断できます。

よくある質問

Q: どちらの形式が小さいですか？ A: 元データによって変わります。Base64 は 3 バイトを 4 文字に増やしますが、URL エンコードは URL で安全でない文字だけを膨らませます。ステータス行に両方のサイズを出すので、習慣ではなく実測で選べます。

Q: CSS ブロックが Base64 を使うのはなぜですか？ A: Base64 には引用符付きの CSS 値でエスケープが必要な文字が含まれないため、圧縮ツールやプリプロセッサを通しても形が変わりません。URL エンコード版も使えますが、パーセント記号を特別扱いするツールもあります。

Q: スクリプト入りの SVG を inline 化できますか？ A: 技术上は可能ですが、background-image や img のような画像コンテキストではブラウザはスクリプトを実行しません。スクリプトが動くのは SVG を直接ドキュメントに埋め込んだ場合だけで、他人が作った SVG を確認すべき理由の 1 つです。