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で変換しています。 <br> input (改行も%0Aで変換されるので注意)

dataURL変換 CSS用 background-image

output