An example approach to successfully delivery responsive svgs to all browsers - because it was really time to document this.
Work In Progress - Even this readme :)
- add svgo config for proper minification
- describe single parts and usage
- describe how to properly prepare the svgs
- describe why symbol and the other polyfill are used
- add custom example file
- add responsive methods to example
- add proper ie polyfill to example
- do cross browsers testing to proof this
- create autopublish to github pages
- EXTRA: add animations & colorings to the icons
- EXTRA: postcss (just simply cssnext?) version
- EXTRA: add bad shaped svg files to demonstrate SVGO's power
This repo is meant as a demonstration and blueprint. It is not intended to be published to npm. So you need to clone it manually to your machine.
$ git clone git@github.com:axe312ger/responsive-svg-sprites.git
$ cd responsive-svg-sprites
$ npm install
The icons which are glued together by svg-sprite can be found in the icons folder. Feel free to add your own files.
The svg sprite is generated by simply running gulp or entering the following command to your command line.
$ npm run generate
All generated files can be located in the sprite folder. This includes the sprite itself, a sass file containing a map variable with the aspect ratios of every icon and an example with demonstrations how to use this in an actual project.
You can run the generated example(sprite/example/) with any kind of webserver. Or just visit the github.io page of this repository. It contains exactly these files.
Want a quick proof that it works? Have a closer look to the cross browser testing screenshots issue.
- The responsive approach in this repo is very similar to this wonderful article of Sara Soueidan. A good read if you want to get a deeper understanding of the techniques used.
- Another amazing writing of Sara is her blogpost about the svg coordinate system. Learn how viewport, viewBox, and preserveAspectRatio relate to each other.
Beautiful example icons by Oliver Pitsch & Smashing Magazine
This could not even barely work without the work of the following awesome developers:
- Kir Belevich & contributors with the svg optimization tool SVGO
- Joschi Kuphal & contributors with the svg sprite generation monster [svg-sprite](Joschi Kuphal)