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


Get immediate access to the course.
Secure checkout.

Start Watching for Free

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?


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