Scalable Vector Graphics, yay!

What is it, and how it came to be?

SVG, or Scalable Vector Graphics is a royalty-free, open standard used to define vector-based graphics, based on XML, a markup language by W3C. It supports static, dynamic and animated graphics.
It describes graphics using bidimensional vectors, and one of it biggest characteristics is that, when zoomed in, its graphics do not lose quality! It is perfect for when you need smooth, yet sharp graphics or text, that'll look the same regardless of how much you zoom in.

SVG was created by the World Wide Web Consortium (W3C) in the year of 1999.
The W3C deemed necessary the creation of a standard format for vector graphics in 1996. In 1998, six companies submitted their ideas for this standard, and after carefully analyzing them, W3C decided that they were all shit, and that they would be better by creating their own standard (informed by the submitted ideas), thus SVG was born!
And eventually, two extra versions of SVG were introduced, with focus on mobile and low-end devices: Tiny SVG and SVG Basic.

How does it work?

Basically, it defines vector elements in xml format. It has attributes and elements to define shapes and text, and it can be even used to display animations.
SVG allows three types of graphical objects:

Vectorial geometric shapes (circles, squares, et all);
Raster/bitmap images;
Text.

SVG images may be compressed as gzip files, with no data loss, using the .svgz format. But usually a SVG file will be smaller than a raster image, so unless you're recreating The Last Supper by Leonardo Da Vinci in Full HD 4K™®©, you probably won't need it. Probably.

What can it be used for?

Anything you want! In particular:

Web graphics: the reason why I made this article/tutorial. You can use SVG to make logos, navigation buttons, shapes and other cool stuff! Another thing that comes to my mind is that you can use it to write your email address in the contact section of your website, instead of writing it in a traditional paragraph tag, to maybe mitigate some spam.
Diagrams and charts: it's a bit of a tricky thing to do, but you can use SVG to make some good looking diagrams and charts for your website (or whatever you're using SVG in), instead of using javascript libraries such as plotly.js !
Animations: SVG can be animated with many layers ;^]

And how can i view it?

They can be viewed with any major browser since most of them support SVG (either natively or through JavaScript libraries), and they can be edited with any text editor, such as Notepad, Sublime Text, Emacs, Vim, VSCode, and so on!
And they can also be edited with any drawing program with SVG support, such as Inkscape, Affinity Design, and many, many others!

However, if you would like to understand how SVG works in its core, I recommend you to learn how to write SVG in a text editor. Below, I will teach you how to make a simple SVG skull in CSS and HTML!

How to make a simple vector skull with CSS and HTML:

Before i begin this tutorial, please note that this is a very barebones tutorial (pun not intended). SVG can be a bit... Temperamental, and there's a big chance the skull might look fucked up in your browser.
Here's a screenshot of what it looks like in my browser:

And here's how it looks like in yours:

For this tutorial, you need a basic understantind of HTML and CSS. Some basic understanding of how XML works is also welcome.
For copy-paste ease, i made a pastebin with the source-code of this tutorial. Click me to access it! (Archive)

Start a new HTML document, and add some basic boilerplate to it:

You don't have to add a head tag if you don't want to. The style tag will be useful for later.

Define some classes in the style tag. They'll be necessary for the SVG tags.

In case you don't know: the transform attribute allows you to apply 2d or 3d transformations to HTML elements, such as rotation, animations, or move any element manually.
The translate property lets you move any element you'd like manually.

Now let's add our first SVG tag! This one is the main rectangle that defines the skull, and the lines that illustrate its teeth.

Here's what's going on: all the SVG elements will be wrapped inside of the div, and they'll all be centralized using the “display: block; margin: auto;” properties. If you don't use this property, the vector elements will look very fucked whenever you resize the window, so don't erase it.
The rectangles are drawn using the rect tag, and the lines using the line tag. The rectangle's width, height and color are defined in its respectives properties.
The x1 and y1 define the beginning of the line, and the x2 and y2 define its end. I used them to position the white lines, and colored them white with the “fill” property.
And everything is defined in the same SVG tag because... Why not lol?

Now we will define both of the top triangles that help with giving the right shape to its forehead, and the two squares that shape its cheekbones.

That's where the transform properties come in. It's how i manually placed these elements in the right place! The first px moves in a horizontal/x axis, and the second one moves in a vertical/y axis.
Polygons are defined with the polygon tag and must have at least three sides. They have one very important attribute: points. It lists the amount of points the desired polygon has, and must have an x and an y axis.

With the basic shapes in place, it's time to draw the eyes!

The eyes are defined by circles, using the circle tag.
The r property stands for radius, and it affects the size of the circle. The cx and cy define its axis, and are 0 by default.
And yes, they're mismatched on purpose. It looks goofy like this, and i like it.

There you go! Save the .html file, open it in a browser, and the skull will appear!

Conclusion

That's it! In this article/tutorial, you just learned about wtf is SVG, wtf did it came from, htf does it work, how to visualize it and how to make a spooky, spooky skull with it! Quite fitting for this month, isn't it? ;^]

WTF are SVGs?

… And how to make vector graphics with CSS and HTML!

Index