SVGをCSSデータURIに

SVG to CSS Data URI

SVGをCSS背景用のデータURIに符号化し、必要な文字だけをエスケープして短く保ちます。

SVGを、スタイルシートに貼れるデータURIに変えます。Base64ではなくURLエンコードするのは、そのほうが小さく、しかも読める形で残るからです。3つのサイズを並べて示し、符号化したURIから描画して動くことを確かめられるようにし、データURIになった途端にSVGが何も描かなくなる数少ない原因についても警告します。

🔒 ブラウザの中だけで動きますsvgcssdata-uriencode

SVG を置いてください

または下でそのまま書き換えてください。

SVG

先に最小化XML 宣言、doctype、コメント、連続した空白を取り除きます。データ URI の中ではどれも無駄な重さです。

プレビュー

エンコード後の URI から直接描いているので、ここに見えればスタイルシートでも見えます。

サイズ

元の SVG

165 B

URL エンコード

198 B

Base64

246 B

ここでは URL エンコードのほうが Base64 より 19.5% 小さいです。

Base64 は入力が何であれ一律 33⅓% 増えます。SVG はテキストで、CSS の url() の中でエスケープが要る文字はごくわずかなので、URL エンコードはたいてい元のファイルの 10% 増しあたりに収まります。しかもスタイルシートの中で読めて、grep でき、diff にも残ります。Base64 はそうではありません。

結果

Base64 に切り替えるパーセントエンコードした URI を受け付けない、まれな相手のためのものです。必ず大きくなります。

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 12 L10 18 L20 6'/%3E%3C/svg%3E");

%, <, >, #と括弧をいくつかだけエスケープします。SVG の二重引用符は一重に置き換えるので、CSS の文字列は安全に二重引用符を使えます。いちばん大事なのは # です。fill="#fff" の中でエスケープしないと、そこから断片識別子が始まって URL が切れ、どこにもエラーが出ないまま何も描かれなくなります。

ラスターが必要なら SVG を PNG に変換が好きな倍率で PNG にします。エンコードの前に SVG を小さくしたいなら SVG 最適化がパスデータを書き直します。

使い方

SVGを貼り付けるか、置きます
ソース欄は編集できるので、ファイルに戻らずここでマークアップを直せます。例は線で描いたアイコンで、よくある場合です。
何よりも先に警告を読みます
誰もが引っかかるのは`xmlns`の欠落です。HTMLの中にインラインで置くなら問題になりませんが、データURIは独立したXML文書として解析されるので、これがないとブラウザは何も描かず、何も報告しません。ほかの警告は、外部画像、スクリプト、viewBoxのないパーセント指定の大きさを扱います。
プレビューを確かめます
ソースからではなく、符号化したURI自身から描いているので、その枠にアイコンが出ればスタイルシートでも出ます。枠が空ならURIが壊れていて、たいていは上の警告が理由を言っています。
プロパティを選んでコピーします
宣言はプロパティによって変わります。`background-image`、`mask-image`、`content`、あるいは素の`src`です。パーセントエンコードされたURIを受け取れないまれな相手のためにBase64も用意していますが、そちらは必ず大きくなります。

よくある質問

なぜBase64ではないのですか。みんなBase64を使っています。

Base64はどんな入力でも一律に33⅓%増えます。3バイトを4バイトにするからです。SVGはテキストで、CSSの`url()`の中で実際にエスケープが要るのは`%`、`<`、`>`、`#`といくつかの括弧だけなので、URLエンコードなら元のファイルから10%増しあたりに収まるのがふつうです。スタイルシートの中でgrepでき、差分も読める形で残ります。あなたのファイルについての両方の数字はパネルに出ます。

アイコンが消えたのに、どこにもエラーが出ません。

ほぼ必ず、エスケープしていない`#`です。`fill="#fff"`のハッシュはフラグメント識別子の始まりとして扱われるので、URLはそこで切られ、ブラウザはSVGではない何かを取りに行きます。しかも黙って行きます。この符号化はそれをエスケープします。URIを手で書いたのなら、まずそこを確かめてください。

データURIの中のSVGをアニメーションさせたり、スクリプトを動かしたりできますか。

CSSの背景としてはできません。その形で読み込まれたSVGは制限された静的なモードで動きます。スクリプトも`foreignObject`も外部リソースもなく、外側のページのCSSは中に届きません。宣言的なSMILのアニメーションは、エンジンによって動くこともあれば動かないこともあります。そのどれかが必要なら、SVGを文書の中にインラインで置いてください。

データURIが正しくないのはどんなときですか。

SVGが大きいとき、あるいは2、3か所より多くで使われるときです。データURIは別々にキャッシュできないので、そのスタイルシートを配るページはどれもアイコンをもう一度配ることになり、CSSに埋め込んだ30KBの挿絵はクリティカルパス上の30KBです。ここが向いているのは小さなアイコンやパターンで、それより大きいものはファイルか、スプライトにするほうがよくなります。