16 of the Best Free SVG Code Tutorials

Most designers create their SVGs in software like Illustrator, and that’s a legit way to go.

But it’s also possible to embed SVG content into a webpage solely in code. No HTTP graphics to download, no extra file to add into the page.

This process is slowly growing in popularity among the web design community and there are so many tutorials out there on the process. Not to mention with code on the page you can manipulate elements a lot easier using JavaScript libraries and similar tools.

If you’re looking into building SVGs in code then you’ll certainly like these tutorials. They’re all totally free and they cover some very handy techniques for developing fully-functional SVG graphics on the web.

Beginner’s Guide To SVG

We can’t get into any of the complex stuff without covering the basics first. And that’s exactly what this tutorial offers.

Kevin Powell published this video in mid-2018 so it’s a fair bit newer compared to other SVG content. This video touches on how an SVG graphic works, what the code looks like, and what sorts of XML attributes you’ll be working with.

All SVG code looks very similar to HTML code. However it’s parsed as XML so there’s slightly different rules for elements and attributes.

This 15 minute video covers it all so it’s well worth checking out if you’re a newbie into this space.

I also suggest this video for anyone who wants a brief walkthrough on how to code a raw SVG graphic. Kevin’s instructional process definitely feels clear enough that anyone could pick up this code and work with it on their own.

SVG Level 1

So here’s another slightly newbie-oriented tutorial covering basic SVG stuff in just over 7 minutes.

This video is far more basic talking more about how SVGs appear on a webpage and the differences between a graphic file and raw code.

However this will not show you how to write code to develop an SVG yourself. Instead this is more like a primer for studying what SVGs are and how browsers render them.

A nice pre-intro to the concept of coding SVGs but not mandatory if you’re already familiar with these ideas.

Backgrounds For Web

Let’s dive right into the deep end of creating fully customized backgrounds for websites. This 20-minute tutorial explains the design process using Illustrator and code exporting.

If you’re already comfortable with illustrator then you’ll have no problem working through this.

If you prefer a different program like Sketch then you can likely follow along, but it’ll take some maneuvering to pick the right tools on your own.

Either way this video is one-part designing, one-part coding, and all parts educational.

SVGs with Animation

Animating SVG objects can be done using CSS, but it’s far easier with CSS + JavaScript.

In this video tutorial you can learn how to add SVGs into a page, how to target them with CSS for adding styles, and then how to animate those styles using JavaScript.

It’s a detailed guide packed with valuable info for all frontend developers. Not to mention the teaching style is incredibly clear so you should be able to follow along with ease.

My only suggestion is to have at least a basic understanding of JavaScript syntax. If you know how to set variables and run functions then you should be able to pick up the key points of this tutorial.

Icons Animated in HTML/CSS

Getting into another detailed animation style we have this awesome video on custom icon animations.

The entire thing does rely on SVGs but you’re animating the graphics with CSS code. This is a bit more complex than just using a single animation library, but it’s also less complicated than working only with JavaScript.

Over this brief 10-minute video you’ll learn all the fundamentals of targeting SVGs with CSS properties to animate specific areas of the graphics.

I can’t say this will be useful to everyone. But I do think it’s worth watching if you want to work with SVGs regularly in web projects.

Custom Stroke Animation

Here’s a video guide that doesn’t include any voiceover content, yet the onscreen instructions are detailed enough that I think it belongs in the list.

In this 7-minute video you’ll learn how to target an SVG element on the page, then apply a custom stroke animation using only raw code.

This is an effect we’ve seen many times and it’s a really nice style to add onto logos, homepage graphics, or even CTA buttons.

You may not find a direct use for this particular technique right now, but the lessons learned in this video can apply to almost any SVG animation project.

Hover Effect

Now this is one more video guide without narration, but it’s also pretty quick so you can whip through it fast.

We all know how to handle CSS hover events using pseudo classes. But what about custom hover effects for an SVG graphic?

That’s where this tutorial can help. It’s pretty short and you will have to watch the screen to see what’s going on. But it’s definitely got enough detail that anyone should be able to follow these steps, even complete newbies.

SVG Can Do That?!

So let me clarify right off the bat this is not specifically a tutorial.

This is a talk given by Sarah Drasner at a recent Full Stack Fest. It totals about 40 minutes long and it details some really cool things you can do with SVGs on the web.

Most of these things I didn’t even know where possible since they’re rather advanced techniques. Some are not really applicable to modern projects, others can be used with other techniques to create some neat page effects.

Either way it’s a presentation worth watching if you have the time and want to dig into more advanced SVG stuff.

Create A Single Animated SVG

I’ve seen a lot of neat SVG animations in my time, but I think this one might take the cake.

