SVG is short for Scalable Vector Graphic. I’m sure you know what “scalable” and “graphic” mean but “vector” is probably new, unless you’ve seen Airplane. And in that sense, vectoring is somewhat similar in both graphics and flight. However, since we’re neither landing planes nor endangering lives (so chill out), we’ll focus on how vectors work in graphics.
A vector involves math. WAIT, WAIT, COME BACK! You don’t have to do the math! The browser does the math for you. What you or your designer does is use a program like Adobe Illustrator or, in some cases, Photoshop to draw something, let’s say a logo like the following.
If you’ve never seen this logo before, you are the only one so be ashamed. This logo is a great example of how vectors can work. All of the edges of this logo are lines and these lines “swoosh” meaning they curve nicely. There is one line on top and one line on the bottom, right? These lines can be generated by a browser if you tell the browser how to do it.
This is where the math comes in. The designer uses Illustrator to draw out the logo. In this case, they draw two curved lines and connect them together. Then the designer does math … ha, ha, just kidding … the designer saves the file in SVG format.
That’s it for the human end of creating this logo. Seriously, that’s it. Two sentences worth of work in this case. You might be wondering why you pay them a ton to create a logo but. Again, that’s another article.
Upon saving the file, Illustrator generates some math (we’ll leave it at that) that will tell the browser how to generate the final visual of the logo. That math is actually just text that the browser will later read just like it reads any other text file.
Once the file is saved, the designer can now upload the logo and insert it into the web page (probably the header area).
When someone visits the page with the logo, the browser reads the vector file, does the math and displays the graphic.
See, Ma? No math. At least for humans.
So why use vectors at all? Because vectors are awesome. But the most important reason is that they are scalable, hence Scalable Vector Graphic (redundant, I know). Because the browser is drawing the logo “on the fly” whenever someone visits the page (and whenever someone resizes the page, btw), it will redraw the graphic at the necessary size and it will look brand new each time with precise lines each time. So these graphics look awesome at any size, hence “scalable”.
There are other cool reasons like the fact that they are animatable. You can make them move and change shape (and the browser does all the work). Plus, they are super small compared to other types of graphics (since, technically, they are just a bunch of text instructions for the browser and text is small in size compared to things like images)
There are other benefits but will leave it at those three since those are the most popular reasons. Now you know why your designer or developer is asking for an SVG of your logo. They want to make you look good!
And for those of you that have never seen “Airplane”: