Svg background

[Snugug]

Moving for Linear Gradients to SVG. Based off of oddbird/susy#440 and oddbird/susy#436. Fabulous work done there and much credit to @g12n for filing the issue and doing the heavy lifting there to give me the inspiration to do it here.

[scottkellum]

✨ ✨ ✨ ✨ ✨

[g12n]

Oh Wow! Cool!

[jakob-e]

It may not be super important to do optimizations on a debug feature–but you can skip url-encoding by:

1. Replacing < and > with %3C and %3E
2. Switching single and double quotes (single quotes does not need encoding)

$SVG: "%3Csvg xmlns='http://www.w3.org/2000/svg'%3E";

3. Replacing color hashmarks with %23

$Column-Color: $color;
$Inverse-Column-Color: mix(black, $color, 15%) + unquote("");
$Gutter-Color: mix(white, $color, 25%) + unquote("");

$Inverse-Column-Color: if(str-index($Inverse-Column-Color, '#'), '%23' + str-splice($Inverse-Column-Color, 2), $Inverse-Column-Color);
$Gutter-Color: if(str-index($Gutter-Color, '#'), '%23' + str-splice($Gutter-Color, 2), $Gutter-Color);

background-build mixin without url-encode (not tested)

Optimizing SVGs in data URIs by Taylor Hunt