Responsive Svg Sprites

🚀 📐 Demonstration, example code and workflow blueprint for cross browser compatible responsive svg sprites
Alternatives To Responsive Svg Sprites
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Frontend Template27
7 years agoHTML
Simple responsive template
Leaven Responsive Menu10
5 years agoCSS
A responsive, mobile first, accessible navigation proposal for Genesis child themes.
Responsive Svg Sprites5
7 years ago1JavaScript
:rocket: :triangular_ruler: Demonstration, example code and workflow blueprint for cross browser compatible responsive svg sprites
Svg Icons Reseach5
8 years ago
Research on using SVG icons in real projects
Dynamic Sprites4
10 years agogpl-2.0Ruby
SASS mixin and sprite generator for responsive sprites
Responsive Compass Sprite3
8 years agomitCSS
Some utils for responsive compass sprite.
Responsive Css Image Sprites2
7 years agomit
How make an image sprite 100% responsive with css only
3 years ago9mitJavaScript
Responsive website icon simple Node API and CLI solution. Support multi-color(symbol) and single color(font) icons.
Responsive Assets2
10 years agoRuby
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 Portfolio1
2 years ago1HTML
A Bootstrap responsive portfolio
Alternatives To Responsive Svg Sprites
Select To Compare

Alternative Project Comparisons


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


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


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 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.




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)
Popular Sprites Projects
Popular Responsive Projects
Popular Media Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Cross Browser
Svg Sprites