helper for encoding svgs into data-uri format with the highest cross browser compatibility possible

gistfile1.txt

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