The Code Behind an SVG
A Scalable Vector Graphic, or SVG for short, is an image defined by geometric shapes (numbers) as opposed to bitmap images. Unlike JPG and PNG (which are made up of little squares), a vector graphic can be sized up infinitely without degrading in quality.
Or in simple terms, it means an image that DOES NOT lose any quality when it is super zoomed in.
To elaborate more on SVGs and what goes on under the hood as well as the differences between it and other formats, I took an image of a coffee cup from my favorite local coffee shop and turned it into an Affinity design icon for my Github account.
I saved this image as both a PNG and an SVG. At a glance, they both look identical but you begin to see where their similarities end and the power of SVGs once you zoom in.
Here is the cup zoomed in as a PNG file. As you continue to zoom in, all the small boxes that make up the image become apparent. There are literally thousands to millions of boxes that make up a JPG and PNG image. When viewing the entire image as a whole and unzoomed, the human eye cannot see these boxes and the curves and edges look smooth.
Now compare that to the same images but saved and zoomed in as an SVG file. You can zoom in a million times and will never see those tiny boxes, just smooth crisp edges. The quality is never lost. That is the power of SVG as it uses numbers and math to adjust its image when zoomed in to guarantee the highest quality of the image.
Perhaps what is even more amazing than the ability to zoom into an SVG and never having to sacrifice quality is the code behind it. This is the code of the SVG image opened on a text editor
When first gazing upon the code, it is a bit intimidating. But the more you looked at it, the more you can see that it is just a bunch of selectors incorporating properties and property values. And all of these make up the SVG I created.
There are some width and height properties and lots of ID’s in the name of the layers and parts of the image. Those ID’s reflect each part of my image on Affinity and contain an inline style property reflecting the different styles I gave it. If you look at it this way, the code does not look scary at all because it is so reminiscent of HTML.
I can also target all those ID’s (which I have changed to classes because I like using classes when I style) and add whatever styles I want on a CSS stylesheet by removing all the inline styles. That way I can target multiple selectors at once and change the style through a stylesheet as opposed to changing it through HTML.
Here is the code of my SVG image and its separate style sheet on CodePen.
So I guess SVGs aren’t as scary as the initial sight of code behind them seems. They also provide many benefits including but not limited to:
can be created and edited in a text editor
are scalable
are zoomable
images do not lose any quality when zoomed in or resized
can be printed in high quality at any resolution
So the next time you incorporate images in your project, take the time to consider whether your project will benefit from SVG images.