What Is SVG?
You may have seen files at some point ending with the extension .svg. Just like JPEGs, GIFs, and PNG images, SVG is another image format that stands for Scalable Vector Graphics. While dating back to 1999, only in the past five years have browsers added enough support for them to be used like any other image.
SVGs are great for line art, logos, animated images, and graphs since they are simple enough to use vector graphics for. Logos tend to be simple, easily-recognized symbols representing a brand, and icons are simple and can potentially change colours or animate while interacting with them.
An example of scaling SVG images vs JPEG images
A 100px by 100px SVG image of our logo
The same SVG image, scaled to double the size
A 100px by 100px JPEG of our logo in a bordered box
The same JPEG image, scaled to double the size
The advantages of SVG images
- They can scale to any size, without becoming pixellated
SVGs are vector graphics, meaning that the paths in the graphics are based on coordinates relative to one another instead of using pixels. After scaling a standard image filetypes (JPEG, PNG, GIF, etc), it will start looking pixellated because there isn’t enough data in the image to fill the available space. To fill the space, pixels are scaled up, and small boxes of colour begin to appear. If an SVG is scaled, the distance between points are calculated, and the paths joining them will remain just as sharp. - In most cases, they are a significantly smaller file size
So long as it isn’t very detailed, an SVG image usually is a small file size than other image filetypes, thus will be quicker loading on your website. Pixel-based images and videos are one of the main reasons websites take long to load, and SVGs can make a noticeable improvement. - They’re interactive
Standard images are just pixels — tiny squares of colours grouped closely together to display something as a whole. In SVG images, each object can be a grouping of paths, circles, squares, etc, and that group can be animated and/or interactive. For example, you can hover over it, and it can move upward and fade to a different colour, whereas standard images cannot.
The disadvantages of SVG images
- Cannot support as much detail
Since SVGs are based on points and paths instead of pixels, they can’t display as much detail as standard image formats. For example, photos are usually best displayed as JPEGs online because of their relatively small file size, and their pixel-based nature will allow them to show a higher density of colours. - SVG doesn’t work on legacy browsers
Legacy browsers, such as IE8 and lower, don’t support SVG. However, since this browser is rapidly vanishing, has a very low usage rate, and hasn’t been supported by Microsoft for years, the benefits of using SVGs outweigh this factor.
How we use SVG here at Machine
We try and use SVG graphics as much as we can. Almost always for logos, and often for site icons depending on the level of detail. On all the websites we build, we tweak the settings in WordPress to allow you to upload SVG images practically anywhere you can upload an image.
