Targeting SVG with CSS

Question

Is there a way for me to target SVG with CSS? They appear like broken images in IE8 downwards and I'd like to hide them using modernizr e.g. I was hoping for something like...

.no-svg object[type=svg] {
  display:none;
}

I'm using this to embed SVG into my page as recommended in http://www.alistapart.com/articles/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii

<object type="image/svg+xml" 
  width="100" height="100" style="float:right" 
  data="http://blog.codedread.com/clipart/apple.svgz">
<span/></object>

Answer 1

The type attribute in your markup is image/svg+xml. Your attribute selector object[type=svg] looks for a type attribute which is exactly svg, so your object won't match.

You should specify the full MIME type as in your markup (you need the quotes here, or it won't work; see this spec for details):

.no-svg object[type="image/svg+xml"] {
  display:none;
}

Or if you'd like you can use a substring attribute selector, but I prefer the above:

.no-svg object[type*=svg] {
  display:none;
}