{"id":1720,"date":"2019-02-11T08:36:06","date_gmt":"2019-02-11T08:36:06","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=1720"},"modified":"2019-06-16T01:29:46","modified_gmt":"2019-06-16T01:29:46","slug":"free-svg-code-tutorials-for-designers-devs","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/code\/free-svg-code-tutorials-for-designers-devs\/","title":{"rendered":"Free SVG Code Tutorials for Designer’s & Dev’s"},"content":{"rendered":"\n

Most designers create their SVGs in software like Illustrator and that\u2019s a legit way to go.<\/p>\n\n\n\n

But it\u2019s also possible to embed SVG content into a web page\u00a0solely in code<\/strong>. No HTTP graphics to download & no other extra file to add into the page.<\/p>\n\n\n\n

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 JS libraries & other similar tools.<\/p>\n\n\n\n

If you\u2019re looking into building SVGs in code then you\u2019ll certainly like these tutorials. They\u2019re all totally free and they cover some very handy techniques for developing fully-functional SVG graphics on the web.<\/p>\n\n\n\n

Beginner\u2019s Guide To SVG<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

We can\u2019t get into any of the complex stuff without covering the basics first. And that\u2019s exactly what this tutorial<\/a> offers.<\/p>\n\n\n\n

Kevin Powell published this video in mid-2018 so it\u2019s 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\u2019ll be working with.<\/p>\n\n\n\n

All SVG code looks very similar to HTML code. However it\u2019s parsed as XML so there\u2019s slightly different rules for elements and attributes.<\/p>\n\n\n\n

This 15 minute video covers it all so it\u2019s well worth checking out if you\u2019re a newbie into this space.<\/p>\n\n\n\n

I also suggest this video for anyone who wants a brief walk-through on\u00a0how to code<\/strong>\u00a0a raw SVG graphic. Kevin\u2019s instructional process definitely feels clear enough that anyone could pick up this code and work with it on their own.<\/p>\n\n\n\n

SVG Level 1<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n

So here\u2019s another slightly newbie-oriented tutorial covering basic SVG stuff<\/a> in just over 7 minutes.<\/p>\n\n\n\n

This video is far more basic talking more about how SVGs appear on a web page and the differences between a graphic file and raw code.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

A nice pre-intro to the concept of coding SVGs but not mandatory if you\u2019re already familiar with these ideas.<\/p>\n\n\n\n

Backgrounds For Web<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Let\u2019s dive right into the deep end of creating fully customized backgrounds for websites. This 20-minute tutorial explains<\/a> the design process using Illustrator and code exporting.<\/p>\n\n\n\n

If you\u2019re already comfortable with illustrator then you\u2019ll have no problem working through this.<\/p>\n\n\n\n

If you prefer a different program like Sketch then you can likely follow along, but it\u2019ll take some maneuvering to pick the right tools on your own.<\/p>\n\n\n\n

Either way this video is one-part designing, one-part coding, and all parts educational.<\/p>\n\n\n\n

SVGs with Animation<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Animating SVG objects can be done using CSS, but it\u2019s far easier with CSS + JavaScript.<\/p>\n\n\n\n

In this video tutorial<\/a> 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.<\/p>\n\n\n\n

It\u2019s a detailed guide packed with valuable info for all front-end developers. Not to mention the teaching style is\u00a0incredibly clear<\/strong>\u00a0so you should be able to follow along with ease.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Icons Animated in HTML\/CSS<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Getting into another detailed animation style we have this awesome video<\/a> on custom icon animations.<\/p>\n\n\n\n

The entire thing does rely on SVGs but you\u2019re animating the graphics with CSS code. This is a bit more complex than just using a single animation library, but it\u2019s also less complicated than working only with JavaScript.<\/p>\n\n\n\n

Over this brief 10-minute video you\u2019ll learn all the fundamentals of targeting SVGs with CSS properties to animate specific areas of the graphics.<\/p>\n\n\n\n

I can\u2019t say this will be useful to everyone. But I do think it\u2019s worth watching if you want to work with SVGs regularly in web projects.<\/p>\n\n\n\n

Custom Stroke Animation<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Here\u2019s a video guide that doesn\u2019t include any voice-over content, yet the onscreen instructions are detailed enough that I think it belongs in the list.<\/p>\n\n\n\n

In this 7-minute video<\/a> you\u2019ll learn how to target an SVG element on the page, then apply a custom stroke animation using only raw code.<\/p>\n\n\n\n

This is an effect we\u2019ve seen many times and it\u2019s a really nice style to add onto logos, homepage graphics, or even CTA (Call To Action) buttons.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Hover Effect<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Now this is one more video guide without narration, but it\u2019s also pretty quick so you can whip through it fast.<\/p>\n\n\n\n

We all know how to handle CSS hover events using pseudo classes. But what about custom hover effects for an SVG graphic?<\/p>\n\n\n\n

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

SVG Can Do That?!<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

So let me clarify right off the bat this is not<\/strong> specifically a tutorial.<\/p>\n\n\n\n

This is a talk<\/a> 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.<\/p>\n\n\n\n

Most of these things I didn\u2019t even know where possible since they\u2019re rather advanced techniques. Some are not really applicable to modern projects, others can be used with other techniques to create some neat page effects.<\/p>\n\n\n\n

Either way it\u2019s a presentation worth watching if you have the time and want to dig into more advanced SVG stuff.<\/p>\n\n\n\n

Create A Single Animated SVG<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

I\u2019ve seen a lot of neat SVG animations in my time, but I think this one<\/a> might take the cake.<\/p>\n\n\n\n

It\u2019s a full video guide around 20 minutes long teaching you how to animate a spaceman with a rocket jet-pack. Pretty cool right? All in SVG code.<\/p>\n\n\n\n

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

You could use something like this on any homepage, landing page, or pretty much anything where aesthetics matter.<\/p>\n\n\n\n

From Sketch To Code<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Plenty of designers have moved over to Sketch and may never switch back to Adobe software.<\/p>\n\n\n\n

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<\/strong> for your website.<\/p>\n\n\n\n

If you\u2019ve never done this before I highly recommend this video<\/a>.<\/p>\n\n\n\n

It\u2019s really well narrated and has some pretty clear instructions on how to add Sketch into your coding workflow.<\/p>\n\n\n\n

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 Mac OS – based developer.<\/p>\n\n\n\n

AI Graphics To HTML Code<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

On the same token you might still be loving Adobe\u2019s software, or just may not be able to switch onto Sketch since it\u2019s Mac-only.<\/p>\n\n\n\n

No worries though! I\u2019m here to help with this similar tutorial<\/a> focused just on Adobe Illustrator.<\/p>\n\n\n\n

This is quite a bit shorter with only 3 minutes in run-time. And it assumes you already have some vector graphics designed before you need to export them into HTML.<\/p>\n\n\n\n

Although a bit terse and to the point, this video is\u00a0exceptional<\/strong>\u00a0for anyone looking to bring SVG graphics from Illustrator into their code-base.<\/p>\n\n\n\n

Especially if you\u2019re working with free icons that mostly come in vector format.<\/p>\n\n\n\n

SVG Coordinate Systems<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

When you code an SVG image into your page you\u2019re working with coordinates. This is a huge part of any SVG graphic because they aren\u2019t based on pixels, but rather special maths that organize graphics based on proportions.<\/p>\n\n\n\n

If you want to learn more about the coordinate system I highly recommend this brief video<\/a>.<\/p>\n\n\n\n

It only runs about 10 minutes long but it\u2019s also one of the more detailed guides into code-based SVGs on a grid.<\/p>\n\n\n\n

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

Use this video as a stepping stone to advance your knowledge of SVG code and to get yourself familiar with the process.<\/p>\n\n\n\n

Morphing SVGs for Web Design<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

With vector graphics you can build some\u00a0pretty crazy animations<\/strong> even without trying. Most of these animations rely on JavaScript but they\u2019re crazy because you can manipulate coordinate points so easily.<\/p>\n\n\n\n

I really like this video<\/a> on the process of morphing and manipulating SVG graphics to your liking.<\/p>\n\n\n\n

It\u2019ll 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.<\/p>\n\n\n\n

For example, in this video you\u2019ll be working with Anime.js<\/a> which is one of my absolute favorite animation libraries. But it\u2019s also incredibly complex and not super easy to learn as a total beginner.<\/p>\n\n\n\n

Still, if you are seriously interested in SVG animations this is a tutorial worth following.<\/p>\n\n\n\n

Loader Icon with SVGs<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Many modern web-apps\u00a0use Ajax<\/a>\u00a0for in-page loading. This means content is pulled dynamically without a full page refresh.<\/p>\n\n\n\n

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 GIF’s, but many can work as custom SVGs with animation properties.<\/p>\n\n\n\n

If you like the idea of animated SVG loaders\u00a0check out this video<\/a>, it\u2019s free.<\/p>\n\n\n\n

Over 20 minutes you\u2019ll learn how to design a full SVG loader icon from scratch. This includes the full animation cycle and getting it added into a working web-page.<\/p>\n\n\n\n

I always appreciate the little details like this and it\u2019s one reason why I advocate for more SVG usage on the web. Especially for dynamic animations where you can really get creative.<\/p>\n\n\n\n

Angled Edges<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Here\u2019s another\u00a0interesting video<\/a>\u00a0from this YouTube channel, this time focusing on custom angled edges.<\/p>\n\n\n\n

Again this comes with the same great audio & video quality that you\u2019d expect from us. But this one\u2019s a little shorter and it\u2019s a little more specific to a design style of angled edges.<\/p>\n\n\n\n

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<\/strong> it takes to design something like this.<\/p>\n\n\n\n

And technically this tutorial shows you 3 different ways to create angled edges, so you\u2019ll have a few different options in your toolbox if you ever want to replicate this effect.<\/p>\n\n\n\n

Advanced Attributes & CSS<\/h4>\n\n\n\n
\"\"<\/figure>\n\n\n\n

With SVG graphics you have an unending amount of attributes to mess with. And if you\u2019re comfortable with CSS & JS you\u2019ll quickly learn how to manipulate your graphical elements using these attributes.<\/p>\n\n\n\n

If you check out this tutorial<\/a> you\u2019ll get a quick guide on how to create these attributes while exporting graphics from Illustrator.<\/p>\n\n\n\n

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\u2019s a no brainier.<\/p>\n\n\n\n

I do think it\u2019s worth learning this method and then deciding if you\u2019d use it or not. It may not work for everyone but custom SVG attributes are definitely powerful if you know how to use them.<\/p>\n\n\n\n

So with all of these video guides at your disposal it shouldn\u2019t take long to develop your SVG prowess.<\/p>\n\n\n\n

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

Either way SVGs are only getting more popular so if you\u2019re big into the web space this is definitely a topic worth studying.<\/p>\n","protected":false},"excerpt":{"rendered":"

Most designers create their SVGs in software like Illustrator and that\u2019s a legit way to go. But it\u2019s also possible to embed SVG content into a web page\u00a0solely in code. No HTTP graphics to download & no other extra file to add into the page. This process is slowly growing in popularity among the web design community […]<\/p>\n","protected":false},"author":2,"featured_media":1721,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[4,85,62],"tags":[25,86,110],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/03\/01-free-beginner-guide-to-svg.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-rK","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/1720"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=1720"}],"version-history":[{"count":2,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/1720\/revisions"}],"predecessor-version":[{"id":2488,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/1720\/revisions\/2488"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/1721"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=1720"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=1720"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=1720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}