A Beginners Guide to SVG

Videos and tutorials with working code examples so you can learn fast.

Video Courses


Professional video courses on SVG to help you learn faster.

 

Up and Running with SVG

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

Get the course

SVG How-to Articles


In addition to the video course, we have articles and tutorials on using SVG.

Why should you use SVG?

There are several reasons why SVG might be a good way to create some graphical assets on your website. Let's review them together.

Important SVG Elements

There are a lot of elements--and attributes--to consider when writing SVG. But to get started, we don't have to learn them all. Let's review the most important ones you'll encounter while working with generated SVG or SVG you coded yourself.

Optimize SVG with Grunt

I wrote up short tutorial and created a video showing how to use svgmin to optimize your SVG files as part of your Grunt workflow.

SVGO Exporter for Adobe Illustrator

A [new project from David Deraedt called SVG NOW that is an alternative SVG exporter for Adobe Illustrator. This is great news because the code that comes out of Illustrator isn't as optimized as it could be.

How to Convert an Existing PNG or GIF Image to SVG Vector

The one online tool I found works best for converting a PNG of GIF to SVG.

Automate SVG Export on OS X

For this tutorial, I want to build a special folder on my computer Desktop that, when I drop an SVG file in, automatically converts the SVG to PNG. It will then move the original SVG file to a different directory and move the PNG to a different directory as a way to clean things up.

Exporting SVG from the Command Line with Inkscape

If you are already using Inkscape to draw your SVGs, then you would be best served scripting the command line tool of the tool that you already have open. This is how to do it.

Exporting SVG from the Command Line with SVGExport

With svgexport, we can easily pass in an SVG file--including any resizing options for the SVG viewport--and convert it to PNG, JPG, JPEG, or PDF of varying quality.

Animating SVG with JavaScript

Animating SVG with JavaScript using the Velocity.js library.

Helpful Links and Resources on SVG

A mega-list of resources, tutorials, and tools for using and learning more about SVG.

What are our customers saying?


"Just purchased your Flexible Twig course. Love it!"
Tyler Morrison
"Been enjoying @mijingo 's Learning Craft video tutorials. Feeling like I've got a good basic understanding of #craftcms Very impressive"
Laura Montgomery
"I bought your Craft Starter Pack a year and a half ago. Worth every dollar. In fact, I would've paid twice as much for it, because you saved me so much time."
Timothy Ingram
"Ben's knowledge of Craft combined with his relaxed and informal teaching style makes for a great learning experience."
Steve Abraham
"Ben puts a lot of thought into his teaching approach and has the ability to explain complex concepts in a way that just make sense"
Gareth Redfern
"Ben is great at taking a complex subject and breaking it down in a way that you can wrap your mind around. I thought that plugin development was something I would never understand, and happily Ben proved me wrong!"
Jonathan Melville
"I really appreciate all the videos and writing you have done. Your work has given me a jump start on my front end development business."
Shan Ricciardi