You know that site that you have ambitions to fix up during the holidays? Let’s create something fun for it, while playing around with SVG. If your happy place is usually filled with code — and drawing sounds scary — this article is especially for you.

Scalable Vector Graphics is no new kid on the block anymore. Since you’re reading this, there’s a good chance you’ve used <img src="logo.svg"> or perhaps even have a nifty icon system with <symbol> and <use>. But SVG is more than icons and logos!

We poke fun at ourselves for the identical web designs across the internet; hero image and three column content. SVG could be your first step to breaking free, and a perfect one-day task to add some originality to your personal web site or side project.

Amazing stuff can happen in the intersection of drawing and code. Now that designers are coding, developers could be learning vector graphics, right?! I can’t wait to see what we create, because I think we’ve barely scratched the surface of potential for SVG.

So let’s get to know the SVG elements! A friendly first acquaintance is . Basic lines are drawn with x and y coordinates for the start and end point, and need a stroke attribute with a colour. So crack open your devtools to inspect these examples.

We can write SVG. But we can also draw them in a vector graphic editor. To get the most of our playtime with SVG; let’s do both. \o/ Perhaps you already have Adobe Illustrator, or you can go download and install the free and open source Inkscape.

“But I can’t draw,” you say…? Sure you can! Because basic shapes and simple lines will do just fine. There is so much we can make without any classic drawing skills, and this is precisely what I want to show you. See, this is something anyone can draw:

Basic shapes make great building blocks in illustrations, and the code is both readable and writeable. A needs a radius and a center point in coordinates. While is drawn starting at coordinates for a top left corner, along with width and height.

Colour can be set with the fill and stroke attributes. Note that if the fill attribute is missing, it will always default to black if there is an area that can be filled. This means you want to something like stroke="YellowGreen" fill="none" for an outlined shape.

I like jumping back and forth between drawing and code. Vector graphics software has helped me learn the elements, and to draw more complex paths I’d never want to code. But after drawing, I will use a text editor to tweak and optimize the output.

After you first start playing around with SVG, there are many paths you can take. Check out Pocket Guide to Writing SVG by Joni Trythall, and dive into the many articles on SVG by Sara Soueidan. Start creating basic animations? Or enter the d3.js rabbit hole…

…but don’t forget to scatter some fun illustrations or abstract backgrounds around in that web site you had in mind. Happy holidays — and enjoy your SVG adventures!