css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
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 !

  7. Sridhar @SridharMoningi on

    @yoksel, thank for the tool and effort.

    I am not sure, am I doing the right way or not. I have an svg image, Converted into SVG by using online tool, and got as below:

    Created with sketchtool.

    Later, using your tool to convert it to encoded, and ready css. Pasting the same css snippet in my code, but its not working. Can you please help me it.

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

You must be logged in to comment.