Data URIs - Tricky Tricky

Published:

It’s a short and simple story, really. It starts on a search to find a solution for some cross browser problems with Data URIs. The first stop was the probably don't Base64 SVG article on CSS Tricks and ends on these quick examples.

Chrome and Safari

These two pals aren’t picky at all. They’re rather civil actually.

background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='5 5 24 24' fill='#000000'><path d='M10.743 11.68c-0.619-0.631-1.632-0.641-2.263-0.022s-0.641 1.632-0.022 2.263l6.274 6.4c0.619 0.631 1.632 0.641 2.263 0.022l6.526-6.4c0.631-0.619 0.641-1.632 0.022-2.263s-1.632-0.641-2.263-0.022l-5.383 5.279-5.154-5.257z'></path></svg>");

FireFox

The only difference here is that we encoded the # sign as %23 associated with the fill property’s hex color value.

From fill='#000000' to fill='%23000000'

background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='5 5 24 24' fill='%23000000'><path d='M10.743 11.68c-0.619-0.631-1.632-0.641-2.263-0.022s-0.641 1.632-0.022 2.263l6.274 6.4c0.619 0.631 1.632 0.641 2.263 0.022l6.526-6.4c0.631-0.619 0.641-1.632 0.022-2.263s-1.632-0.641-2.263-0.022l-5.383 5.279-5.154-5.257z'></path></svg>");

IE 11

Rather than encoding for base64 and removing the encoding type, we can encode the < as %3c, > as %3C, and # as %23. The final part that IE needs to feel warm and fuzzy is the full encoding declaration charset=utf8 as opposed to just setting the value, utf8. I haven’t tested Edge, but it “should” work. It works for all four browsers referenced in this post.

From data:image/svg+xml;utf8 to data:image/svg+xml;charset=utf8

From <svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='5 5 24 24' fill='%23000000'><path d='M10.743... to %3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='5 5 24 24' fill='%23000000'%3E%3Cpath d='M10.743...

From ...></path></svg> to ...%3E%3C/path%3E%3C/svg%3E

background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='5 5 24 24' fill='%23000000'%3E%3Cpath d='M10.743 11.68c-0.619-0.631-1.632-0.641-2.263-0.022s-0.641 1.632-0.022 2.263l6.274 6.4c0.619 0.631 1.632 0.641 2.263 0.022l6.526-6.4c0.631-0.619 0.641-1.632 0.022-2.263s-1.632-0.641-2.263-0.022l-5.383 5.279-5.154-5.257z'%3E%3C/path%3E%3C/svg%3E");

See the Pen Background SVG Data URI by Derick Montague (@BeyondHyper) on CodePen.

Resources