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.

The Tools We’ll Use

This tutorial doesn’t require any unusual tools or technologies. In order to follow along, you’ll want to have access to the following:

  • Adobe Illustrator or another app able to draw vector images.
  • CodePen - All of the code examples are written out and you can use CodePen to easily code and render SVGs, as well as write our CSS and JavaScript.
  • Terminal (I’m on OS X) - for running SVGO to lean down our SVG files for better performance.
  • Web Browser - This goes without saying, but it should support SVG.

If you want to watch as I go through this course and code the SVG images–and get all of the content and code examples–don’t miss the full-length video course version of Up and Running with SVG.

Ready to learn more?

Get the Full Video Course