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.

Introduction

If you already know how to use JavaScript and HTML for web-programming, the learning curve will be pretty gentle, particularly in view of the benefits to be gained. –David Dailey

Welcome to Up and Running with SVG. This is a written tutorial that is published in conjunction with the Mijingo video course of the same name. If you’d like to learn faster using our 100+ minute video course, you can grab it from the Mijingo website.

Otherwise, please read in whichever order you see fit. The course is written to be read and completed in order but you may be here for something specific. The table of contents is listed on the homepage, if you need to quickly find what you’re looking for.

There’s a very important section at the end that contains dozens of links to more high quality resources on SVG. Don’t miss that, especially if you are already familiar with SVG.

This course is broken up into several sections. We’ll start slow by learning a bit about SVG and then creating our first SVG file using Adobe Illustrator. After that we’ll jump into code, plot some points on our coordinate system and make the shapes come to life. We’ll build on that by manipulating SVG with CSS and JavaScript, and then see some challenges we might face with browser support and performance.

Ready to go? Let’s continue then!

Ready to learn more?

Get the Full Video Course