Fluid SVG Polyfill

npm Build Status Coverage Status

Fix SVG responsive scaling in IE 11 and below using the “padding hack” technique. Inspired by https://gist.github.com/Heydon/369185d08d9ce2426f01863625e95525

More info on “padding hack” technique:

  • http://alistapart.com/article/creating-intrinsic-ratios-for-video
  • https://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/
  • https://css-tricks.com/scale-svg/

Install

$ yarn add @threespot/fluid-svg-polyfill

Usage

import fluidSVGPolyfill from "@threespot/fluid-svg-polyfill";

// Add “is-fluid” class to any SVGs that are fluid width
const svgs = document.querySelectorAll('.is-fluid');

svgs.forEach( el => fluidSVGPolyfill(el) );

You can also specify a custom class to add to the wrapper <div>:

fluidSVGPolyfill(el, { wrapperClass: "custom-class" });

License

This is free software and may be redistributed under the terms of the MIT license.

About Threespot

Threespot is an independent digital agency hell-bent on helping those, and only those, who are committed to helping others. Find out more at https://www.threespot.com.

Threespot