SVG を Data URI に変換

SVG を data URI に変換する方法

1. SVG のマークアップを テキスト ボックスに貼り付けます。.svg ファイルは任意のテキストエディターで開けばコピーできます。ボックスには最初からサンプルのアイコンが入っています。
2. MIME タイプ はすでに image/svg+xml に、エンコード方式 は 最適化 SVG に設定されています。
3. オプションの下の表を確認します。Base64、URL エンコード、最適化 SVG のそれぞれについて URI の長さと gzip 後のサイズが並び、最小のものに印が付き、各行に 使用 ボタンがあります。
4. 出力形式 を選びます。生の Data URI、CSS の url()、HTML の <img>、HTML の <a>、Markdown から選べます。その後 出力をコピー します。

ファイルから モードで .svg をドロップすることもできます。その場合は、ファイルをそのまま Base64 または URL エンコードします。最適化版と比較表を使うには、マークアップがテキストボックスに入っている必要があります。

Base64 と URL エンコードの SVG のサイズ比較

組み込みのサンプル（角丸の四角形、円、線からなる 309 バイトのアイコン）では、表は次のようになります。

単純な URL エンコードは、そのままでは最も長くなります。スペース、引用符、<、>、改行がどれも 3 文字になるからです。ところが gzip 後は Base64 を大きく引き離します。マークアップは繰り返しの多い構造を保っていますが、Base64 はそれをかき混ぜてしまうからです。スタイルシートはほぼ必ず圧縮して配信されるので、ユーザーに届くのは gzip 後の列の値です。

最適化 SVG はどちらの列でも最小です。103 バイトの小さな三角形アイコンでも差は同じで、Base64 が 166 文字、URL エンコードが 172 文字、最適化版が 136 文字です。アイコン一式での比較は SVG を Base64 に にあります。

「最適化 SVG」が行うこと

最適化ではマークアップに 4 つの変更を加えます。

1. 改行を含む連続した空白をすべて 1 つのスペースにまとめ、両端を切り詰めます。
2. " を ' に置き換えます。ただし、SVG にもともと ' が含まれていない場合に限ります。
3. encodeURIComponent でパーセントエンコードした後、URI 内で安全な文字（スペース、=、:、/、,、;）を元に戻します。
4. 残ったエスケープを小文字で書きます（%3C ではなく %3c）。こうすると gzip がわずかに効きやすくなり、サンプルでは 222 バイトが 220 バイトになります。

三角形アイコンの結果は次のとおりです。

data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M8 1 15 15H1z' fill='%23e33'/%3e%3c/svg%3e

色の # は %23 になっています。このエスケープは必須です。エスケープされていない # は URL のフラグメントの開始を意味し、それ以降はすべて黙って捨てられます。

引用符と使う場所のルール

最適化した出力には一重引用符、生のスペース、生の括弧が含まれます。二重引用符の中なら問題ありませんが、それ以外の場所では使えません。

.icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' ...%3e"); }

<img src="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' ...%3e" alt="">

引用符なしの url(...) はスペースで壊れ、一重引用符で囲んだ属性は最初の ' で終わってしまいます。URI を JavaScript で組み立てる場合、テンプレートエンジンで挿入する場合、引用符を書き換えるシステムに貼り付ける場合は、Base64 のほうが安全です。英字、数字、+、/、= しか含まないので、どんな場所でも壊れません。切り替えるには表の 使用 ボタンを使ってください。

ほかの制限は小さなものです。最適化 SVG は常に UTF-8 で、ほかの文字コードを選んでも警告を出して無視します。空白をまとめると、空白を保持する <text> 要素のテキストが変わることがあります。そして、画像として使う SVG はすべてそうですが、ルート要素に xmlns="http://www.w3.org/2000/svg" が必要です。

JavaScript での最適化

同じ変換は数行で書けるので、ビルドスクリプトや CSS-in-JS で使えます。

function svgToDataUri(svg) {
  let s = svg.trim().replace(/\s+/g, " ");
  if (!s.includes("'")) s = s.replaceAll('"', "'");
  const keep = { "%20": " ", "%3D": "=", "%3A": ":", "%2F": "/", "%2C": ",", "%3B": ";" };
  return "data:image/svg+xml," + encodeURIComponent(s)
    .replace(/%[0-9A-F]{2}/g, m => keep[m] || m.toLowerCase());
}

これで上に示した三角形の URI が得られます。ブラウザと Node でのエンコードについては JavaScript での Base64 で詳しく解説しています。既存の SVG data URI を読むには、Base64 から SVG か Data URI パーサー に貼り付けてください。

よくある質問