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

A small function in response to Taylor Hunt's blog post "Optimizing svgs in data uris"* allowing you to skip base64 encoding and simply paste the SVG markup right in the CSS.

Updates:

– auto-add missing namespace

– charset=utf8 removed from output

Comments

  1. Awesome! Thanks for this.

  2. Update! The first version had a problem with Sass throwing "SystemStackError: stack level too deep" when encoding large SVG's – this version chunks up the SVG encoding and now it seems to be fine... Let me know if you encounter problems :-)

    (notify @noahblon)

  3. Thanks @jakob-e for this really great tool :)

    One question though: Is the " ;charset=utf8 " part really needed - because in https://codepen.io/tigt/post/optimizing-svgs-in-data-uris Taylor Hunt writes that the browser should use the character set of the containing document without it instead?

  4. @PascalReintjens

    I'll have to look into if a document charset overrides a charset defined on the URI.

    • If it does – keeping it makes no sense
    • If not – I prefer to keep it in

    I doubt charset will matter in 99% of all cases but when you encounter the one that does – having it could save you a lot of time figuring out why-not-work.

    Thanks :-)

  5. in old_svg-url, % should also be urlEncoded as %25

  6. @matze

    I would not recommend you to use the non-loop version (the stack level problem has only been fixed in LibSass – Ruby could fail).

    I'm not sure encoding is needed on % see this example (works without in Chrome, Opera, Safari and Firefox – not tested in IE ). Do you have an example on a SVG that fails?... it could be a problem with something else.

  7. @PascalReintjens did some more tests... and removed charset from output

  8. @jakeob-e Yeah that demo doesn't work in IE. I tested in edge and your version didn't work whereas this forked version that also replaces % worked: https://codepen.io/matze/pen/wzBEVd?editors=0100

  9. @matze Thanks – herby added :-)

    Seems like IE11 needs to encode { and } too

  10. Thanks @jakob-e for the notification :)

    For me the online version still outputs charset=utf8 - is that a fault or did you revert the change?

  11. @PascalReintjens

    My bad – I was adding some extra replacements and it slipped back – Thanks :-)

  12. Hi @jakob-e, this is one of the most ingenious Sass mixins I've seen and been using it for quite some time.

    I was able to use a simplified approach for the same result, using built-in Sass functions: http://www.sassmeister.com/gist/indrekpaas/4d6dfa5c29da805219d4149352c4703b. Although it's missing the namespace checking, it could be added with str-insert function.

    Performance, however, doesn't compare with large SVGs -- a 12,372B image compiles 4s on average as opposed to sub-second speeds with your approach. Difference is less evident with smaller SVGs.

    Did you encountered any performance issues with your mixin and if so, how did you address these?

    Cheers!

  13. @indrekpaas

    Encoding larger files ~2200+ characters caused an error "stack level too deep" due to the large number of str-replace recursions. The problem is we have no offset on str-index to help minimize this – why I ended up with the "chunk" solution. I also made attempts using maps – but it seemed less performant (newer compilers could have changed this – haven't tested)

    Here is an example – encoding 61,400 characters Sassmeister or CodePen IMO it performs within what is to be expected :-)

    Any optimizations are more than welcome – (just make it work on ruby 3.4.21 +)

    Thanks :-)

  14. @jakob-e Can you also tell, why are you encoding a single & among other reserved characters? Cheers!

  15. @indrekpaas

    Old habit I guess. Actually I can't think of a case where it makes sense in a background-image context – as you can't use external image references etc. that could hold a query string in the xlink:href. I'm moving it to the maybe section – should a future case require it back. Thanks for pointing it out :-)

    Off-topic: If you are not familiar with SVGOMG I recommend you to give it a try.

  16. thank you!

  17. This is awesome – on having problems with linebreaks in the XML, I also recommend adding

     $chunk: str-replace($chunk,"\A", "");
    

    to replace those. Fixed IE errors. Note the \A char for linebreaks; that's not very good documented, found it via How I made a Sass debug function

  18. This just saved my bacon on a project, thanks!

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

You must be logged in to comment.
Loading...
Loading...