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/

Comments

  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

    https://codepen.io/sophtwhere/pen/QKyokk

  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.
Loading...
Loading...