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.
  1. A Comprehensive Guide to Clipping and Masking in 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...

  2. New Course: Switching From Font Icons to SVG

    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...

  3. Switching From Font Icons to SVG

    Switching From Font Icons to SVG

    Course Beginner

    Using SVG to handle the icons in your website designs can provide a number of advantages over using icon fonts. In this course, you'll learn what those...

  4. 5 SVG Text Projects for Web Designers

    5 SVG Text Projects for Web Designers

    Course Beginner

    SVG has brought some versatile methods into the mix that allow you to create text styles previously only possible within a dedicated graphics application. In...

  5. How to Make an Isometric Christmas Tree SVG in Affinity Designer

    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.

  6. SVG for Web Designers in 60 Seconds

    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...

  7. Introducing Haiku: Design and Create Motion (Code Optional)

    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...

  8. Quick Tip: Easily Morph SVGs Using Shape Shifter

    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.

  9. SVG Brilliance: 10 Inspiring Examples From Around the Web

    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...

  10. How to Build an SVG Sprite Using Gulp

    How to Build an SVG Sprite Using Gulp

    Course Intermediate

    This is a ten-minute “Coffee Break Course” outlining how to use Gulp and associated plugins to build an SVG sprite system. It’s an intermediate level course,...

  11. Get Started With Web Animation

    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...

  12. Animating With Snap.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...