Skip to content

andychip/SVG-Resources

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 

Repository files navigation

#SVG Resources

A curated list of SVG Resources. Have suggestions for this list you think are useful? Email me at andychip77(@)gmail.com

##Talks Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS https://www.youtube.com/watch?v=hI9roqOKKO8

##Understanding W3C SVG Shapes http://www.w3.org/TR/SVG/shapes.html

Getting Started http://webdesign.tutsplus.com/tutorials/getting-started-with-scalable-vector-graphics-svg--webdesign-7515

SVG Browser Support http://caniuse.com/#cats=SVG

Understanding SVG Coordinate Systems & Transformations (Part 1) http://sarasoueidan.com/blog/svg-coordinate-systems/

Understanding SVG Coordinate Systems & Transformations (Part 2) http://sarasoueidan.com/blog/svg-transformations/

Understanding SVG Coordinate Systems & Transformations (Part 3) http://sarasoueidan.com/blog/nesting-svgs/

Structuring, Grouping, and Referencing in SVG http://sarasoueidan.com/blog/structuring-grouping-referencing-in-svg/

Clipping in CSS and SVG http://sarasoueidan.com/blog/css-svg-clipping/

Introduction to SVG Animation http://davidwalsh.name/svg-animation

SVG Gradient Issues http://jonibologna.com/svg-gradient-browser-quirks/

Understanding the SVG fill-rule Property http://www.sitepoint.com/understanding-svg-fill-rule-property/

##Techniques Using SVG http://css-tricks.com/using-svg/

Tips for Creating Accessible SVG http://www.sitepoint.com/tips-accessible-svg/

SVG styling http://blogs.adobe.com/webplatform/2013/01/08/svg-styling/

Animating SVG's http://oak.is/thinking/animated-svgs/

Animated Line Drawing http://jakearchibald.com/2013/animated-line-drawing-svg/

Animated inline SVG Icons http://jonibologna.com/animated-inline-svg-icons/

Animating SVG text on a path http://jonibologna.com/svg-text-along-a-path/

Masking http://atomicrobotdesign.com/blog/htmlcss/svg-masks-html5-video-and-firefox-4/

Masking & Animation http://codepen.io/yoksel/pen/eIxmr?editors=110

Compressing a png like a jpg using SVG http://peterhrynkow.com/how-to-compress-a-png-like-a-jpeg/

Using D3 and SVG Filters to Create a Fog of War Effect http://vasir.net/blog/data-visualization/using-d3-and-svg-filters-to-create-fog-of-war

A Guide to SVG Animations (SMIL) http://css-tricks.com/guide-svg-animations-smil

Styling And Animating SVGs With CSS http://www.smashingmagazine.com/2014/11/03/styling-and-animating-svgs-with-css/

##Apps SVG Editor http://petercollingridge.appspot.com/svg-editor

Plain Pattern Maker http://www.kennethcachia.com/plain-pattern/

Clip Path Generator http://cssplant.com/clip-path-generator

##Resources SVGeneration http://www.svgeneration.com

Trianglify http://qrohlf.com/trianglify/

##libraries Snap.svg http://snapsvg.io/

SVG.js http://svgjs.com/

Lazy Line Painter http://lazylinepainter.info/

Two.js http://jonobr1.github.io/two.js/

PatternBolt http://buseca.github.io/patternbolt/

##Examples http://svg-wow.org

http://www.responsivelogos.co.uk/

http://codepen.io/wlindner/pen/IKGJi

About

A curated list of SVG Resources.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published