{"id":15396779,"url":"https://github.com/axe312ger/responsive-svg-sprites","last_synced_at":"2025-07-02T17:06:23.806Z","repository":{"id":71550033,"uuid":"61668386","full_name":"axe312ger/responsive-svg-sprites","owner":"axe312ger","description":":rocket: :triangular_ruler: Demonstration, example code and workflow blueprint for cross browser compatible responsive svg sprites","archived":false,"fork":false,"pushed_at":"2016-07-03T04:06:41.000Z","size":49,"stargazers_count":5,"open_issues_count":1,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-20T23:06:07.942Z","etag":null,"topics":["icons","proof","svg-sprites","svgo"],"latest_commit_sha":null,"homepage":"https://axe312ger.github.io/responsive-svg-sprites/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/axe312ger.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-06-21T21:28:13.000Z","updated_at":"2018-04-12T22:16:00.000Z","dependencies_parsed_at":"2023-06-13T16:30:18.690Z","dependency_job_id":null,"html_url":"https://github.com/axe312ger/responsive-svg-sprites","commit_stats":{"total_commits":16,"total_committers":1,"mean_commits":16.0,"dds":0.0,"last_synced_commit":"bebc546c91a4e377a57be5c4f524796a34816e17"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/axe312ger/responsive-svg-sprites","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/axe312ger%2Fresponsive-svg-sprites","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/axe312ger%2Fresponsive-svg-sprites/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/axe312ger%2Fresponsive-svg-sprites/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/axe312ger%2Fresponsive-svg-sprites/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/axe312ger","download_url":"https://codeload.github.com/axe312ger/responsive-svg-sprites/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/axe312ger%2Fresponsive-svg-sprites/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263182179,"owners_count":23426633,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["icons","proof","svg-sprites","svgo"],"created_at":"2024-10-01T15:34:53.911Z","updated_at":"2025-07-02T17:06:23.774Z","avatar_url":"https://github.com/axe312ger.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"responsive-svg-sprites\n===============\n\n\u003e An example approach to successfully delivery responsive svgs to all browsers - because it was really time to document this.\n\n\u003e Work In Progress - Even this readme :)\n\n## :rocket: ToDo for publication\n\n* [x] add svgo config for proper minification\n* [ ] describe single parts and usage\n* [ ] describe how to properly prepare the svgs\n* [ ] describe why symbol and the other polyfill are used\n* [x] add custom example file\n* [x] add responsive methods to example\n* [x] add proper ie polyfill to example\n* [x] do cross browsers testing to proof this\n* [x] create autopublish to github pages\n* [ ] EXTRA: add animations \u0026 colorings to the icons\n* [ ] EXTRA: postcss (just simply cssnext?) version\n* [ ] EXTRA: add bad shaped svg files to demonstrate SVGO's power\n\n## Install\n\nThis 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.\n\n```\n$ git clone git@github.com:axe312ger/responsive-svg-sprites.git\n$ cd responsive-svg-sprites\n$ npm install\n```\n\n## Try\n\nThe icons which are glued together by svg-sprite can be found in the `icons` folder. Feel free to add your own files.\n\nThe svg sprite is generated by simply running gulp or entering the following command to your command line.\n\n```\n$ npm run generate\n```\n\nAll 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.\n\nYou 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.\n\n## Screenshots\n\nWant 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).\n\n[![Overview](https://cloud.githubusercontent.com/assets/1737026/16320332/7b70cec8-3997-11e6-9045-aa669e2f8179.png)](https://github.com/axe312ger/responsive-svg-sprites/issues/1)\n## Links\n\n* 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/).\nA good read if you want to get a deeper understanding of the techniques used.\n* 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.\n\n## Credits\n\nBeautiful example icons by [Oliver Pitsch \u0026 Smashing Magazine](https://www.smashingmagazine.com/2016/03/freebie-barista-iconset-50-icons-eps-png-svg/)\n\n**This could not even barely work without the work of the following awesome developers:**\n\n* Kir Belevich \u0026 contributors with the svg optimization tool [SVGO](https://github.com/svg/svgo)\n* Joschi Kuphal \u0026 contributors with the svg sprite generation monster [svg-sprite](Joschi Kuphal)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faxe312ger%2Fresponsive-svg-sprites","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faxe312ger%2Fresponsive-svg-sprites","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faxe312ger%2Fresponsive-svg-sprites/lists"}