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

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
SVG

Create an Animated SVG Loader Using GreenSock’s DrawSVG

Tutorial • Intermediate

Today’s tutorial is one that will leave you feeling impressed that you’ve written so little code to achieve such a delightful animation. DrawSVG by the...

Dennis Gaebel • 20 Jan 2015
SVG

How to Implement Cross-Browser SVG Sprites

Tutorial • Intermediate

In this tutorial I’m going to demonstrate a basic implementation of some SVG icons, how to provide a fallback, and how to turn them into an SVG sprite.

David Darnes • 28 Oct 2014
SVG

How to Use “animateTransform” for Inline SVG Animation

Tutorial • Beginner

Today we’ll be stepping you through the basics of using “animateTransform” to generate inline animations with SVG (scalable vector graphics).

Kezz Bracey • 21 Oct 2014
Performance

Quick Tip: Fewer Nodes = Lighter SVG

Tutorial • Beginner

Recently I found myself playing about on the snap.svg site (take a look if you haven't used it yourself yet). It has a really nice SVG polygon background on...

Ian Yates • 14 Aug 2014
SVG

7 Non-Raster Approaches for Making the “Hamburger” Menu Icon

Tutorial • Beginner

We're going to look at seven different approaches to creating the infamous “Hamburger” menu icon, without raster images. The challenge is to reduce HTTP...

Guy Routledge • 7 Aug 2014
SVG

How to Manipulate and Animate SVG With Snap.svg

Tutorial • Beginner

In this tutorial we're going to introduce Snap.svg, a JavaScript library which assists in animating and manipulating SVG content. To demonstrate some of the...

Catalin Miron • 22 Jul 2014
SVG

Recreating the Touch Ripple Effect as Seen on Google Design

Tutorial • Intermediate

Google's new design efforts are vast and justify a significant amount of conversation. But instead of talking about the theory of "Material Design" and the...

Jonathan Cutrell • 14 Jul 2014
SVG

How to Build a Page Scroll Progress Indicator With jQuery and SVG

Tutorial • Intermediate

Today we will be looking at a few techniques for displaying scroll progress for users who are reading a page. We will cover two specific techniques you can...

Jonathan Cutrell • 30 Apr 2014
Icon Design

Manipulating SVG Icons With Simple CSS

Tutorial • Beginner

This article is the second in a three-part series showing the new approaches to iconography Iconic will be delivering. If you like what you see in this...

P.J. Onori • 8 Oct 2013
SVG

Getting Started With Scalable Vector Graphics (SVG)

Tutorial • Beginner

As a web designer it's high time you knew how to implement SVG (Scalable Vector Graphics) into your websites. Let's now take a look at the basics of SVG, as...

Aaron Lumsden • 27 Jun 2012