使い方
- .svg ファイルをドロップエリアにドロップするか、クリックして選択するか、画像を貼り付けます。
- SVG のマークアップ自体をエンコードするには「元の形式のまま」にします。ピクセル画像にしたい場合は、「変換形式」で PNG、JPEG、WebP のいずれかを選びます。
- ラスタライズする場合は、「最大幅」を設定してピクセルサイズを調整します。
- スタイルシートには CSS の背景画像の出力を、それ以外には data URI、Base64 文字列のみ、img タグ、Markdown のいずれかをコピーします。
data URI としての SVG
SVG（Scalable Vector Graphics、MIME タイプ image/svg+xml）は図形を XML テキストで記述するため、どのサイズでも鮮明に表示されます。Base64 は通常 PHN2Zy（<svg をエンコードしたもの）で始まり、ファイルが XML 宣言で始まる場合は PD94bWw で始まります。
SVG を画像として使う場合、ルート要素に xmlns="http://www.w3.org/2000/svg" が必要です。HTML からコピーしたインライン SVG にはこれがないことが多く、その場合 data URI には何も表示されません。また、画像モードでは外部リソースがブロックされるため、SVG 内の Web フォントやリンクされた画像は読み込まれません。先にテキストをパスに変換するか、それらのリソースを埋め込んでおいてください。
Base64 と URL エンコードのどちらを使うか
SVG はもともとテキストなので、data URI にマークアップをそのまま入れ、一部の文字（<、>、#、%、引用符）だけをパーセントエンコードすることもできます。CSS で使う一般的なアイコンなら、こちらのほうが Base64 より短く、gzip でもよく圧縮されます。引用符や特殊文字を壊してしまうシステムを経由する場合や、API が Base64 を要求する場合は、Base64 のほうが安全です。
/* Base64 */
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...");
/* パーセントエンコード */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");パーセントエンコード形式を作成するには、Data URI 生成ツールで「パーセントエンコード」を選択してください。
信頼できない SVG はサニタイズする
SVG には <script> 要素、onload などのイベントハンドラー属性、他のドキュメントへのリンクを含めることができます。<img> や CSS の背景で表示した SVG では、ブラウザはスクリプトを実行しません。しかし同じファイルを HTML にインラインで埋め込んだり、単独で開いたりすると、スクリプトが実行される可能性があります。ユーザーが SVG ファイルをアプリケーションにアップロードできる場合は、保存や埋め込みの前に DOMPurify などでサニタイズしてください。Base64 はマークアップをひと目ではわからなくするだけで、安全にするわけではありません。
よくある質問
SVG には Base64 と URL エンコードのどちらがよいですか？
CSS で使う SVG なら、通常は URL エンコードのほうが小さく、読みやすさも保てます。文字列が他のシステムを経由する場合や、API が Base64 を必須としている場合は、Base64 のほうが確実です。
SVG の data URI が表示されないのはなぜですか？
xmlns 属性がない、パーセントエンコードした URI で # がエスケープされていない、SVG が別ファイルからフォントや画像を読み込んでいる、の 3 つです。SVG を PNG の Base64 文字列に変換できますか？
はい。「変換形式」で PNG を選んでください。ブラウザが SVG をピクセルに描画します。「最大幅」オプションで結果を小さくすることもできます。