Intro to Writing SVG: Resources

Slides

The slides for the full course can be found here and slides for the mini workshop are here.

Demos

A complete collection of the practice demos used throughout the course can be found here.

Book

Pocket Guide to Writing SVG

Resources

Vector Graphic Software

• Adobe Illustrator
• Inkscape
• Sketch
• iDraw
• WebCode

Document Structure & Workspace

• SVG Document Structure
• SVG Essentials, Document Structure
• A Look at SVG viewBox and viewport
• preserveAspectRatio in SVG
• SVG Essentials, Coordinates
• The SVG Workspace
• Coordinate Systems, Transforms

Accessibility

• Tips for Creating Accessible SVG
• Using ARIA to Enhance SVG Accessibility
• Accessibility Features of SVG

Optimization

• SVG Optimization: The Basics
• SVGOMG
• Peter Collingridge's Optimizer

Advanced Features

• SVG Gradients
• SVG Patterns
• Fragment Identifiers
• SVG Sprites and Icon Systems
• SVG Filters
• SVG text On A Path
• How to Make SVG Responsive

Where To Get Basic SVGs

• The Noun Project
• IcoMoon
• Evil Icons
• Nucleo
• Or create your very own!

Just Crazy Handy Stuff

• Pocket Guide to Writing SVG
• Using SVG
• SVG News
• Awesome SVG
• 5 Gotchas of Inline SVG
• SVG Immersion Podcast
• Using SVG stroke Attributes

Just Crazy Fun Demos On CodePen

• Advanced Animation Path
• Bubble Layout
• Modal Destroy Concept
• X-Ray Me
• Elastic Stroke
• Text With Animated Backgrounds
• Spinning Loaders
• SVG Blobs

Thank You!

Thank you so much for attending this course! I hope you had fun and learned bunches about using SVG inline.

If you have questions or comments I can be reached by email at info@jonibologna.com or on Twitter at @jonitrythall.

I live on the web at jonibologna.com.