タイトルがちょっと何言ってるかわからないっすね・・・
svgをcssでバックグラウンドで用いたいとき、dataで色や形を変更するときにちょっと困ってました。
home.svg
<svg version="1.1" id="icon_home" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 13 14" style="enable-background:new 0 0 13 14.2;" xml:space="preserve">
<polygon class="st0" points="6.5,0 0,6.4 0,14.2 5.1,14.2 5.1,8.5 7.9,8.5 7.9,14.2 13,14.2 13,6.4 "/>
</svg>
これを
style.css
.icon-home {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 14'%3E%3Cpath fill='#fff' d='6.5,0 0,6.4 0,14.2 5.1,14.2 5.1,8.5 7.9,8.5 7.9,14.2 13,14.2 13,6.4'/%3E%3C/svg%3E")
このパスのデータはdに入っているんですが、
これはpolygonのパスなので、うまく表示されません。
polygonのpointsがsvgのdata形式で使えるようにする解決方法
d=""の頭にM、尾にzを入れると表示されるようです。
style.css
.icon-home {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 14'%3E%3Cpath fill='#fff' d='M6.5,0 0,6.4 0,14.2 5.1,14.2 5.1,8.5 7.9,8.5 7.9,14.2 13,14.2 13,6.4z'/%3E%3C/svg%3E")
ちなみに
svgの出力内容は結構バラバラだったりするんで、上記の方法だとうまく表示されない場合もあります。
統一された解決方法が見つかれば、また書き込むかもしれません( ´Д`)
まとめ
とりあえずsassでsvgのアイコンを、色変えたりちょこちょこしたいときにぶち当たった問題なので、
もし同じような問題が起きたら試してみてはいかがでしょうか。