It’s a full video guide around 20 minutes long teaching you how to animate a spaceman with a rocket jetpack. Pretty cool right? All in SVG code.

The whole thing is hosted on CodePen along with a detailed guide in the video on how to manipulate that spaceman to achieve a similar effect.

You could use something like this on any homepage, landing page, or pretty much anything where aesthetics matter.

From Sketch To Code

Plenty of designers have moved over to Sketch and may never switch back to Adobe software.

The Sketch ecosystem lets you work with raster graphics and vector graphics, all within the same program with some handy tools. One such tool is the export feature where you can design vectors in Sketch and export them into code for your website.

If you’ve never done this before I highly recommend this video.

It’s really well narrated and has some pretty clear instructions on how to add Sketch into your coding workflow.

Plus there are some advanced techniques in here that even pro-level Sketch users may not know about. Lots of great stuff for your typical MacOS-based developer.

AI Graphics To HTML Code

On the same token you might still be loving Adobe’s software, or just may not be able to switch onto Sketch since it’s Mac-only.

No worries though! I’m here to help with this similar tutorial focused just on Adobe Illustrator.

This is quite a bit shorter with only 3 minutes in runtime. And it assumes you already have some vector graphics designed before you need to export them into HTML.

Although a bit terse and to the point, this video is exceptional for anyone looking to bring SVG graphics from Illustrator into their codebase.

Especially if you’re working with free icons that mostly come in vector format.

SVG Coordinate Systems

When you code an SVG image into your page you’re working with coordinates. This is a huge part of any SVG graphic because they aren’t based on pixels, but rather special maths that organize graphics based on proportions.

If you want to learn more about the coordinate system I highly recommend this brief video.

It only runs about 10 minutes long but it’s also one of the more detailed guides into code-based SVGs on a grid.

You should probably recognize a lot of these terms since they’ve been mentioned in other coding videos. But working on the X/Y coordinate setup will always feel weird until you’ve got a few projects under your belt.

Use this video as a stepping stone to advance your knowledge of SVG code and to get yourself familiar with the process.

Morphing SVGs for Web Design

With vector graphics you can build some pretty crazy animations even without trying. Most of these animations rely on JavaScript but they’re crazy because you can manipulate coordinate points so easily.

I really like this video on the process of morphing and manipulating SVG graphics to your liking.

It’ll take quite a while to fully understand how this all runs. Specifically on the JS code side where there can be so much to learn.

For example, in this video you’ll be working with Anime.js which is one of my absolute favorite animation libraries. But it’s also incredibly complex and not super easy to learn as a total beginner.

Still, if you are seriously interested in SVG animations this is a tutorial worth following.

Loader Icon with SVGs

Many modern webapps use Ajax for in-page loading. This means content is pulled dynamically without a full page refresh.

And many of those pages use small loading graphics to indicate when Ajax is working to pull out data. Some of these graphics are just animated GIFs, but many can work as custom SVGs with animation properties.

If you like the idea of animated SVG loaders check out this video. It’s a free lesson from the team at Tuts+ so you know it’s high quality.

Over 20 minutes you’ll learn how to design a full SVG loader icon from scratch. This includes the full animation cycle and getting it added into a working webpage.

I always appreciate the little details like this and it’s one reason why I advocate for more SVG usage on the web. Especially for dynamic animations where you can really get creative.

Angled Edges

Here’s another interesting video from the Tuts+ YouTube channel, this time focusing on custom angled edges.

Again this comes with the same great audio & video quality that you’d expect from Tuts+. But this one’s a little shorter and it’s a little more specific to a design style of angled edges.

You may find these useful, or you may find these rather pointless. Either way you have to commend the instructor on the level of detail it takes to design something like this.

And technically this tutorial shows you 3 different ways to create angled edges, so you’ll have a few different options in your toolbox if you ever want to replicate this effect.

Also if you’d rather read through this tutorial you can find the full article right here on the Tuts+ website.

Advanced Attributes & CSS

With SVG graphics you have an unending amount of attributes to mess with. And if you’re comfortable with CSS & JS you’ll quickly learn how to manipulate your graphical elements using these attributes.

If you check out this tutorial you’ll get a quick guide on how to create these attributes while exporting graphics from Illustrator.

Sometimes it just makes sense to design everything in vector software first, then export code after. It often saves time and if you know which properties you need it’s a no brainer.

I do think it’s worth learning this method and then deciding if you’d use it or not. It may not work for everyone but custom SVG attributes are definitely powerful if you know how to use them.

Final Thoughts

So with all of these video guides at your disposal it shouldn’t take long to develop your SVG prowess.

Now if you want more written guides just check Google and see what you can find. There is no right or wrong learning resource, just different ways to consume similar information.

Either way SVGs are only getting more popular so if you’re big into the web space this is definitely a topic worth studying.