https://github.com/threespot/fluid-svg-polyfill
Polyfill to fix SVG scaling in IE11 and below using the “padding hack” technique
https://github.com/threespot/fluid-svg-polyfill
Last synced: 10 months ago
JSON representation
Polyfill to fix SVG scaling in IE11 and below using the “padding hack” technique
- Host: GitHub
- URL: https://github.com/threespot/fluid-svg-polyfill
- Owner: Threespot
- License: mit
- Created: 2018-03-29T16:28:05.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T09:33:33.000Z (over 3 years ago)
- Last Synced: 2025-08-03T22:38:00.410Z (10 months ago)
- Language: JavaScript
- Homepage: https://threespot.github.io/fluid-svg-polyfill/
- Size: 1.68 MB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Fluid SVG Polyfill
[](https://www.npmjs.com/package/@threespot/fluid-svg-polyfill)
[](https://travis-ci.org/Threespot/fluid-svg-polyfill)
[](https://coveralls.io/github/Threespot/fluid-svg-polyfill)
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
```bash
$ yarn add @threespot/fluid-svg-polyfill
```
## Usage
```js
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 `
`:
```js
fluidSVGPolyfill(el, { wrapperClass: "custom-class" });
```
## License
This is free software and may be redistributed under the terms of the [MIT license](https://github.com/Threespot/fluid-svg-polyfill/blob/master/LICENSE.md).
## 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](https://www.threespot.com).
[](https://www.threespot.com)