SASS mixin for responsive SVGs

After listening to Sara Soueida on Shop Talk Show we finally have a reliable way to use SVGs in responsive sites, our old method was to yell at the SVG and change every possible value within the SVG and in CSS until it looked right in most browsers.

She goes into a ton of detail in this amazing post which we use as the basis of our mixin code:

There’s A LOT in this post, the section we’re most interested in is titled SVG embedded using iframes. Apparently iframes use the same technique as inline SVGs which is the method we’re using. Using SVGs inline is preferred because it gives you much more control with CSS.

Take some time to understand how it works before blindly pasting the code below into your site.

You need to have a container around your SVG (as outlined in Sara’s post). You call the mixin within the container in your SASS, so if your container had a class of “svg-container” you’d do something like this:

It took me a while to get this working so hopefully this snippet saves someone else some time.

Happy coding ya’ll

Enable Javascript