Scalable Vector Graphics (SVG)
Class Notes
New
Other Resources
Basic SVG Resources
- 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
- 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)
Demos