Website Logo. Upload to /source/logo.png ; disable in /source/_includes/logo.html

Up and Running with SVG

An SVG primer for everyone. Created by Mijingo.

Hello and welcome to Up and Running with SVG from Mijingo. I’m Ryan Irelan, your author, instructor, and host. This is a condensed text version of the full SVG video course available at

Table of Contents

  1. Introduction
  2. What is SVG?
  3. Why Should You Use SVG?
  4. Shortest History Ever of SVG
  5. Is it safe to use SVG?
  6. The Tools We’ll Use
  7. Creating SVGs with Tools
  8. Creating SVGs with Code
  9. Important SVG Elements
  10. Adding SVG to Your Template Code
  11. Styling SVG with CSS
  12. Manipulating SVG with JavaScript
  13. SVG Browser Support
  14. SVG and Performance
  15. Optimizing SVG with Grunt
  16. Additional Tools & Resources
  17. Epilogue & Acknowledgements

Learn by Watching & Doing

The video course companion to this website covers everything you need to know to get up and running with SVG. Over 100 minutes and more than two dozen working code examples, you’ll learn the following:

  • 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

There’s more about the SVG video course over at Mijingo.

Enjoy learning SVG (oh, and here’s an SVG of my name),

Ready to learn more?

Get the Full Video Course