https://github.com/axe312ger/responsive-svg-sprites
:rocket: :triangular_ruler: Demonstration, example code and workflow blueprint for cross browser compatible responsive svg sprites
https://github.com/axe312ger/responsive-svg-sprites
icons proof svg-sprites svgo
Last synced: 10 months ago
JSON representation
:rocket: :triangular_ruler: Demonstration, example code and workflow blueprint for cross browser compatible responsive svg sprites
- Host: GitHub
- URL: https://github.com/axe312ger/responsive-svg-sprites
- Owner: axe312ger
- Created: 2016-06-21T21:28:13.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2016-07-03T04:06:41.000Z (almost 10 years ago)
- Last Synced: 2025-06-20T23:06:07.942Z (10 months ago)
- Topics: icons, proof, svg-sprites, svgo
- Language: JavaScript
- Homepage: https://axe312ger.github.io/responsive-svg-sprites/
- Size: 47.9 KB
- Stars: 5
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
responsive-svg-sprites
===============
> 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 :)
## :rocket: ToDo for publication
* [x] 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
* [x] add custom example file
* [x] add responsive methods to example
* [x] add proper ie polyfill to example
* [x] do cross browsers testing to proof this
* [x] 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
## Install
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
```
## Try
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](https://axe312ger.github.io/responsive-svg-sprites/). It contains exactly these files.
## Screenshots
Want a quick proof that it works? Have a closer look to the [cross browser testing screenshots issue](https://github.com/axe312ger/responsive-svg-sprites/issues/1).
[](https://github.com/axe312ger/responsive-svg-sprites/issues/1)
## Links
* The responsive approach in this repo is very similar to [this wonderful article of Sara Soueidan](http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/).
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](https://sarasoueidan.com/blog/svg-coordinate-systems/). Learn how viewport, viewBox, and preserveAspectRatio relate to each other.
## Credits
Beautiful example icons by [Oliver Pitsch & Smashing Magazine](https://www.smashingmagazine.com/2016/03/freebie-barista-iconset-50-icons-eps-png-svg/)
**This could not even barely work without the work of the following awesome developers:**
* Kir Belevich & contributors with the svg optimization tool [SVGO](https://github.com/svg/svgo)
* Joschi Kuphal & contributors with the svg sprite generation monster [svg-sprite](Joschi Kuphal)