SVGをdataURLでCSSに埋め込み

SVGをCSSに埋め込む場合、インラインイメージとしてdataURLで埋め込めばいい。

その書式を書き留めておく。

オリジナルSVGコード

1×1pxのホワイト70%

<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1"><polygon fill="#fff" opacity="0.7" points="0 0 0 1 1 1 1 0 0 0"/></svg>

インラインイメージ用記述

background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221%22%20height%3D%221%22%3E%3Cpolygon%20fill%3D%22%23fff%22%20opacity%3D%220.7%22%20points%3D%220%200%200%201%201%201%201%200%200%200%22%2F%3E%3C%2Fsvg%3E');

簡単なdataURL変換機能

JavaScriptのencodeURIComponentで変換しています。