├── .editorconfig ├── .gitignore ├── .travis.yml ├── Gemfile ├── Gemfile.lock ├── Readme.md ├── ci_script.sh ├── contributing.md ├── logo.svg └── topics ├── Accessibility.md ├── Animation.md ├── Books.md ├── Downloads.md ├── Experiments.md ├── Filters.md ├── Follow-twitter.md ├── Gradients.md ├── Grunt-plugins.md ├── Gulp-plugins.md ├── Icons.md ├── Libraries.md ├── Masks-clips.md ├── Optimization-tools.md ├── Patterns.md ├── Podcasts.md ├── Responsive.md ├── Sites-using-svg.md ├── Slides.md ├── Snippets.md ├── Softwares.md ├── Sprites.md ├── Text.md ├── Tutorials.md ├── Videos.md └── groups.md /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | end_of_line = lf 8 | indent_size = 2 9 | indent_style = space 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | trim_trailing_whitespace = false 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.gem 2 | *.rbc 3 | /.config 4 | /coverage/ 5 | /InstalledFiles 6 | /pkg/ 7 | /spec/reports/ 8 | /spec/examples.txt 9 | /test/tmp/ 10 | /test/version_tmp/ 11 | /tmp/ 12 | 13 | # Used by dotenv library to load environment variables. 14 | # .env 15 | 16 | ## Specific to RubyMotion: 17 | .dat* 18 | .repl_history 19 | build/ 20 | *.bridgesupport 21 | build-iPhoneOS/ 22 | build-iPhoneSimulator/ 23 | 24 | ## Specific to RubyMotion (use of CocoaPods): 25 | # 26 | # We recommend against adding the Pods directory to your .gitignore. However 27 | # you should judge for yourself, the pros and cons are mentioned at: 28 | # https://guides.cocoapods.org/using/using-cocoapods.html#should-i-check-the-pods-directory-into-source-control 29 | # 30 | # vendor/Pods/ 31 | 32 | ## Documentation cache and generated files: 33 | /.yardoc/ 34 | /_yardoc/ 35 | /doc/ 36 | /rdoc/ 37 | *.json 38 | 39 | ## Environment normalization: 40 | /.bundle/ 41 | /vendor/bundle 42 | /lib/bundler/man/ 43 | 44 | # for a library or gem, you might want to ignore these files since the code is 45 | # intended to run in multiple environments; otherwise, check them in: 46 | # Gemfile.lock 47 | # .ruby-version 48 | # .ruby-gemset 49 | 50 | # unless supporting rvm < 1.11.0 or doing something fancy, ignore this: 51 | .rvmrc 52 | 53 | # Mac OS Files 54 | .DS_Store 55 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: ruby 2 | rvm: 3 | - 2.2 4 | 5 | before_script: 6 | - bundle 7 | - chmod +x ci_script.sh 8 | 9 | script: ./ci_script.sh 10 | 11 | branches: 12 | only: 13 | - master 14 | 15 | env: 16 | global: 17 | - NOKOGIRI_USE_SYSTEM_LIBRARIES=true # speeds up installation of html-proofer -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | gem 'awesome_bot' -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | awesome_bot (1.17.2) 5 | parallel (= 1.12.0) 6 | parallel (1.12.0) 7 | 8 | PLATFORMS 9 | ruby 10 | 11 | DEPENDENCIES 12 | awesome_bot 13 | 14 | BUNDLED WITH 15 | 1.16.0 16 | -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | Awesome SVG 2 | 3 | [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) [![Travis Build](https://travis-ci.org/willianjusten/awesome-svg.svg?branch=master)](https://travis-ci.org/willianjusten/awesome-svg) 4 | 5 | > A curated list of SVG. The main idea is that everyone can contribute here, so we can center all the informations about SVG and keep up-to-date. 6 | 7 | - [Awesome SVG](#awesome-svg) 8 | - [Accessible SVG](topics/Accessibility.md) 9 | - [Animation](topics/Animation.md) 10 | - [Books](topics/Books.md) 11 | - [Experiments](topics/Experiments.md) 12 | - [Filters](topics/Filters.md) 13 | - [Follow on Twitter](topics/Follow-twitter.md) 14 | - [Gradients](topics/Gradients.md) 15 | - [Grunt Plugins](topics/Grunt-plugins.md) 16 | - [Gulp Plugins](topics/Gulp-plugins.md) 17 | - [Icons](topics/Icons.md) 18 | - [Libraries](topics/Libraries.md) 19 | - [Masks and Clip-Paths](topics/Masks-clips.md) 20 | - [Optimizing, Fallbacks and Tools](topics/Optimization-tools.md) 21 | - [Patterns](topics/Patterns.md) 22 | - [Podcasts](topics/Podcasts.md) 23 | - [Responsive](topics/Responsive.md) 24 | - [Sites using SVG](topics/Sites-using-svg.md) 25 | - [Slides](topics/Slides.md) 26 | - [Snippets](topics/Snippets.md) 27 | - [Sprites](topics/Sprites.md) 28 | - [SVG Software](topics/Softwares.md) 29 | - [SVG to Download](topics/Downloads.md) 30 | - [Text](topics/Text.md) 31 | - [Tutorials](topics/Tutorials.md) 32 | - [Videos](topics/Videos.md) 33 | 34 | ## Thanks to... 35 | 36 | * [Marcus Vinicius](https://github.com/mvfsillva), my friend =) 37 | * [Rodrigo Machado](https://github.com/rcmachado) for helping me with CC License. 38 | * [Cleyson Leal](https://github.com/Cleysonlb) for creating the awesome logo. 39 | * [Chris Coyier](https://chriscoyier.net/) and his [Compendium of SVG Information](https://css-tricks.com/mega-list-svg-information/), was a great start point for me. 40 | * and of course, all the [Contributors](https://github.com/willianjusten/awesome-svg/graphs/contributors). 41 | 42 | 43 | ## Contributing 44 | 45 | Your contributions are always welcome! [Click Here to read the guidelines](https://github.com/willianjusten/awesome-svg/blob/master/contributing.md). 46 | 47 | ## Other Awesome Lists 48 | 49 | * [Awesome](https://github.com/sindresorhus/awesome) 50 | * [Awesome-awesome](https://github.com/emijrp/awesome-awesome) 51 | * [Awesome-awesomeness](https://github.com/bayandin/awesome-awesomeness) 52 | 53 | ## License 54 | 55 | [![CC0](https://i.creativecommons.org/l/by/4.0/88x31.png)](https://creativecommons.org/licenses/by/4.0/) 56 | 57 | To the extent possible under law, [Willian Justen](https://github.com/willianjusten) has waived all copyright and related or neighboring rights to this work. 58 | -------------------------------------------------------------------------------- /ci_script.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | set -e # halt script on error 3 | 4 | for file in topics/*.md 5 | do 6 | bundle exec awesome_bot $file --allow-redirect --allow-ssl --set-timeout 10 --white-list slideshare,angrytools,css-tricks,livrosvg,kartikprabhu 7 | done 8 | -------------------------------------------------------------------------------- /contributing.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Your contributions are always welcome! 4 | 5 | ## Guidelines 6 | 7 | * Create a file section if needed. 8 | * Add section description. 9 | * Add section title to Table of contents. 10 | * Search previous suggestions before making a new one, as yours may be a duplicate. 11 | * Add your links: `* [link-name](http://example.com/) - description` 12 | * If your link isn't in english, use (Lang) after the link. 13 | * Check your spelling and grammar. 14 | * Make sure your text editor is set to remove trailing whitespace. 15 | * Send a Pull Request. 16 | -------------------------------------------------------------------------------- /logo.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /topics/Accessibility.md: -------------------------------------------------------------------------------- 1 | ## Accessible SVG 2 | > How to enhance the accessibility using SVG. 3 | 4 | * [Current State of Authoring Accessible SVG](http://schepers.cc/authoring-accessible-svg) 5 | * [Describler make your SVG accessible](http://describler.com/) 6 | * [Invisible Visualization](http://www.w3.org/Talks/2014/schepers_invisible_visualization/index.html) 7 | * [Making SVG Accessible](http://thenewcode.com/1026/Making-SVG-Accessible) 8 | * [Tips for Creating Accessible SVG](http://www.sitepoint.com/tips-accessible-svg/) 9 | * [Using ARIA to enhance SVG accessibility](https://www.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/) 10 | 11 | --- 12 | [Back to Home](https://github.com/willianjusten/awesome-svg) 13 | -------------------------------------------------------------------------------- /topics/Animation.md: -------------------------------------------------------------------------------- 1 | ## Animation 2 | > How to create different interactions and animations using SVG. 3 | 4 | * [A Guide to SVG Animations (SMIL) by Sara Soueidan](http://css-tricks.com/guide-svg-animations-smil/) 5 | * [An Intro to SVG Animation with SMIL](http://codepen.io/noahblon/blog/an-intro-to-svg-animation-with-smil) 6 | * [Animated line drawing in SVG](http://jakearchibald.com/2013/animated-line-drawing-svg/) 7 | * [Animated SVG icons with Snap.svg](http://tympanus.net/codrops/2013/11/05/animated-svg-icons-with-snap-svg/) 8 | * [Animate SVG Icons with css and Snap](http://codyhouse.co/gem/animate-svg-icons-with-css-and-snap/) 9 | * [Animate SVG with CSS](https://jonsuh.com/blog/animate-svg-with-css/) 10 | * [Animate SVG with SMIL Adam Guttentag's Blog](http://codepen.io/guttentag/blog/) 11 | * [Animating SVG with CSS](http://css-tricks.com/animating-svg-css/) 12 | * [Animating Vectors with SVG](http://24ways.org/2013/animating-vectors-with-svg/) 13 | * [Create an SVG Animation using CSS and JavaScript](http://designmodo.com/svg-animation/) 14 | * [Creating Material Design Ripple Effects with SVG](http://tympanus.net/codrops/2015/09/14/creating-material-design-ripple-effects-svg/) 15 | * [Elastic Progress with SVG and GSAP](http://tympanus.net/codrops/2015/09/23/elastic-progress) 16 | * [Greensock Introduces DrawSVG](https://ihatetomatoes.net/greensock-introduces-drawsvgplugin/) 17 | * [How SVG Line Animation Works](http://css-tricks.com/svg-line-animation-works/) 18 | * [How to Animate Festive SVG Icons With CSS](http://webdesign.tutsplus.com/tutorials/how-to-animate-festive-svg-icons-with-css--webdesign-17658) 19 | * [How to animate with Polyart](http://css-tricks.com/polylion/) 20 | * [How to create a Buffer Animation](https://cssanimation.rocks/buffer/) 21 | * [How to create an infographic with SVG](http://designmodo.com/svg-infographic/) 22 | * [How to Self Drawing SVG Animation](http://codepen.io/MyXoToD/blog/howto-self-drawing-svg-animation) 23 | * [How to use animateTransform for inline SVG](https://webdesign.tutsplus.com/tutorials/how-to-use-animatetransform-for-inline-svg-animation--cms-22296) 24 | * [Interactive Infographic with SVG and CSS animations](http://tympanus.net/codrops/2013/02/06/interactive-infographic-with-svg-and-css-animations/) 25 | * [Intermediate SVG–Animating with snap.svg](http://unicorn-ui.com/blog/intermediate-svg.html) 26 | * [Jump Loader Animation with GSAP](http://tympanus.net/codrops/2015/03/25/jump-loader-animation-svg-gsap/) 27 | * [Loading Animation with SVG](https://github.com/jxnblk/loading) 28 | * [MDN about Animation with SMIL](https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL) 29 | * [Masking SVG Animations](https://medium.com/@gordonnl/stylised-line-animations-ded23320ffe5) 30 | * [Polygon feature design: SVG animations for fun and profit](http://product.voxmedia.com/2013/11/25/5426880/polygon-feature-design-svg-animations-for-fun-and-profit) 31 | * [Run, run, Ruuun!](http://codepen.io/CyrilLevallois/pen/JbrfI/) 32 | * [Sign on the Dotted Line: Animating Your Own SVG Signature](http://webdesign.tutsplus.com/tutorials/sign-on-the-dotted-line-animating-your-own-svg-signature--cms-23846) 33 | * [Styling And Animating SVGs With CSS](http://www.smashingmagazine.com/2014/11/03/styling-and-animating-svgs-with-css/) 34 | * [SVG animation](http://stylecampaign.com/blog/2014/02/svg-animation/) 35 | * [SVG Animation and CSS Transforms: A Complicated Love Story](http://css-tricks.com/svg-animation-on-css-transforms/) 36 | * [SVG Animations Using CSS and Snap.svg](http://davidwalsh.name/svg-animations-snap) 37 | * [SVG animation with SMIL a collection by Jorge Aznar](http://codepen.io/collection/chefj/) 38 | * [SVG Animation with Greensock](https://www.august.com.au/blog/svg-animation-with-greensock/) 39 | * [SVG Circus](http://svgcircus.com/) 40 | * [SVG Dabbles - Tutorials about snap.svg](http://svg.dabbles.info/) 41 | * [SVG drawing animation](http://tympanus.net/codrops/2013/12/30/svg-drawing-animation/) 42 | * [SVG Path Animation with Jquery and Illustrator](http://blog.teamtreehouse.com/svg-path-animation-with-jquery-and-illustrator) 43 | * [The Playground Vector Animation Process](http://playgroundinc.com/blog/the-playground-vector-animation-process/) 44 | * [The Simple Intro to SVG Animation](http://davidwalsh.name/svg-animation) 45 | * [The State of SVG Animation](http://blogs.adobe.com/dreamweaver/2015/06/the-state-of-svg-animation.html) 46 | * [Weighing SVG Animation Techniques](https://css-tricks.com/weighing-svg-animation-techniques-benchmarks/) 47 | 48 | --- 49 | [Back to Home](https://github.com/willianjusten/awesome-svg) 50 | -------------------------------------------------------------------------------- /topics/Books.md: -------------------------------------------------------------------------------- 1 | ## Books 2 | > Some of the best books about SVG. 3 | 4 | * [Building Web Applications with SVG by Jon Frost - 2012](http://www.amazon.com/Building-Web-Applications-Developer-Reference/dp/0735660123) 5 | * [Gráficos vetoriais escaláveis by Mauricio Samy Silva - 2012](http://www.livrosvg.com.br/) 🇧🇷 6 | * [Interactive Data Visualization for the Web by Scott Muray - 2013](http://shop.oreilly.com/product/0636920026938.do) 7 | * [Learn SVG Interactively by Jay Nick - 2010](https://itunes.apple.com/us/book/learn-svg-interactively/id384843340?mt=11) 8 | * [Learning Raphaël JS Vector Graphics by Damian Dawber - 2013](http://www.amazon.com/Learning-Rapha%C3%ABl-JS-Vector-Graphics/dp/1782169164) 9 | * [RaphaelJS: Graphics and Visualization on the Web by Chris Wilson - 2013](http://www.amazon.com/RaphaelJS-Graphics-Visualization-Chris-Wilson/dp/1449365361) 10 | * [Sams Teach Yourself SVG in 24 Hours by Micah Laaker](http://www.amazon.com/Sams-Teach-Yourself-SVG-Hours/dp/0672322900) 11 | * [SCALABLE, un libro sobre SVG by Jorge Aznar Tobajas - 2014](http://www.leanpub.com/scalable/) 🇪🇸 12 | * [SVG Essentials by J. David Eisenberg - 2002](http://shop.oreilly.com/product/9780596002237.do) 13 | * [SVG Pocket Guide by Joni Trythall - 2014](http://svgpocketguide.com/ ) 14 | * [SVG Tessellation by Jeremy Corbett - 2013](http://www.amazon.com/SVG-Tessellation-ebook/dp/B00DAKS1U8/) 15 | 16 | --- 17 | [Back to Home](https://github.com/willianjusten/awesome-svg) 18 | -------------------------------------------------------------------------------- /topics/Downloads.md: -------------------------------------------------------------------------------- 1 | ## SVG to Download 2 | > Some SVG resources to download and enjoy. 3 | 4 | * [Flat Color Icons](https://github.com/icons8/flat-color-icons) 5 | * [Freepik](https://www.freepik.com/) 6 | * [Loading.io](http://loading.io/) - Build Your Ajax Loading Icons with SVG/CSS/GIF. 7 | * [Onde Baixar SVG](http://willianjusten.com.br/onde-baixar-svg/) 8 | * [Pinterest - SVG](http://www.pinterest.com/ligayatg/svg-files-free/) 9 | * [Pixebay](https://pixabay.com/) - International website for sharing high quality public domain photos, illustrations, vector graphics, and film footage. 10 | * [svg-icon](http://leungwensen.github.io/svg-icon/) - Select and download SVG icons as SVG symbol sprite file from over 4,000 SVG icons transformed from icon fonts collections. 11 | * [SVG Crowbar](https://github.com/NYTimes/svg-crowbar) - Download svg on a page using the bookmark 12 | * [SVG Cuts](http://svgcuts.com/blog/category/fsvgotw/) 13 | * [SVG Porn - high quality svg logos](http://svgporn.com/) 14 | * [SVG Repo](https://svgrepo.com/) - Explore & search library of commercial use OK SVG vectors 15 | * [Shutterstock](http://www.shutterstock.com/pt/cat-29-Vectors.html) 16 | * [The Noun Project](http://thenounproject.com/) 17 | * [Vecteezy](http://www.vecteezy.com/) 18 | 19 | --- 20 | [Back to Home](https://github.com/willianjusten/awesome-svg) 21 | -------------------------------------------------------------------------------- /topics/Experiments.md: -------------------------------------------------------------------------------- 1 | ## Experiments 2 | > Everyone likes experiments, why not some of them? 3 | 4 | * [A simple modal window with an animated SVG background.](http://codyhouse.co/gem/svg-modal-window/) 5 | * [Annoshape by Shepazu](http://shepazu.github.io/annoshape/annoshape.html) 6 | * [Bump Maping by Lucas Bebber](http://codepen.io/lbebber/details/RNgWXL/) 7 | * [Depth field using Filters](http://codepen.io/vcurd/pen/caFxz) 8 | * [Elastic Stroke SVG+CSS](http://codepen.io/yoksel/pen/XJbzrO) 9 | * [Elastic SVG Elements](http://tympanus.net/Development/ElasticSVGElements/) 10 | * [Flat Surface Shader](http://matthew.wagerfield.com/flat-surface-shader/) 11 | * [Generate semantic metro maps from GTFS data](http://semantic-metro-map-generator.herokuapp.com/) 12 | * [Glitch by Lucas Bebber](http://codepen.io/lbebber/details/qEjRYd/) 13 | * [Gooey Menu by Lucas Bebber](http://codepen.io/lbebber/full/LELBEo/) 14 | * [Great experiments from Codrops](http://tympanus.net/codrops/?s=svg) 15 | * [GSAP SVG Animations by Chris Gannon](http://codepen.io/collection/XzxeNJ/) 16 | * [Poly Maker](http://aerotwist.com/lab/poly-maker/) 17 | * [Semantic & interactive graphics with SVG](http://semantic-graphics.herokuapp.com/) 18 | * [Semantic & interactive metro maps with SVG](http://semantic-metro-map.herokuapp.com/) 19 | * [Semantic diagrams (generate/parse/query embedded RDF)](http://semantic-diagrams.herokuapp.com/) 20 | * [SVG 101 - Instructive SVG's](http://codepen.io/collection/AxKdex/) 21 | * [SVG Awesome - a collection by Jason Weaver](http://codepen.io/collection/JyolC/) 22 | * [SVG Christmas Experiments by I Hate Tomatoes](https://ihatetomatoes.net/svg-christmas/) 23 | * [SVG Christmas Experiments by Willian Justen and Lucas Maia](http://lucasmaiaesilva.github.io/svgexperiment/) 24 | * [SVG Heart Monitor](http://codepen.io/chrisgannon/pen/waaByJ) 25 | * [SVG MAGAZINE](http://svgmagazine.com/oct2014/) 26 | * [STAR MAKER](http://svg-whiz.com/svg/StarMaker-FF.svg) 27 | * [SVG Memory Game](http://codepen.io/allanpope/full/OVJWLK/) 28 | * [SVG Paper Shredder](http://codepen.io/chrisgannon/details/bdGqBo/) 29 | * [SVG Rainbow Rocket Man](http://codepen.io/chrisgannon/details/EjVyXN/) 30 | * [SVG Space Rocket!](http://codepen.io/chrisgannon/pen/QbLMxz) 31 | * [Play with Orca](http://codepen.io/diegoleme/pen/rIokB) 32 | * [SVG Wow](http://svg-wow.org/) 33 | 34 | --- 35 | [Back to Home](https://github.com/willianjusten/awesome-svg) 36 | -------------------------------------------------------------------------------- /topics/Filters.md: -------------------------------------------------------------------------------- 1 | ## Filters 2 | > What are filters, how to use, some examples and tips. 3 | 4 | * [A Look at SVG Light Source Filters](http://css-tricks.com/look-svg-light-source-filters/) 5 | * [Color Filters can turn your gray skies blue](https://css-tricks.com/color-filters-can-turn-your-gray-skies-blue) 6 | * [Cross-browser filters with CSS and SVG](http://www.broken-links.com/2013/11/20/cross-browser-filters-css-svg/) 7 | * [Enhancing Data Visualization with SVG Filters](http://vasir.net/blog/data-visualization/enhancing-data-visualization-with-svg-filters) 8 | * [FeConvolveMatrix live demo](http://alexanderkozhevin.github.io/svg-convolution-matrix/) 9 | * [Hands On: SVG Filter Effects](http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_svg-filter-effects.htm) 10 | * [How to create squiggly text with svg filters](http://blogs.adobe.com/dreamweaver/2015/07/how-to-create-squiggly-text-with-svg-filters.html) 11 | * [MDN about SVG Filter](https://developer.mozilla.org/en-US/docs/Applying_SVG_effects_to_HTML_content) 12 | * [SVG Filters by Matthew Bystedt](http://apike.ca/prog_svg_filters.html) 13 | * [SVG Filters by Jenkov](http://tutorials.jenkov.com/svg/filters.html) 14 | * [SVG Filters effects](http://jorgeatgu.github.io/svg-filters/) 15 | * [SVG Filters W3C](http://www.w3.org/TR/SVG/filters.html) 16 | * [SVG Filters](https://yoksel.github.io/svg-filters/) by [Yoksel](https://twitter.com/yoksel_en) 17 | 18 | --- 19 | [Back to Home](https://github.com/willianjusten/awesome-svg) 20 | -------------------------------------------------------------------------------- /topics/Follow-twitter.md: -------------------------------------------------------------------------------- 1 | ## Follow on Twitter 2 | > They create the bests tools that we use today! 3 | 4 | * [@aleatoric](https://twitter.com/aleatoric) 5 | * [@chriscoyier](https://twitter.com/chriscoyier) 6 | * [@daviddaileysru](https://twitter.com/daviddaileysru) 7 | * [@dirkschulze](https://twitter.com/dirkschulze) 8 | * [@DmitryBaranovsk](https://twitter.com/DmitryBaranovsk) 9 | * [@erikdahlstrom](https://twitter.com/erikdahlstrom) 10 | * [@heycam](https://twitter.com/heycam) 11 | * [@mbostock](https://twitter.com/mbostock) 12 | * [@JoniTrythall](https://twitter.com/JoniTrythall) 13 | * [@SaraSoueidan](https://twitter.com/SaraSoueidan) 14 | * [@svgwg](https://twitter.com/svgwg) 15 | * [@shepazu](https://twitter.com/shepazu) 16 | * [@svgeesus](https://twitter.com/svgeesus) 17 | * [@tabatkins](https://twitter.com/tabatkins) 18 | * [@TheGraphicalWeb](https://twitter.com/TheGraphicalWeb) 19 | 20 | --- 21 | [Back to Home](https://github.com/willianjusten/awesome-svg) 22 | -------------------------------------------------------------------------------- /topics/Gradients.md: -------------------------------------------------------------------------------- 1 | ## Gradients 2 | > How to use, tools to generate gradients and some tips. 3 | 4 | * [A farewell to css3 gradients](http://www.sitepoint.com/a-farewell-to-css3-gradients/) 5 | * [Animating SVG gradients](http://designmodo.com/animate-svg-gradients/) 6 | * [Advanced Gradients for SVG](http://www.svgopen.org/2011/papers/18-Advanced_Gradients_for_SVG/) 7 | * [Basics of SVG Gradients](http://tutorials.jenkov.com/svg/svg-gradients.html) 8 | * [CSS/SVG Gradient Generator](http://jimbomatic.com/svg-gradient/) 9 | * [Getting started with SVG Gradients](http://www.sitepoint.com/getting-started-svg-gradients/) 10 | * [MDN about SVG Gradients](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients) 11 | * [Online CSS Gradient GeneratorHelp](http://angrytools.com/gradient/) 12 | * [SVG Gradient Background Maker](https://testdrive-archive.azurewebsites.net/graphics/svggradientbackgroundmaker/default.html) 13 | * [SVG Gradient Browser Issues](http://jonibologna.com/svg-gradient-browser-quirks/) 14 | * [Using svg for flexible scalable and fun backgrounds - part 2](http://alistapart.com/article/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii) 15 | * [Using svg for flexible scalable and fun backgrounds - part 1](http://alistapart.com/article/using-svg-for-flexible-scalable-and-fun-backgrounds-part-i) 16 | 17 | --- 18 | [Back to Home](https://github.com/willianjusten/awesome-svg) 19 | -------------------------------------------------------------------------------- /topics/Grunt-plugins.md: -------------------------------------------------------------------------------- 1 | ## Grunt Plugins 2 | > For those who use Grunt, some plugins to work with SVG. 3 | 4 | * [Grunt-contrib-imagemin](https://github.com/gruntjs/grunt-contrib-imagemin) 5 | * [Grunt-dr-svg-sprites](https://github.com/drdk/grunt-dr-svg-sprites) 6 | * [Grunt-icomoon](https://bitbucket.org/kluvi/grunt-icomoon) 7 | * [Grunt-iconizr](https://www.npmjs.org/package/grunt-iconizr) 8 | * [Grunt-svg2png](https://www.npmjs.org/package/grunt-svg2png) 9 | * [Grunt-svg-compactor](https://www.npmjs.org/package/grunt-svg-compactor) 10 | * [Grunt-svg-modify](https://www.npmjs.org/package/grunt-svg-modify) 11 | * [Grunt-svg-sprite](https://www.npmjs.org/package/grunt-svg-sprite) 12 | * [Grunt-webfont](https://www.npmjs.org/package/grunt-webfont) 13 | * [Grunt-svgmin](https://www.npmjs.org/package/grunt-svgmin) 14 | * [Grunt-svgstore](https://github.com/FWeinb/grunt-svgstore) 15 | * [Grunt-svgtemplater](https://www.npmjs.org/package/grunt-svgtemplater) 16 | * [Svg fallback](https://www.npmjs.org/package/svg_fallback) 17 | 18 | --- 19 | [Back to Home](https://github.com/willianjusten/awesome-svg) 20 | -------------------------------------------------------------------------------- /topics/Gulp-plugins.md: -------------------------------------------------------------------------------- 1 | ## Gulp Plugins 2 | > For those who use Gulp, some plugins to work with SVG. 3 | 4 | * [Gulp-rsvg](https://www.npmjs.org/package/gulp-rsvg/) 5 | * [Gulp-svg-icons](https://www.npmjs.org/package/gulp-svg-icons/) 6 | * [Gulp-svg-sprites](https://www.npmjs.org/package/gulp-svg-sprites/) 7 | * [Gulp-svgmin](https://www.npmjs.org/package/gulp-svgmin/) 8 | * [Gulp-svgstore](https://github.com/w0rm/gulp-svgstore) 9 | 10 | --- 11 | [Back to Home](https://github.com/willianjusten/awesome-svg) 12 | -------------------------------------------------------------------------------- /topics/Icons.md: -------------------------------------------------------------------------------- 1 | ## Icons 2 | > How to use svg for icons, why svg is better than fonticon, tools, and more. 3 | 4 | * [A Working SVG Workflow for Accessible Icons](http://www.sitepoint.com/a-working-svg-workflow-for-accessible-icons/) 5 | * [An overview of svg sprite creation techiniques](http://24ways.org/2014/an-overview-of-svg-sprite-creation-techniques/) 6 | * [Cascading SVG Fill Color](http://css-tricks.com/cascading-svg-fill-color/) 7 | * [Create an icon font illustrator icomoon](http://www.sitepoint.com/create-an-icon-font-illustrator-icomoon/) 8 | * [Customizable svg icons css variables](http://codepen.io/AmeliaBR/post/customizable-svg-icons-css-variables) 9 | * [Evil Icons](http://evil-icons.io/) 10 | * [Feather](https://feathericons.com) 11 | * [Fontastic](http://fontastic.me/faq) 12 | * [Glyph Smarticons](http://glyph.smarticons.co/) 13 | * [Google Fundamentals - Use SVG as icons](https://developers.google.com/web/fundamentals/media/images/use-icons) 14 | * [Hybrid SVG icons](http://hybicon.softwaretailoring.net/) 15 | * [IconSear.ch](https://iconsear.ch/search.html) - search engine with over 50,000 SVG icons indexed 16 | * [Icon System with SVG Sprites](http://css-tricks.com/svg-sprites-use-better-icon-fonts/) 17 | * [IconicFonts](https://github.com/iconicFonts/iconic-fonts/) - provides more than 55 icon sets with over 60,000 icons 18 | * [Icon Fonts vs SVG](http://css-tricks.com/icon-fonts-vs-svg/) 19 | * [Iconmonstr](http://iconmonstr.com/) 20 | * [ICONS Repo](https://iconsrepo.com/) - Editable (colors, thickness, rotation, background) SVG icons library/tool 21 | * [Loaders with just SVG](http://samherbert.net/svg-loaders/) 22 | * [LogoSear.ch](https://logosear.ch/search.html) - search engine with over 200,000 SVG logos indexed 23 | * [Manipulating svg icons with simple css](http://webdesign.tutsplus.com/articles/manipulating-svg-icons-with-simple-css--webdesign-15694) 24 | * [Making SVG buttons](http://metafizzy.co/blog/making-svg-buttons/) 25 | * [Material Design Icons By Google](https://github.com/google/material-design-icons) 26 | * [Por que parei de utilizar ícones como fontes](https://medium.com/@devinterior/por-que-parei-de-utilizar-%C3%ADcones-como-fontes-3ee74d34cf4) - Pt-Br 27 | * [Sistemas de Icones em SVG](http://willianjusten.com.br/sistemas-de-icones-em-svg/) - Pt-Br 28 | * [sprite.sh](https://github.com/edenspiekermann/sprite.sh) 29 | * [svg-icon](https://github.com/leungwensen/svg-icon) - An ultimate svg icons collection DONE RIGHT 30 | * [SVG ICONS NewBancomail](http://elrumordelaluz.github.io/newbancomail/svg.html) 31 | * [SVG ICONS SOCIAL](http://jorgeatgu.github.io/demo) 32 | * [SVG icons ftw](http://tympanus.net/codrops/2013/11/27/svg-icons-ftw/) 33 | * [SVG Morpheus](http://alexk111.github.io/SVG-Morpheus/) 34 | * [Ten reasons we switched from an icon font to SVG](http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/) 35 | * [SVG Sprites and Icon Systems are super](https://lincolnloop.com/blog/svg-sprites-and-icon-systems-are-super/) 36 | * [SVG Sprite Workflow That Works](https://medium.com/@iamryanyu/svg-sprite-workflow-that-works-f5609d4d6144#.ycad46oe7) 37 | * [SVG symbol a Good Choice for Icons](http://css-tricks.com/svg-symbol-good-choice-icons/) 38 | * [SVG use with External Source](http://css-tricks.com/svg-use-external-source/) 39 | * [Useiconic](https://useiconic.com/guides/) 40 | * [VectorLogoZone](https://www.vectorlogo.zone/) - consistently formatted SVG logos 41 | --- 42 | [Back to Home](https://github.com/willianjusten/awesome-svg) 43 | -------------------------------------------------------------------------------- /topics/Libraries.md: -------------------------------------------------------------------------------- 1 | ## Libraries 2 | > Some libraries to help us to work with SVG. 3 | 4 | * [Animate Plus](https://github.com/bendc/animateplus) 5 | * [Bonsai.js](http://bonsaijs.org/) 6 | * [C3.js](https://github.com/masayuki0812/c3) 7 | * [Charted](http://www.charted.co/) 8 | * [Chartist.js](http://gionkunz.github.io/chartist-js/) 9 | * [D3.js](http://d3js.org/) 10 | * [DrawSVG](https://github.com/petercollingridge/DrawSVG) 11 | * [Frappé](https://github.com/frappe/charts) 12 | * [GraphicsJS](http://www.graphicsjs.org) 13 | * [GreenSock Draw SVG](http://greensock.com/drawSVG) 14 | * [GreenSock Morph SVG](http://greensock.com/morphSVG) 15 | * [Highcharts](http://www.highcharts.com/) 16 | * [iPath](https://github.com/dr-jerry/iPath) 17 | * [Landline](http://propublica.github.io/landline/) 18 | * [Lazy Line Painter](http://lazylinepainter.info/) 19 | * [Maker.js](http://microsoft.github.io/maker.js/demos/) 20 | * [MetricsGraphics.js](http://metricsgraphicsjs.org/) 21 | * [mo · js](https://github.com/legomushroom/mojs) 22 | * [Oea.SVG](http://oeasvg.com/) 23 | * [Path JS](https://github.com/andreaferretti/paths-js) 24 | * [Raphael.js](https://github.com/DmitryBaranovskiy/raphael) 25 | * [Snap.SVG](http://snapsvg.io/) 26 | * [snap.svg.zpd](https://github.com/huei90/snap.svg.zpd) 27 | * [SnapFoo](http://yuschick.github.io/SnapFoo/) 28 | * [SeenJS](https://github.com/themadcreator/seen) 29 | * [svg-pan-zoom](https://github.com/ariutta/svg-pan-zoom) 30 | * [SVG.js](https://svgjs.dev/) 31 | * [svg-captcha](https://github.com/lemonce/svg-captcha) 32 | * [SVGMaster](https://oaxoa.github.io/SVGMaster/) 33 | * [SVGnest](https://github.com/Jack000/SVGnest) 34 | * [SVGPan](https://code.google.com/p/svgpan/) 35 | * [SVGRef](http://keith-wood.name/svgRef.html) 36 | * [SvgVerlet.js](https://github.com/miketucker/svg-verlet.js) 37 | * [SVGWeb](https://code.google.com/p/svgweb/) 38 | * [Two.js](http://jonobr1.github.io/two.js/) 39 | * [VelocityJS](http://julian.com/research/velocity/#svg) 40 | * [Vivid.js](https://webkul.github.io/vivid/) 41 | * [Vivus](http://maxwellito.github.io/vivus/) 42 | * [VLEX](https://github.com/indus/VLEX) 43 | * [Walkway](http://www.connoratherton.com/walkway) 44 | * [wheelnav.js](http://wheelnavjs.softwaretailoring.net) 45 | 46 | --- 47 | [Back to Home](https://github.com/willianjusten/awesome-svg) 48 | 49 | -------------------------------------------------------------------------------- /topics/Masks-clips.md: -------------------------------------------------------------------------------- 1 | ## Masks and Clip-paths 2 | > Another great feature that SVG supports, take a look. 3 | 4 | * [Cutting Inner Part Element Using Clip-Path](http://css-tricks.com/cutting-inner-part-element-using-clip-path/) 5 | * [Clip-path Generator](http://cssplant.com/clip-path-generator) 6 | * [Clip-path Images Coderwall](https://coderwall.com/p/blx8kw/svg-clippath-images) 7 | * [Clip Path by Jenkov](http://tutorials.jenkov.com/svg/clip-path.html) 8 | * [Clipping SVGBasics](http://www.svgbasics.com/clipping.html) 9 | * [Masking Html5Rocks](http://www.html5rocks.com/en/tutorials/masking/adobe/?redirect_from_locale=pt) 10 | * [Masking W3C](http://www.w3.org/TR/SVG/masking.html) 11 | * [Using SVG Clip-path](http://sawyerhollenshead.com/writing/using-svg-clippath/) 12 | 13 | --- 14 | [Back to Home](https://github.com/willianjusten/awesome-svg) 15 | -------------------------------------------------------------------------------- /topics/Optimization-tools.md: -------------------------------------------------------------------------------- 1 | ## Optimizing, Fallbacks and Tools 2 | > Optimize your SVG, support older browsers and more. 3 | 4 | * [A complete guide to SVG Fallbacks](https://css-tricks.com/a-complete-guide-to-svg-fallbacks) 5 | * [Brackets-svg-code-hints](https://github.com/sprintr/brackets-svg-code-hints) 6 | * [Convertio](https://convertio.co) 7 | * [Create Paths Online](http://jxnblk.com/paths/) 8 | * [deSVG](http://benhowdle.im/deSVG/) 9 | * [Export SVG for the web with Illustrator](http://creativedroplets.com/export-svg-for-the-web-with-illustrator-cc/) 10 | * [FakeSMILE](http://leunen.me/fakesmile/index.html) 11 | * [Grumpicon](http://www.grumpicon.com/) 12 | * [Iconizr](http://iconizr.com/) 13 | * [Illustrator SVG Exporter Script](https://github.com/iconic/illustrator-svg-exporter) 14 | * [Optimizing Inkscape SVG size for the Web](http://tavmjong.free.fr/blog/?p=79) 15 | * [Optimizing SVG for Web](http://web-design-weekly.com/2014/10/22/optimizing-svg-web/) 16 | * [Orthogonal](https://github.com/davidchambers/orthogonal) 17 | * [PicSVG](http://picsvg.com/fr/) 18 | * [Scour](http://www.codedread.com/scour/) 19 | * [Script to export PSD to SVG](http://hackingui.com/design/export-photoshop-layer-to-svg/) 20 | * [smil2css](https://github.com/webframes/smil2css) 21 | * [svg2png command line wrapper](https://github.com/mcous/svg2png-command) 22 | * [SVG Cleaner](https://github.com/RazrFalcon/SVGCleaner) 23 | * [SVG Dashed Line Generator](http://gigacore.github.io/demos/svg-stroke-dasharray-generator/) 24 | * [SVG Editor](http://petercollingridge.appspot.com/svg-editor) 25 | * [SVG Editor Tools](https://github.com/duopixel/Method-Draw) 26 | * [SVG Gobbler Browser Extension](https://svggobbler.com/) 27 | * [SVG MAGIC](https://github.com/dirkgroenen/SVGMagic) 28 | * [SVG Now](https://github.com/davidderaedt/SVG-NOW) 29 | * [SVG OMG](https://jakearchibald.github.io/svgomg/) 30 | * [SVG Optimisation Basics](http://demosthenes.info/blog/807/SVG-Optimisation-The-Basics) 31 | * [SVG Optimizer GUI](https://github.com/svg/svgo-gui) 32 | * [SVG Optimizer](https://github.com/svg/svgo) 33 | * [`svgi` tool to inspect the content of SVG files](https://github.com/Angelmmiguel/svgi) 34 | * [SVG Preview](https://github.com/peterflynn/svg-preview) 35 | * [SVGeezy](http://benhowdle.im/svgeezy/) 36 | * [svgson](https://github.com/elrumordelaluz/svgson) 37 | * [svgxuse](https://github.com/Keyamoon/svgxuse) 38 | * [Tips for optimising svg delivery for the web](http://calendar.perfplanet.com/2014/tips-for-optimising-svg-delivery-for-the-web/) 39 | * [Using SVG to shrink your pngs](http://peterhrynkow.com/how-to-compress-a-png-like-a-jpeg) 40 | * [Vector Magic](http://vectormagic.com/) 41 | * [WebFrames](https://github.com/webframes/webframes) 42 | * [ZorroSVG - Put a Mask on it](http://quasimondo.com/ZorroSVG/) 43 | 44 | --- 45 | [Back to Home](https://github.com/willianjusten/awesome-svg) 46 | -------------------------------------------------------------------------------- /topics/Patterns.md: -------------------------------------------------------------------------------- 1 | ## Patterns 2 | > How to use, how they work and some tools to create patterns. 3 | 4 | * [An Overview of SVG Patterns](http://blogs.adobe.com/dreamweaver/2015/09/svg-patterns.html) 5 | * [Backgroundify - Very simple background generator](https://github.com/vltr/bckgrndfy) 6 | * [Basic of SVG Patterns](http://apike.ca/prog_svg_patterns.html) 7 | * [How to use SVG Patterns](http://designmodo.com/svg-patterns/) 8 | * [MDN about SVG Patterns](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns) 9 | * [Plain Pattern - Pattern Maker](http://www.kennethcachia.com/plain-pattern/) 10 | * [Trianglify - Triangle Pattern Generator](http://qrohlf.com/trianglify/) 11 | * [Patternbolt - Pack a pattern svg into css or scss](http://buseca.github.io/patternbolt/) 12 | * [Gerstnerizer](http://eskimoblood.github.io/gerstnerizer/) 13 | * [Textures.js ](https://github.com/riccardoscalco/textures) 14 | * [SVG fill patterns](http://tutorials.jenkov.com/svg/fill-patterns.html) 15 | * [SVG Patterns Gallery](http://philbit.com/svgpatterns/) 16 | * [svg-patterns](https://github.com/derhuerst/svg-patterns) 17 | * [SVG quasicrystal generator](http://berjon.com/quasi/) 18 | 19 | --- 20 | [Back to Home](https://github.com/willianjusten/awesome-svg) 21 | -------------------------------------------------------------------------------- /topics/Podcasts.md: -------------------------------------------------------------------------------- 1 | ## SVG Podcasts 2 | > When you're on the train, jogging, or laying in bed trying to get to sleep…sometimes you just wanna listen to a podcast! 3 | 4 | * The SVG Immersion Podcast: 5 | * [iTunes](https://itunes.apple.com/us/podcast/svg-immersion-anything-everything/id975438780?mt=2) 6 | * [Stitcher](http://www.stitcher.com/s?fid=62576&refid=stpr) 7 | * [TuneIn](http://tunein.com/radio/SVG-Immersion-The-Anything-and-Everything-SVG-Podcast-p690161/) 8 | 9 | --- 10 | [Back to Home](https://github.com/willianjusten/awesome-svg) 11 | -------------------------------------------------------------------------------- /topics/Responsive.md: -------------------------------------------------------------------------------- 1 | ## Responsive 2 | > How to use the ability of "Scalable" to create different interactions for multiple devices. 3 | 4 | * [Design the Web: Responsive SVG Images - Lynda Course](http://www.lynda.com/CSS-tutorials/Design-Web-Responsive-SVG-Images/366454-2.html) 5 | * [How to Scale SVG](http://css-tricks.com/scale-svg/) 6 | * [Make SVG Responsive](http://thenewcode.com/744/Make-SVG-Responsive) 7 | * [Making SVG's responsive with CSS](http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/) 8 | * [Making Responsive SVG Graphs](http://meloncholy.com/blog/making-responsive-svg-graphs/) 9 | * [Media queries in svg images](http://blog.cloudfour.com/media-queries-in-svg-images/) 10 | * [Responsive Sass Mixin](http://unicorn-ui.com/blog/responsive-svg-mixin.html) 11 | * [Responsive Logo Composition With SVG](http://blog.cloudfour.com/responsive-logo-composition-with-svg/) 12 | * [Responsive Logos, Part 1: Tips for Adapting Logos for Small Screens](http://viget.com/inspire/responsive-logos-part-1-tips-for-adapting-logos-for-small-screens) 13 | * [Responsive Logos, Part 2: Making Logos Truly Responsive with Inline SVG](http://viget.com/inspire/responsive-logos-part-2-making-logos-truly-responsive-with-svg) 14 | * [Rethinking responsive svg](http://www.smashingmagazine.com/2014/03/05/rethinking-responsive-svg/) 15 | 16 | --- 17 | [Back to Home](https://github.com/willianjusten/awesome-svg) 18 | -------------------------------------------------------------------------------- /topics/Sites-using-svg.md: -------------------------------------------------------------------------------- 1 | ## Sites using SVG 2 | > Some of the best sites using SVG. 3 | 4 | * [albinotonnina.com](http://www.albinotonnina.com/) 5 | * [creative-mob.com](http://www.creative-mob.com/) 6 | * [Electron / Atom](http://electron.atom.io/) 7 | * [gardenestudio.com.br](http://gardenestudio.com.br/) 8 | * [Gitlab](https://about.gitlab.com/) 9 | * [guillaumejuvenet.com](https://www.guillaumejuvenet.com/) 10 | * [initiative.com](http://initiative.com/) 11 | * [kaipoche.co](http://kaipoche.co/) 12 | * [makeyourmoneymatter.org](http://makeyourmoneymatter.org/) 13 | * [panizzon.ind.br](http://panizzon.ind.br/) 14 | * [playgroundinc.com](http://playgroundinc.com/) 15 | * [Stat Social](http://www.statsocial.com/) 16 | * [StretchSketch](http://www.stretchsketch.com/) 17 | --- 18 | [Back to Home](https://github.com/willianjusten/awesome-svg) 19 | -------------------------------------------------------------------------------- /topics/Slides.md: -------------------------------------------------------------------------------- 1 | ## Slides 2 | > Some presentations about everything in SVG. 3 | 4 | * [Advanced SVG Animation Workshop by Sarah Drasner - Pt1](https://slides.com/sdrasner/frontendmasters1/) 5 | * [Advanced SVG Animation Workshop by Sarah Drasner - Pt2](https://slides.com/sdrasner/frontendmasters2/) 6 | * [Advanced SVG Animation Workshop by Sarah Drasner - Pt3](https://slides.com/sdrasner/frontendmasters3/) 7 | * [Animating SVG with CSS and SMIL by Sara Soueidan](http://slides.com/sarasoueidan/animating-svg-with-css-and-smil-full-version#/) 8 | * [Building Better Interfaces with SVG by Sara Soueidan](http://slides.com/sarasoueidan/building-better-interfaces-with-svg#/) 9 | * [Creating SVG Polygons](http://slides.com/grayghostvisuals/svgpolygons#/) 10 | * [D3: Data-Driven Documents by Mike Bostock](http://mbostock.github.io/d3/talk/20111018/#0) 11 | * [Filter Effects](https://docs.google.com/presentation/d/13la132nkDOrQcaZ4XTLteLYxmZ0ud2xHMkv2A6dNlks/mobilepresent#slide=id.p) 12 | * [GSAP + SVG by Sarah Drasner](http://slides.com/sdrasner/gsap-svg) 13 | * [Leaving Pixels Behind by Todd Parker](http://goo.gl/BtQu5U) 14 | * [Next Level SVG by Ilya Pukhalski](https://speakerdeck.com/pukhalski/next-level-svg) 15 | * [Play SVG! Utilizando vetores na web by Willian Justen](http://goo.gl/eaC0EC) - Pt-Br 16 | * [Responsive svg by lex Walker](http://slides.com/alexwalker/responsive-svg) 17 | * [Styling & Animating Scalable Vector Graphics with CSS by Sara Soueidan](https://docs.google.com/presentation/d/1Iuvf3saPCJepVJBDNNDSmSsA0_rwtRYehSmmSSLYFVQ/present#slide=id.p) 18 | * [SVG 101 - A gentle introduction](http://cloudfour.github.io/slides-svg-101/#/) 19 | * [SVG - De volta e para o futuro by Maujor](http://www.slideshare.net/Maujor/svg-de-volta-e-paara-o-futuro) Pt-Br 20 | * [SVG by James Coleman](https://speakerdeck.com/ojame/svg) 21 | * [SVG for the Responsive Web by Jan van Hellemond](https://speakerdeck.com/jvhellemond/svg-for-the-responsive-web) 22 | * [SVG Strikes Back by Matt Baxter](https://speakerdeck.com/mbxtr/svg-strikes-back) 23 | * [The future of gradients in SVG by Nikos Andronikos](graphicalweb.org/2014/abstracts/9-Advanced_gradients_beyond_SVG_2/future_of_svg_gradients_nikos_andronikos_tgw2014.pdf) 24 | * [The future of SVG and Web Standars by Tavmjong Bah]( http://tavmjong.free.fr/SVG/LG_SVG_2013/lg_2013_svgwg.svg#2_0) 25 | * [The Power of SVG& the Open Web by Doug Schepers](http://www.w3.org/Talks/2014/schepers-2014-conferenciaweb/) 26 | * [The wonderful world of SVG](https://speakerdeck.com/chriscoyier/the-wonderful-world-of-svg) 27 | * [You don't know SVG by Dimitry Baranosky]( http://dmitrybaranovskiy.github.io/wdc14presentation/#0) 28 | * [Whirlwind Tour of SVG (plus RaphaelJS) by Mark Grabanski](http://www.slideshare.net/1Marc/svg-and-raphael-js) 29 | * [Working with SVG - A Primer](http://slides.com/sarasoueidan/working-with-svg-a-primer#/) 30 | 31 | --- 32 | [Back to Home](https://github.com/willianjusten/awesome-svg) 33 | -------------------------------------------------------------------------------- /topics/Snippets.md: -------------------------------------------------------------------------------- 1 | ## Snippets 2 | > Improve your workflow with some snippets. 3 | 4 | * [SVG Smil Snippets for Sublime Text 2/3](http://codepen.io/jorgeatgu/blog/svg-smil-snippets-for-sublime-text-2-3) 5 | * [SVG Snippets for Sublime Text 2/3](http://codepen.io/jorgeatgu/blog/svg-snippets) 6 | 7 | --- 8 | [Back to Home](https://github.com/willianjusten/awesome-svg) 9 | -------------------------------------------------------------------------------- /topics/Softwares.md: -------------------------------------------------------------------------------- 1 | ## SVG Software 2 | > When we need to create more detailed elements. 3 | 4 | * [Adobe Illustrator](http://www.adobe.com/products/illustrator.html) - $19.99/month 5 | * [Affinity Designer](https://affinity.serif.com/) - $49.99 6 | * [Animatron](http://www.animatron.com) - Free (no charge) 7 | * [Autodesk Graphic](https://graphic.com/) - $29.90 8 | * [Boxy SVG](https://boxy-svg.com/main.html) - Free (no charge) 9 | * [Concepts: Smarter Sketching](http://concepts.tophatch.com) - Free with $5.99 In-App Purchase to unlock PRO which includes SVG export 10 | * [iDraw](http://www.indeeo.com/idraw/) - $24.99 11 | * [Inkpad](https://github.com/sprang/Inkpad) - [FOSS](https://en.wikipedia.org/wiki/Free_and_open-source_software) 12 | * [Inkscape](http://www.inkscape.org/en/) - [FOSS](https://en.wikipedia.org/wiki/Free_and_open-source_software) 13 | * [Sketch](http://bohemiancoding.com/sketch/) - $79.99 14 | * [Webcode](http://www.webcodeapp.com/) - $39.99 15 | * [Gravit Designer](https://www.designer.io) - Free (no charge) 16 | * [CleverBrush](https://www.cleverbrush.com) - Free (no charge) to draw online, there are also white-labeled version available 17 | 18 | --- 19 | [Back to Home](https://github.com/willianjusten/awesome-svg) 20 | -------------------------------------------------------------------------------- /topics/Sprites.md: -------------------------------------------------------------------------------- 1 | ## Sprites 2 | > Another approach on how to use SVG sprites. 3 | 4 | * [Ajaxing for your SVG Sprite](https://css-tricks.com/ajaxing-svg-sprite/) 5 | * [Caching SVG Sprite in localStorage](http://osvaldas.info/caching-svg-sprite-in-localstorage) 6 | * [Creating SVG Sprites using Gulp and Sass](https://www.liquidlight.co.uk/blog/article/creating-svg-sprites-using-gulp-and-sass/) 7 | * [Inline SVG Icons](https://kartikprabhu.com/article/inline-svg-icons) 8 | * [How SVG Fragment Identifiers Work](https://css-tricks.com/svg-fragment-identifiers-work/) 9 | * [Usando SVG Sprites](http://willianjusten.com.br/usando-svg-sprites/) - Pt-BR 10 | * [Using Fragment Identifiers on SVG](http://www.broken-links.com/2012/08/14/better-svg-sprites-with-fragment-identifiers/) 11 | * [W3C Documentation](http://www.w3.org/TR/SVG/linking.html#SVGFragmentIdentifiers) 12 | 13 | --- 14 | [Back to Home](https://github.com/willianjusten/awesome-svg) 15 | -------------------------------------------------------------------------------- /topics/Text.md: -------------------------------------------------------------------------------- 1 | ## Text 2 | > SVG is great for create responsive texts and texts with filters. 3 | 4 | * [3 tricks for adding texture to your text](http://www.webdesignerdepot.com/2014/12/3-tricks-for-adding-texture-to-your-text-with-css-and-svg/) 5 | * [Animated SVG Font](http://buseca.github.io/letterbolt/) 6 | * [Create Text Filling with Water Effect](http://blogs.adobe.com/dreamweaver/2015/08/create-a-text-filling-with-water-effect.html) 7 | * [Creative Typography with SVG](http://talks.brennaobrien.com/svg-typography/) 8 | * [Cross Browser svg text paths without javascript even in older ie](http://www.useragentman.com/blog/2013/05/20/cross-browser-svg-text-paths-without-javascript-even-in-older-ie/) 9 | * [CSS vs. SVG: Graphical Text Effects](http://blogs.adobe.com/dreamweaver/2015/07/css-vs-svg-graphical-text.html) 10 | * [Easily center text vertically with svg](http://lea.verou.me/2013/03/easily-center-text-vertically-with-svg/) 11 | * [Fitter Happier Text](http://jxnblk.github.io/fitter-happier-text/) 12 | * [Flowed text in SVG: One step forward, one step back](http://tavmjong.free.fr/blog/?p=938) 13 | * [SVG filters on text](http://css-tricks.com/svg-filters-on-text/) 14 | * [SVG text element](https://www.dashingd3js.com/svg-text-element) 15 | * [SVG text typographic designs](http://css-tricks.com/svg-text-typographic-designs/) 16 | * [Text in SVG](http://apike.ca/prog_svg_text.html) 17 | * [Tspan element](http://tutorials.jenkov.com/svg/tspan-element.html) 18 | 19 | --- 20 | [Back to Home](https://github.com/willianjusten/awesome-svg) 21 | -------------------------------------------------------------------------------- /topics/Tutorials.md: -------------------------------------------------------------------------------- 1 | ## Tutorials 2 | 3 | > Everything you need to know to start with SVG. 4 | 5 | - [5 Gotchas You’re Gonna Face Getting Inline SVG Into Production](http://css-tricks.com/gotchas-on-getting-svg-into-production/) 6 | - [A bit about SVG](http://seesparkbox.com/foundry/a_bit_about_svg) 7 | - [A estrutura do SVG](http://willianjusten.com.br/a-estrutura-do-svg/) 🇧🇷 8 | - [A Look At SVG viewBox and viewport](http://jonibologna.com/svg-viewbox-and-viewport/) 9 | - [A Guide To Building SVG Maps From Natural Earth Data](http://www.smashingmagazine.com/2015/09/making-svg-maps-from-natural-earth-data/) 10 | - [Add svg to web page](http://www.sitepoint.com/add-svg-to-web-page/) 11 | - [Adobe Illustrator’s SVG Interactivity Panel Explained](http://webdesign.tutsplus.com/tutorials/adobe-illustrators-svg-interactivity-panel-explained--cms-23600) 12 | - [An Introduction to Sprite Animation](http://eighthdaydesign.com/journal/sprite-animation) 13 | - [An SVG Primer for Today's Browsers](http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html) 14 | - [Atomic Design no SVG](http://willianjusten.com.br/atomic-design-no-svg/) 🇧🇷 15 | - [Caching SVG Sprite in localStorage](http://osvaldas.info/caching-svg-sprite-in-localstorage) 16 | - [Clipping in CSS and SVG](http://sarasoueidan.com/blog/css-svg-clipping/) 17 | - [Coloring SVGs in CSS Background Images](http://codepen.io/noahblon/blog/coloring-svgs-in-css-background-images) 18 | - [Como usar SVG](http://willianjusten.com.br/como-usar-svg/) 🇧🇷 19 | - [Entendendo e Usando o SVG](http://www.devmedia.com.br/entendendo-e-usando-o-svg/19773) 🇧🇷 20 | - [Export SVG for the web with Illustrator CC](http://creativedroplets.com/export-svg-for-the-web-with-illustrator-cc/) 21 | - [Getting to the point](http://schepers.cc/getting-to-the-point) 22 | - [How I created my first SVG](https://ihatetomatoes.net/how-i-created-my-first-svg/) 23 | - [How SVG Shape Morphing Works](http://css-tricks.com/svg-shape-morphing-works/) 24 | - [How To Define SVG Content for Reuse — The defs, symbol, And use Elements](http://www.vanseodesign.com/web-design/svg-definition-reuse/) 25 | - [How to make an svg lava lamp](http://codepen.io/chrisgannon/blog/how-to-make-an-svg-lava-lamp) 26 | - [How to Style and Animate SVG Elements with CSS](http://medialoot.com/blog/how-to-style-and-animate-svg-elements-with-css/) 27 | - [Imagens em alta resolução utilizando SVG](http://tableless.com.br/imagens-em-alta-resolucao-utilizando-svg/) 🇧🇷 28 | - [Make Responsive SVG Graphics and Infographics](https://www.sitepoint.com/make-responsive-svg-graphs-infographics) 29 | - [MDN docs about SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) 30 | - [Move And Scale SVG Graphics With The viewBox Attribute](http://www.vanseodesign.com/web-design/svg-viewbox/) 31 | - [Por que usar SVG?](http://willianjusten.com.br/por-que-usar-svg/) 🇧🇷 32 | - [Resolution Indepence with SVG](http://www.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/) 33 | - [Structuring, Grouping, and Referencing in SVG](http://sarasoueidan.com/blog/structuring-grouping-referencing-in-svg/) 34 | - [Styling SVG Content with CSS](http://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/) 35 | - [SVG animation research & GSAP](http://codepen.io/FabioG/post/svg-animation-research-gsap) 36 | - [SVG and the preserveAspectRadio Property](http://unmatchedstyle.com/news/svg-and-the-preserveaspectratio-property.php) 37 | - [SVG Art Direction using Viewbox](http://sarasoueidan.com/blog/svg-art-direction-using-viewbox/) 38 | - [SVG Artboard Sizing](http://css-tricks.com/svg-artboard-sizing/) 39 | - [SVG Basic course by Css-Tricks](http://css-tricks.com/lodge/svg/table-of-contents/) 40 | - [SVG Document Structure](http://unicorn-ui.com/blog/svg-document-structure.html) 41 | - [SVG For Absolute Beginners](http://unicorn-ui.com/blog/svg-for-beginners.html) 42 | - [SVG has more potential](https://madebymike.com.au/writing/svg-has-more-potential/) 43 | - [SVG News](http://svg-news.com/) 44 | - [SVGBasics](http://www.svgbasics.com/) 45 | - [The Once and Future SVG](http://radar.oreilly.com/2014/11/the-once-and-future-svg.html) 46 | - [The Ultimate Guide to SVG](http://www.webdesignerdepot.com/2015/01/the-ultimate-guide-to-svg/) 47 | - [The ultimate SVG guide Infographic](https://psdtowp.net/svg.html) 48 | - [Tools And Resources For Editing, Converting And Optimizing SVGs](https://www.smashingmagazine.com/2016/04/tools-and-resources-for-editing-converting-and-optimizing-svgs/) 49 | - [Transforms on SVG Elements](https://css-tricks.com/transforms-on-svg-elements/) 50 | - [Um pouco sobre SVG](http://simplesideias.com.br/um-pouco-sobre-svg) 🇧🇷 51 | - [Understanding the Basics of SVG Transformations](http://creativecrunk.com/understanding-the-basics-of-svg-transformations/) 52 | - [Using SVG](http://css-tricks.com/using-svg/) 53 | - [W3C Docs](http://www.w3.org/Graphics/SVG/) 54 | - [Want to learn about svg? Start with this article](http://www.designyourway.net/blog/resources/want-to-learn-about-svg-start-with-this-article/) 55 | - [Web Developer Reading List Introduction to SVG](http://demosthenes.info/blog/970/Web-Developer-Reading-List-Introduction-to-SVG) 56 | - [What Is SVG And Why Do You Care?](http://unicorn-ui.com/blog/what-is-svg-and-why-do-you-care.html) 57 | - [Why arent you using SVG?](http://code.tutsplus.com/tutorials/why-arent-you-using-svg--net-25414) 58 | - Understanding SVG Coordinate Systems & Transformations [Part 1](http://sarasoueidan.com/blog/svg-coordinate-systems/ "The viewport, viewBox, & preserveAspectRatio"), [Part 2](http://sarasoueidan.com/blog/svg-transformations/ "The transform Attribute"), [Part 3](http://sarasoueidan.com/blog/nesting-svgs/ "Establishing New Viewports") 59 | - [You, Me & SVG - Code School](https://www.codeschool.com/courses/you-me-svg) 60 | 61 | --- 62 | [Back to Home](https://github.com/willianjusten/awesome-svg) 63 | -------------------------------------------------------------------------------- /topics/Videos.md: -------------------------------------------------------------------------------- 1 | ## Videos 2 | > One image says more than 1000 words, and a video?! 3 | 4 | * [A beginners guide to SVG](https://www.youtube.com/playlist?list=PL4-IK0AVhVjP0EeV513_b30lhGRTfMbYd) :us: 5 | * [A great List of SVG Basics](https://www.youtube.com/watch?v=PQxtlY19kto&list=PLL8woMHwr36F2tCFnWTbVBQAGQ6nTcXOO) 6 | * [Animaciones con SVG](https://www.youtube.com/watch?v=vZef4HhybhQ) 🇪🇸 7 | * [Augmenting Animations and Interactivity in SVG with Devina Coutinho](http://youtu.be/oIRITi6IcWQ) 8 | * [Cara Heacock on SVG](https://www.youtube.com/watch?v=J88cOi92whU) 9 | * [Chris Coyier – SVG Is For Everybody](https://vimeo.com/99828116) 10 | * [Chris Wright - Surprise and delight: CSS + SVG](https://www.youtube.com/watch?v=0NFct2yOfiI) 11 | * [Create a SVG Loading Animation with Adobe Illustrator](https://www.youtube.com/watch?v=1lmFMsrLgwM) 12 | * [Dmitry Baranovskiy - You Don't Know SVG](https://www.youtube.com/watch?v=SeLOt_BRAqc) 13 | * [Inkscape Hints and Tips for making SVG files work in ScanNCut Canvas](https://www.youtube.com/watch?v=ktTunTp3Pl4) 14 | * [Introducing SVG Cleaner](http://vimeo.com/34706772) 15 | * [Introduction to Inkscape's Geometry Constructions Tool](http://vimeo.com/14955725) 16 | * [Introduction to SVG and RaphaelJS](https://www.youtube.com/watch?v=ECUhNrlyTkE) 17 | * [Manipulating SVG With CSS](https://www.youtube.com/watch?v=FW1bwgOhQNo) 18 | * [Merry SVG Christmas by I Hate Tomatoes](https://www.youtube.com/watch?v=6j2zdoa6a7Q) 19 | * [Priyanka Herur - Modern web graphics design using SVG](https://www.youtube.com/watch?v=T1BhasZre0k) 20 | * [Raphaël Tutorial—Basics](http://vimeo.com/6411308) 21 | * [Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS](http://youtu.be/hI9roqOKKO8) 22 | * [SVG 2 For the Artist and Developer with Tavmjong Bah](http://youtu.be/UL2-ZAyvXOM) 23 | * [SVG and GreenSock for Complex Animation by Sara Drasner](https://www.youtube.com/watch?v=ZNukcHhpSXg) 24 | * [SVG Coordinate System–Part I](https://www.youtube.com/watch?v=FCOeMy7HrBc) 25 | * [SVG in Motion by Sara Soueidan](https://vimeo.com/album/3953264/video/166790778) 26 | * [SVG Line Animation Tutorial with CSS & Other Fun Stuff](https://www.youtube.com/watch?v=XBdbgD2BaEI) 27 | * [Tutoriel HTML-CSS : Le Format SVG](https://www.youtube.com/watch?v=x3_BJ6tzPqk) 🇫🇷 28 | * [The future of gradients in SVG](https://www.youtube.com/watch?v=47nhFrI_P8Y) 29 | * [The SVG Reality by Sebastiaan Deckers](https://www.youtube.com/watch?v=VQ7_MwjPqKs&list=TLnovNiLOsOSo) 30 | * [Three Ways to animate SVG by CSS-Tricks](http://css-tricks.com/video-screencasts/135-three-ways-animate-svg/) 31 | * [The Wonderful World of SVG by Chris Coyier](https://www.youtube.com/watch?v=tsGa-gcckwY) 32 | * [Understanding SVG with Inkscape](https://www.youtube.com/watch?v=3jw_ED0_H3Q) 33 | * [UtahJS - Murphy Randle - A Smattering of Snap.svg](https://www.youtube.com/watch?v=D_ypzPGDtmI) 34 | * [W3C Standards and Implementors Panel - The Graphical Web 2014](http://youtu.be/TLE3_nmcbWc) 35 | * [Walking the Line: An Exploration of SVG's Past, Present, and Future with Alex Danilo](https://www.youtube.com/watch?list=PLUj8-Hhrb-a1Qbiw-h8tAs8LOW-kDZ846&v=GV3GSxbW_-A) 36 | * [Why Inline SVG is Best SVG](https://www.youtube.com/watch?v=af4ZQJ14yu8) 37 | 38 | --- 39 | [Back to Home](https://github.com/willianjusten/awesome-svg) 40 | -------------------------------------------------------------------------------- /topics/groups.md: -------------------------------------------------------------------------------- 1 | ## Groups and Conferences 2 | > They create the bests tools that we use today! 3 | 4 | * [Graphical Web - Conference](graphicalweb.org) 5 | * [W3C's SVG WG](http://www.w3.org/Graphics/SVG/) 6 | 7 | --- 8 | [Back to Home](https://github.com/willianjusten/awesome-svg) 9 | --------------------------------------------------------------------------------