Scalable Vector Graphics (SVG)
SVG Basics
SVG Animation
There are two basic categories of simple SVG animations. More complex effects and combinations can be achieved with JavaScript libraries like snap.svg.
Demos
Other Resources
Basic SVG Resources
- SVG ON THE WEB A Practical Guide
- CSS Tricks: Using SVG - Basic overview
- Jenkov.com: SVG Tutorial - This site isn't much to look at but includes a lot of good information
- Sitepoint: The Designer’s Guide to Working with SVG – Pt 1 - Another basic overview
- Sitepoint: Tips for Creating Accessible SVG - must read
- Sara Soueidan: Structuring, Grouping, and Referencing in SVG - Read the first section on grouping
- Styling And Animating SVGs With CSS
- Sitepoint: Getting Started with SVG Gradients - Intro to gradients in SVG
- Building Better Interfaces with SVG - Slideshow overview of how SVG is awesome
- Making SVGs Responsive with CSS
SVG Viewbox
- Understanding SVG Coordinate Systems and Transformations (Part 1) — The viewport, viewBox, and preserveAspectRatio
- Understanding SVG Coordinate Systems & Transformations (Part 2) – The transform Attribute
- Understanding SVG Coordinate Systems & Transformations (Part 3) – Establishing New Viewports
- Art-Directing SVG Images With The viewBox Attribute: How-To, Notes, Tips and Why We Need A viewBox Property in CSS
- Learning SVG
- Illustrator CC for Web Design: SVG - Details examples of different ways to export your SVG files from Illustrator CC 2015
- Design the Web: Responsive SVG Images - Shows examples of how to scale SVG images as well as use media queries to show and hide parts of the graphic. Includes a short video with an infographic as an example.
- SVG Animations with CSS (3 videos)
- Understanding SVG (9 Videos)