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.
Read moreRead less
All content
Courses
Tutorials

All SVG tutorials:

  1. Create an Animated SVG Loader Using GreenSock’s DrawSVG

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

  2. How to Implement Cross-Browser SVG Sprites

    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.

  3. How to Use “animateTransform” for Inline SVG Animation

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

  4. Quick Tip: Fewer Nodes = Lighter SVG

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

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

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

  6. How to Manipulate and Animate SVG With Snap.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...

  7. Recreating the Touch Ripple Effect as Seen on Google Design

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

  8. How to Build a Page Scroll Progress Indicator With jQuery and 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...

  9. Manipulating SVG Icons With Simple CSS

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

  10. Getting Started With Scalable Vector Graphics (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...

  11. Why Aren’t You Using SVG?

    Why Aren’t You Using SVG?

    Tutorial • Beginner

    SVG, or Scalable Vector Graphics, is a XML-style markup driven vector graphic rendering engine for the browser. SVG is supported in every browser, except IE...

Related Categories

CSS
HTML/CSS
UI Design
Sketch
Unlimited Downloads
From $16.50/month
Get access to over one million creative assets on Envato.
Over 9 Million Digital Assets
Everything you need for your next creative project.
Create Beautiful Logos, Designs
& Mockups in Seconds
Design like a professional without Photoshop.
Join the Community
Share ideas. Host meetups. Lead discussions. Collaborate.