Video Course

Up and Running with SVG

by Ryan Irelan

Everything you need to know to get up and running with SVG. Over 100 minutes and more than two dozen working code examples. Read the full description

What's in this Course?

Here’s what is covered:

Creating SVGs in Adobe Illustrator
Converting a bitmap image to SVG
Coding SVG by hand and understanding the attributes
The SVG viewBox attribute and the user coordinate system
How to create SVG rectangles, circles, ellipses, and more.
All of the most important SVG elements and their attributes
The options for adding SVG to your code (the good, the bad, the fallback)
Manipulating code with CSS and JavaScript (override SVG attributes and more)
Animating SVG using both CSS and JavaScript
Considerations about SVG browser support and fallback options
SVG performance considersations, and how to use use
Additional tools and resources to continue learning and masterings SVG

What is the difficulty level?

BeginnerExpert

This course is a beginner level introduction to SVG. The course is ideal for web developers, web designers and front-end developers.

How long is the course?

This course is an approximately 100 minutes and spans 12 videos.

Where do I get the code written during the course?

Links to the code examples are available in PDF course pack available in your Course Library.

What if I have a suggestion?

We love feedback about our training materials. Please get in touch and let us know what you think.

Get in touch

About Ryan Irelan

Ryan is the founder of Mijingo. He has authored numerous courses for people who build for the web. He's covered topics like Git, Craft CMS, website deployments, and more. He's been retained to teach developers at NASA, Canadian Broadcasting Corporation, University of Chicago, and more.