Skip to content

Instantly share code, notes, and snippets.

@christo8989
Last active February 7, 2019 17:44
Show Gist options
  • Save christo8989/0bf1aeeeac4e02c1db9bd4ea1ce2fbe9 to your computer and use it in GitHub Desktop.
Save christo8989/0bf1aeeeac4e02c1db9bd4ea1ce2fbe9 to your computer and use it in GitHub Desktop.
SASS mixin that optimizes the svg markup to a background style.
// Optimize svg text --> http://petercollingridge.appspot.com/svg-optimiser
// Helpfule Article --> https://css-tricks.com/using-svg
// Credit where credit is due --> https://codepen.io/jakob-e/pen/doMoML
// SVG Alignment and Aspect Ratio --> http://tutorials.jenkov.com/svg/svg-viewport-view-box.html
// Function to create an optimized svg url
// Version: 1.0.6 (plus my changes)
@mixin svg($svg){
width: 100%;
height: 100%;
background: svg-optimized($svg) no-repeat top left;
}
@function svg-optimized($svg){
// Add missing namespace
@if not str-index($svg,xmlns) {
$svg: str-replace($svg, '<svg','<svg xmlns="http://www.w3.org/2000/svg"');
}
// Chunk up string in order to avoid
// "stack level too deep" error
$encoded:'';
$slice: 2000;
$index: 0;
$loops: ceil(str-length($svg)/$slice);
@for $i from 1 through $loops {
$chunk: str-slice($svg, $index, $index + $slice - 1);
// Encode
$chunk: str-replace($chunk, '"', '\'');
$chunk: str-replace($chunk, '%', '%25');
$chunk: str-replace($chunk, '#', '%23');
$chunk: str-replace($chunk, '{', '%7B');
$chunk: str-replace($chunk, '}', '%7D');
$chunk: str-replace($chunk, '<', '%3C');
$chunk: str-replace($chunk, '>', '%3E');
// The maybe list
//
// Keep size and compile time down
// ... only add on documented fail
//
// $chunk: str-replace($chunk, '&', '%26');
// $chunk: str-replace($chunk, '|', '%7C');
// $chunk: str-replace($chunk, '[', '%5B');
// $chunk: str-replace($chunk, ']', '%5D');
// $chunk: str-replace($chunk, '^', '%5E');
// $chunk: str-replace($chunk, '`', '%60');
// $chunk: str-replace($chunk, ';', '%3B');
// $chunk: str-replace($chunk, '?', '%3F');
// $chunk: str-replace($chunk, ':', '%3A');
// $chunk: str-replace($chunk, '@', '%40');
// $chunk: str-replace($chunk, '=', '%3D');
$encoded: #{$encoded}#{$chunk};
$index: $index + $slice;
}
@return url("data:image/svg+xml,#{$encoded}");
}
// Helper function to replace characters in a string
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@return if($index,
str-slice($string, 1, $index - 1) + $replace +
str-replace(str-slice($string, $index +
str-length($search)), $search, $replace),
$string);
}
@import "./_svg-optimized.scss";
.logo {
@include svg("<svg> ... </svg>"); //use " or ' depending on your string.
}
@christo8989
Copy link
Author

If you want to bring it in via npm: https://github.com/christo8989/svg-optimized

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment