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 content:

Filters

SVG

A Comprehensive Guide to Clipping and Masking in SVG

Tutorial • Intermediate

In this article we’ll take a look at some advanced methods of clipping and masking in SVG along with demos that showcase them to great effect. Let’s get...

Dennis Gaebel • 15 Feb 2018
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

Animating With Snap.svg

Course • Intermediate

SVG is a powerful way to create vector-based graphics that resize flawlessly. In this course, you will learn how to use the Snap.svg JavaScript framework to...

Craig Campbell • 13 Oct 2015
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