Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/VectorLogoZone/awesome-svg

Awesome SVG resources
https://github.com/VectorLogoZone/awesome-svg

List: awesome-svg

svg svg-icon

Last synced: 16 days ago
JSON representation

Awesome SVG resources

Awesome Lists containing this project

README 

        
# Awesome SVG [SVG Logo](https://www.w3.org/Graphics/SVG/)



[![Awesome](https://awesome.re/badge.svg)](https://awesome.re)



## Reference



 * [SVG 1.1](https://www.w3.org/TR/SVG11/) - the current standard

 * [SVG 2.0 (draft)](https://svgwg.org/svg2-draft/) - the next version

 * [W3C's SVG Page](https://www.w3.org/Graphics/SVG/) - home page of the group in charge of the standards

 * [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG) - Mozilla's SVG reference, nicely hyperlinks and with lots of examples.

 * [Wikipedia's SVG page](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics) - nice history and overview



## Editors

 * [Inkscape](https://inkscape.org/) - open source, but no Mac support

 * Adobe [Illustrator](https://www.adobe.com/products/illustrator.html) - powerful, but expensive, and no Linux support

 * [Vecta.io](https://vecta.io/) - browser-based, looks promising

 * [Sketch](https://www.sketchapp.com/) - commerical though not too expensive, but Mac-only



## Conversion Tools

 * [AutoTracer](https://www.autotracer.org/) - convert from raster (JPEG, PNG, GIF) to SVG

 * [svg2raster](https://www.fileformat.info/convert/image/svg2raster.htm) - convert from SVG to PNG

 * [favicon](https://favicon.fileformat.info/) - convert from SVG to ico.  Works great for using an [SVG emoji](https://github.com/FileFormatInfo/awesome-emoji#awesome-images) as a favicon.

 * [iconizr](https://iconizr.com/) - convert a collection of SVGs into a CSS icon kit

 * [font-blast](https://github.com/eugene1g/font-blast) - convert an SVG font into individual SVGs

 * [svg2android](https://inloop.github.io/svg2android/) - convert to Android's VectorDrawable XML format

 * [PDF to SVG](http://pramodhkp.com/index.html) - convert each page of a PDF to an SVG



## Icons



  * [svg-icon](https://github.com/leungwensen/svg-icon) - includes icons from [over 30](https://github.com/leungwensen/svg-icon#svg-icon-collections) different sources.

  * [GlyphSearch](https://glyphsearch.com/) - similar to svg-icon though only 9 sources, but has a nice search function

  * [The Noun Project](https://thenounproject.com/) - commercial, but boy do they have a *lot* of icons

  * [icon section on awesome-design](https://github.com/oscarotero/awesome-design#svg-icons)



## Logos

[LogoSear.ch](https://logosear.ch/) is a great search engine just for logos, with the list of [sources](https://logosear.ch/sources/index.html) and [alternatives](https://logosear.ch/alternatives/index.html).



## Programming Libraries

 * [D3.js](https://d3js.org/) - generate/manipulate SVGs from JavaScript. A great way to do graphs and diagrams: be sure to check out the [gallery](https://github.com/d3/d3/wiki/Gallery)

 * [SnapSVG](http://snapsvg.io/) - animate your SVGs with JavaScript

  * [SVG-Edit](https://github.com/SVG-Edit/svgedit) - open-source JavaScript editor to embed in your app or website

  * [SVG-Morpheus](http://alexk111.github.io/SVG-Morpheus/) - morph from one icon to another



## Compression

 * svgcleaner [cli](https://github.com/RazrFalcon/svgcleaner) | [GUI](https://github.com/RazrFalcon/svgcleaner-gui) - compresses the most, and much faster than the others

 * SVGO [cli](https://github.com/svg/svgo) | [web](https://jakearchibald.github.io/svgomg/) - written in JavaScript and plugs into a whole bunch of different build tools.

 * [scour](https://github.com/scour-project/scour) - Python

 * [nano](https://vecta.io/nano)



## Can I Use



 * 94.6% [basic support](https://caniuse.com/#feat=svg) - inside an embed or object element

 * 94.5% [HTML img](https://caniuse.com/#feat=svg-img)

 * 94.5% [css background](https://caniuse.com/#feat=svg-css)

 * 94.5% [inline in HTML5](https://caniuse.com/#feat=svg-html5)

 * 93.9% [filters](https://caniuse.com/#feat=svg-filters)

 * 88.4% [effects for HTML](https://caniuse.com/#feat=svg)

 * 88.0% [SMIL animation](https://caniuse.com/#feat=svg-smil) - all except IE

 * 18.4% [favicons](https://caniuse.com/#feat=link-icon-svg)



## Other Lists

 * css-tricks' [Compendium of SVG Information](https://css-tricks.com/mega-list-svg-information/) - this site also a ton of [great articles on using SVGs](https://css-tricks.com/tag/svg/)

 * Willian Justen's [awesome-svg](https://github.com/willianjusten/awesome-svg) - not as curated as my awesome list, but still a ton a interesting links