Skip to content

Instantly share code, notes, and snippets.

@roblevintennis
Last active May 7, 2017 20:20
Show Gist options
  • Save roblevintennis/865de775fb988bfad9a1 to your computer and use it in GitHub Desktop.
Save roblevintennis/865de775fb988bfad9a1 to your computer and use it in GitHub Desktop.
Responsive Inline SVGs Sass Mixin
$svg-container-namespace: '.svg-container';
//Give 'em' 1:1 responsive container by default
#{$svg-container-namespace} {
display: inline-block;
position: relative;
height: 0;
width: 100%;
padding: 0;
//Default for 1:1 aspect ratio
padding-bottom: 100%;
vertical-align: middle;
overflow: hidden;
}
//Pass in width / height without any length unit specifier (so we don't have to do sill strip unit wackiness!), and
//this will determine appropraite ratio for padding hack and deliver the conainter code.
//Ex. if you had W100 and H200 you'll get a `padding-bottom:200%`
//Preferably, put something like `viewBox="0 0 N N" preserveAspectRatio="xMinYMin meet"` on your SVG root element
@mixin svg-responsive ($width: 1, $height: 1, $suffix:"") {
$padding-bottom: percentage($height/$width);
#{$svg-container-namespace}-#{$suffix} {
padding-bottom: $padding-bottom;
}
}
@include svg-responsive (1, 2, "2x-height");
//You have to write this once in your code...just apply this class on all your SVGs and absolutely position them top left inline block:
.svg {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
@roblevintennis
Copy link
Author

Don't get it? Read my article overview

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