Have you ever heard of SVG? Let me guess it’s another of those weird acronyms Good guess! It stands for Scalable Vector Graphics and it’s the only vector image format for the web.
Let me guess again, you are gonna explain what a vector image is, and why it is scalable? Am I THAT predictable? So images exist in two flavors: bitmaps and vectors.
Bitmap images “simply” define what color each pixel of the image should be painted. The most common bitmap image format for the web are JPEG, PNG and GIF.
Vector images act differently. They provide a set of instructions about how the image should be rendered and it’s up to the rendering software to compute how each pixel should be colored.
There are a lot of benefits and limitations to each format but to make it short: Bitmap images are well suited for highly detailed images,such as photographs whereas Vector images are well suited for less detailed images that need to be scaled at different sizes, like icons or data representations.
Already done?
Wow, that was a short one! Ah!
Well, actually, now we can get into why SVG is so awesome. Indeed, SVG has some characteristics that make it unique for the web. Of course that vector part is very important, especially these days when you want a single image to fit screens of so many different sizes and resolutions.
The trick is that a single bitmap image can be to heavy for low resolution devices, or if they are connected to a low bandwidth network. But if there are light enough then they tend to be blurry on large resolution devices. Choosing the right image format for a given use in a multi-devices context is somewhat tricky and it will definitely worth having its own article.
But beyond that it has the following awesome abilities:
First, it is a text format written with tags, like HTML.
Second, it can be styled with CSS, like HTML.
Third, it can be scripted with JavaScript, like HTML.
Yeah!
So adding a touch of SVG to your HTML documents, allows to create some awesome graphic effects like this, or this or even this!
I’ve got the feeling you’re hiding something. I’m not, but from what I’ve said you might think it’s as easy to create SVG by hand as it is HTML.
No, it’s not!
The trick is that HTML is about describing documents, where SVG is about describing pictures. So if it’s quite easy to draw rectangles and circles by hand, if you want to create more complex shapes, it is kind of a challenge.
For that reason, if you want to create complex images with SVG you’ll need either some serious mathematical skills or a good piece of vector drawing software. I’m definitely a drawing software person. I don’t want to be prescriptive of any software because it is always a personal choice that depends on many factors, but at the time of shooting this article, Inskape, Illustrator and Sketch are very likely the most used software to output SVG out of the box.
There are also many JavaScript libraries that can be very helpful such as Snap.svg, Bonsai or D3.js
Okay, let’s recap.
SVG is a vector image format for the web, perfect to create images that stay sharp at any scale. It can be authored, styled and scripted like HTML would be. Creating such images by hand is not impossible but… it’s easier to use a drawing software to do so.
Yeah, it’s simpler than it looks!
Interestingly enough, to be mastered, SVG requires both technical and design skills, which is always a winning skill set when you’re doing web stuff. As SVG is all about graphics I suggest you to find a good vector drawing software and start having fun with it.
In the meantime, if you enjoyed that video, feel free to like it and to share it with your friends… a good way to bring both your mathematicians and designers friends to the same party. To continue the discussion feel free to comment down below or join me and my colleagues on Twitter.
And finally… Long live the open web, see you next time!
