SVGをBase64に変換

小さなSVGアイコンをデータURIとして埋め込むと、HTTPリクエストが1つ減り、スタイルシートやコンポーネントが自己完結します。このツールは、SVGファイルまたは貼り付けたSVGコードを、2種類のデータURI（マークアップを読みやすく保ちたいていより小さいURLエンコードと、Base64）に変換し、そのまま貼り付けられるCSSのbackground-imageとHTMLのimgスニペット、およびそれぞれのサイズを表示します。コードが本当にSVGかどうかを確認し、欠けているxmlns（これがないとデータURIは表示されません）も補います。

使い方

1. .svgファイルをドロップするか、SVGコードを貼り付けます。
2. 「軽く最小化」をオンにしておくと、XML宣言、コメント、余分な空白を取り除きます。
3. CSSとHTMLのスニペットで使うデータURIの種類を選びます。
4. 必要な結果をコピーします。サイズを見れば、どちらが短いか分かります。

計算式

URLエンコード：data:image/svg+xml, ＋ SVG（SVGに'がなければ"を'に変更）。%、#、<、>、{、}、&、"、\、^、`、|、制御文字、非ASCII文字だけをパーセントエンコード（UTF-8）。Base64：data:image/svg+xml;base64, ＋ UTF-8バイト列のBase64（3バイトにつき4文字）。

ブラウザは、引用符で囲んだurl("…")やsrc="…"の中にある、エスケープされていない空白、もう一方の種類の引用符、=、/を受け付けるため、必要なものだけをURLエンコードすれば短く保てます。#はフラグメントの開始になるので常にエスケープが必要で、%も同様です。最小化では空白を1つ残すため、<text>の内容は変わりません。

計算例

163バイトのテスト用SVGは、URLエンコードのデータURIでは202文字（2つの#が%23に、7つの<と>が%3Cまたは%3Eになります）ですが、Base64のデータURIでは246文字です。4 × ⌈163 ÷ 3⌉ ＝ 220文字のBase64に、26文字のプレフィックスが加わります。