CSSだけでSVGの色を変える

SVGで作った単色アイコンを、CSSで色を変えたいと思って調べてみたが、CSS単体でやるのは基本的に無理っぽい。html内に SVGを直接書いて useを使って CSSで色指定、というのが一番近かった。が、background-image とかでは無理みたい。
そんで更に調べてみてsass/scssを使って無理矢理やってみた。

backgroundでsvgを表示する方法に

?

1	background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F....

って方法があるらしい。 で、svgのタグ内に style="fill: color"とやればcolor色に染まるという
なので、たとえば

?

1 2 3

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">   <circle cx="50" cy="50" r="50"/> </svg>

こんな感じのは、<svg ...></svg>タグとdata本文(circle)部分に分ける。width/heightもdata部分とセットに変数化。タグは全てurlエンコードしたもの。

?

1 2 3 4 5

$samplesvg: (width: 100, height:100, img:"%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%2F%3E");   @function svgimg ($svgdata, $color) {  @return "data:image/svg+xml,%3Csvg%20style%3D%22fill%3A%23"+$color+"%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22"+map-get($svgdata,width)+"%22%20height%3D%22"+map-get($svgdata,height)+"%22%3E"+map-get($svgdata,img)+"%3C%2Fsvg%3E"; }

これをscssで呼び出す場合は

?

1	background: url(svgimg($samplesvg, "ff0000")) center no-repeat;

これで赤い丸がバックグラウンドに表示される（はず）

-- 3rd Oct. 2018 訂正
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
だと旨く表示されないことがあったので、
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
のように訂正。

?

1 2 3

@function svgimg ($svgdata, $color) {  @return "data:image/svg+xml,%3Csvg%20style%3D%22fill%3A%23"+$color+"%22%20xmlns%3d%22http%3a%2f%2fwww%2ew3%2eorg%2f2000%2fsvg%22%20viewBox%3d%220%200%20"+map-get($svgdata,width)+"%20"+map-get($svgdata,height)+"%22%3E"+map-get($svgdata,img)+"%3C%2Fsvg%3E"; }