Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

SVG as data URI not rendering

SVG as data URI not rendering

Problem

It's probably just a Syntax error but I can't find any thorough references on this kind of usage. Chrome is overstriking my background property, so I've obviously offended something.

http://jsfiddle.net/YbA39/2/

I want what's in the red box (an svg css background) to render just like the inline svg in the html. Simple, right?

Don't say it can't be done! My inspiration is this: http://jsfiddle.net/estelle/SJjJb/

Problem courtesy of: Ben

Solution

You haven't escaped the '#' characters in the url() syntax. And it's 'viewBox' not 'viewbox'.

Here's something that works: http://jsfiddle.net/YbA39/3/ (just a quick urlescaped string).

Solution courtesy of: Erik Dahlström

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

SVG as data URI not rendering

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×