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 code2020年欧洲杯时间表. 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 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 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 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.
2020年欧洲杯时间表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 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.
2020年欧洲杯时间表Either way this video is one-part designing, one-part coding, and all parts educational.
SVGs with Animation
It’s a detailed guide packed with valuable info for all frontend developers. Not to mention the teaching style is incredibly clear2020年欧洲杯时间表 so you should be able to follow along with ease.
Icons Animated in HTML/CSS
Getting into another detailed animation style we have on custom icon animations.
2020年欧洲杯时间表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.
2020年欧洲杯时间表In this 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.
2020年欧洲杯时间表Now this is one more video guide without narration, but it’s also pretty quick so you can whip through it fast.
2020年欧洲杯时间表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 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 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.
2020年欧洲杯时间表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 might take the cake.
2020年欧洲杯时间表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 along with a detailed guide in the video on how to manipulate that spaceman to achieve a similar effect.
2020年欧洲杯时间表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.
2020年欧洲杯时间表If you’ve never done this before I highly recommend .
2020年欧洲杯时间表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 focused just on Adobe Illustrator.
2020年欧洲杯时间表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 icons2020年欧洲杯时间表 that mostly come in vector format.
SVG Coordinate Systems
2020年欧洲杯时间表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 .
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.
2020年欧洲杯时间表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
2020年欧洲杯时间表I really like 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 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.
2020年欧洲杯时间表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.
2020年欧洲杯时间表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 . It’s a free lesson from the team at Tuts+ so you know it’s high quality.
2020年欧洲杯时间表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.
Here’s another 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 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.
2020年欧洲杯时间表If you check out 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.
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 and see what you can find. There is no right or wrong learning resource, just different ways to consume similar information.
2020年欧洲杯时间表Either way SVGs are only getting more popular so if you’re big into the web space this is definitely a topic worth studying.