How use an SVG image as a background?

Question

I must be doing something wrong. The image was exported from illustrator as an SVG and (I'm not sure whether this is relevant or not) it does have some pixel data in it. Here's my JSFiddle example.

Note that going directly to the image, it shows up just fine: http://ykcreations.com/tv.svg

---

Edit: This does not work in Chrome or Safari but DOES in Firefox. Webkit issue?

Answer 1

There is a problem with your source SVG. See this updated Fiddle pointing to a different SVG file that works correctly: http://jsfiddle.net/wdW2K/2/

.tv {
  background: url("http://phrogz.net/svg/800x800.svg");
  width: 400px; height: 400px;
}​

Edit: Specifically, the problem appears to be that WebKit does not support <image> in an SVG used as a background. Modifying your file minimally to change the <image> to reference a local (non-data-uri) file, and adding a <circle/>, I was able to see both the image and circle when viewing the SVG directly in Chrome, but when used as a background image only the circle was visible.

This bug smells relevant.