cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
user profile image

We can use SVG in data URI, but it works for Webkits only. With encoding SVG in data URI works in all modern browsers! : )

Actual and more advanced version: http://yoksel.github.io/url-encoder/


  1. Useful tool, although you might want to add an extra line to collapse extra whitespace.

    By the way, firefox can handle SVG data URIs with much less encoding than this -- you usually only need to encode # as %23 and sometimes % as %25. In IE, not so much. I haven't been able to figure out which characters it doesn't like, so either full URL encoding or base64 encoding for IE.

    One other thing: I think some of my old examples also use data:image/svg+xml;utf8, and I honestly don't know where it came from, but the correct way to specify character encoding is data:image/svg+xml;charset=UTF-8, and IE won't render it with the other format.

  2. --- IE won't render it with the other format.

    I've tested it right now, SVG can be rendered in IE9 without character encoding at all, like this: data:image/svg+xml,%3Csvg%20...

  3. I made a quick test page to see if you could skip encoding various characters and ran it on BrowserStack.

    Apparently the lowest common denominator is where you only need to URL encode "#%<>[]^{|} and backtick (i.e. can skip spaces and !$&(),:;=?\, which "should" be encoded) and either don't specify character encoding or charset=UTF-8. Firefox/Opera don't seem to like #, but that's about it. Safari/Chrome don't care about anything.

  4. This is why I love web development, great community. This was so helpful!

  5. forked and tweaked it a bit to display the svg in a div, dynamically


  6. Thank you for this effort ! very useful !

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.