Responsive Svg Sprites
| Project Name | Stars | Downloads | Repos Using This | Packages Using This | Most Recent Commit | Total Releases | Latest Release | Open Issues | License | Language |
|---|---|---|---|---|---|---|---|---|---|---|
| Frontend Template | 27 | 7 years ago | HTML | |||||||
| Simple responsive template | ||||||||||
| Leaven Responsive Menu | 10 | 5 years ago | CSS | |||||||
| A responsive, mobile first, accessible navigation proposal for Genesis child themes. | ||||||||||
| Responsive Svg Sprites | 5 | 7 years ago | 1 | JavaScript | ||||||
| :rocket: :triangular_ruler: Demonstration, example code and workflow blueprint for cross browser compatible responsive svg sprites | ||||||||||
| Svg Icons Reseach | 5 | 8 years ago | ||||||||
| Research on using SVG icons in real projects | ||||||||||
| Dynamic Sprites | 4 | 10 years ago | gpl-2.0 | Ruby | ||||||
| SASS mixin and sprite generator for responsive sprites | ||||||||||
| Responsive Compass Sprite | 3 | 8 years ago | mit | CSS | ||||||
| Some utils for responsive compass sprite. | ||||||||||
| Responsive Css Image Sprites | 2 | 7 years ago | mit | |||||||
| How make an image sprite 100% responsive with css only | ||||||||||
| Icon | 2 | 3 years ago | 9 | mit | JavaScript | |||||
| Responsive website icon simple Node API and CLI solution. Support multi-color(symbol) and single color(font) icons. | ||||||||||
| Responsive Assets | 2 | 10 years ago | Ruby | |||||||
| Complete and integrated set of tools facilitating development of cross-platform HTML5 projects. It provides everything from enforcing clear asset files structure, automatic sprite maps generation, to detection of desktop, tablet and mobile devices, retina displays, and dynamic (responsive) switching between them at runtime, based on the detected device. Everything seamlessly integrated into your IDE or OS. | ||||||||||
| Responsive Portfolio | 1 | 2 years ago | 1 | HTML | ||||||
| A Bootstrap responsive portfolio | ||||||||||
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 :)
🚀 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 [email protected]: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. It contains exactly these files.
Screenshots
Want a quick proof that it works? Have a closer look to the cross browser testing screenshots issue.
Links
- 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.
Credits
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)
