Learn SVG

Create scalable vector graphics for your website with our SVG tutorials. From simple icons to complex illustrations, we'll show you how to make your visuals shine.

All SVG tutorials:

Filters

Icon Design

New Course: Switching From Font Icons to SVG

Tutorial • Beginner

In our new course, Switching From Font Icons to SVG, you'll learn what those advantages are, when they make SVG a better choice, and the practical steps to...

Andrew Blackman • 7 Feb 2018
SVG

How to Make an Isometric Christmas Tree SVG in Affinity Designer

Tutorial • Beginner

In this tutorial we’ll be getting into the season’s cheer by creating an SVG Christmas tree illustration in Affinity Designer.

Kezz Bracey • 7 Dec 2017
SVG

SVG for Web Designers in 60 Seconds

Tutorial • Beginner

Bitmap images like JPEGs, GIFs, and PNGs all look awful when you scale them up, so if you want to maintain quality at large dimensions you have to increase...

Kezz Bracey • 25 Oct 2017
SVG

Introducing Haiku: Design and Create Motion (Code Optional)

Tutorial • Beginner

With motion on the rise amongst web developers so too are the tools that help to streamline its creation. Haiku is a stand-alone application available to Mac...

Dennis Gaebel • 9 Oct 2017
SVG

Quick Tip: Easily Morph SVGs Using Shape Shifter

Tutorial • Intermediate

In today’s quick tip I’m going to show you how to morph one SVG shape into another using a service called “Shape Shifter” by Alex Lockwood.

Adi Purdila • 6 Jul 2017
SVG

SVG Brilliance: 10 Inspiring Examples From Around the Web

Tutorial • Beginner

Scalable vector graphics (SVG) need no introduction for web designers. They scale up and down crisply, play nicely with animations, they’re a powerful format...

Dennis Gaebel • 16 Aug 2016
SVG

Get Started With Web Animation

Tutorial • Beginner

In this article, I’ll run through the steps involved in learning animation for the web, from what it’s all about, though straightforward transitions, more...

Ian Yates • 14 Jul 2016
SVG

Render an SVG Globe

Tutorial • Intermediate

Write a Python script that can read a world map and project it into a vector globe. Learn the basics of perspective projection and how to build a virtual...

Kelvin Song • 3 Sep 2015
SVG

Free Course: Using SVG Sprites

Tutorial • Beginner

SVG technology has been around for years, but it has only recently started gaining wide usage. In this course, you'll learn how to combine multiple scalable...

Andrew Blackman • 14 Aug 2015
SVG

Sign on the Dotted Line: Finishing Your Animation With Waypoints

Tutorial • Intermediate

In the previous tutorial we animated an SVG signature using CSS. It’s a great effect, making it appear as though the words are being written right there on...

Ian Yates • 4 May 2015
SVG

Sign on the Dotted Line: Animating Your Own SVG Signature

Tutorial • Intermediate

Animating the stroke of an SVG is perfect for simulating handwriting. Over the course of two tutorials we’re going to use CSS animation to make a signature...

Ian Yates • 1 May 2015
SVG

Adobe Illustrator’s SVG Interactivity Panel Explained

Tutorial • Beginner

In today’s tutorial we’ll take a look at a tool in Illustrator which helps authoring of SVG interactivity. It’s called–wait for it–The SVG Interactivity...

Dennis Gaebel • 3 Apr 2015