Skip to content

Instantly share code, notes, and snippets.

@leejordan
Last active July 26, 2016 10:32
Show Gist options
  • Save leejordan/01b7ce9ed7c9cef42482bbce8889710a to your computer and use it in GitHub Desktop.
Save leejordan/01b7ce9ed7c9cef42482bbce8889710a to your computer and use it in GitHub Desktop.
helper for encoding svgs into data-uri format with the highest cross browser compatibility possible
Based on the findings of this post for the most cross browser compatible svg data-uri encoding:
https://codepen.io/tigt/post/optimizing-svgs-in-data-uris
Save the following in a file (no file extension required):
s/"/'/g
s/#/%23/g
s/</%3C/g
s/>/%3E/g
s/&/%26/g
Then run this in the terminal:
sed -f <file with patterns> <file to change>
## LESS mixin:
.svg-data-uri-bg(@svg) {
@svg-quotes: replace(~"@{svg}", '"', "'", "g");
@svg-hash: replace(~"@{svg-quotes}", "#", "%23", "g");
@svg-less: replace(~"@{svg-hash}", "<", "%3C", "g");
@svg-more: replace(~"@{svg-less}", ">", "%3E", "g");
@svg-amp: replace(~"@{svg-more}", "&", "%26", "g");
background-image: url(~"data:image/svg+xml, @{svg-amp}");
}
Given an svg as an argument, will output the correctly formatted data-uri as background-image url
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment