CSS background SVG not displayed

Question

I have this off.svg icon which I want to insert through css:

<svg height="16" width="16" >
  <circle cx="8" cy="8" r="7"  fill="red" />
</svg>

The css:

.off-btn {
    background:url(../icons/off.svg)no-repeat;
  }

html:

<span class="off-btn" title="offline">offline</span>

But the svg icon does not shows up.

However when I saved off.svg as off.png and changed the css to:

.off-btn {
    background:url(../icons/off.png)no-repeat;
  }

The circle shows up. I test this on Chrome browser.

What is wrong here? How can I fix it?

Answer 1

you're missing the SVG namespace in the SVG file. If you try to load it in a browser it will tell you that.

<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" >
  <circle cx="8" cy="8" r="7"  fill="red" />
</svg>