user profile image

Complete explanatory article on my site. (NOTE: this appears in Webkit only, due to limitations of DataURI strings with proper formatting in other browsers: see comments below). Cross-browser application would reference the SVGs as external files or Base64-encoded strings.


  1. Dudley, did you add this to the #retroTilesWeekend ? :)

  2. I only just learned about that, Sarah! I wasn't sure if 6th Century patterns would be considered "retro", but I'll add it now. :-)

  3. For a moment I was excited looking at your code: can you use readable SVG code in SCSS and it will compile to a proper data URI? But alas, no: all it does is escape the newlines, not special characters, so it doesn't even work on Firefox, let alone IE.

    (And it really shouldn't work on Chrome! If we want them to ever support target fragments in CSS image URLs, we need them to stop supporting an unescaped # in the middle of a data URI!)

    Perhaps someone who knows more about SCSS mix-ins than I do can come up with a proper encoding function...

  4. Oh, that's a very good point, Amelia, and totally on me for not cross-browser testing. It's a judgement call as to whether this method is more readable / useful than the alternatives, albeit limited to a single popular browser. I'll put a note to that effect on my blog - thanks!

  5. @AmeliaBR please look at this pen,
    @philippkuehn build a SCSS functions to urlencode the svg string

    I had tried it in my pen

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

You must be logged in to comment.