5 tools to streamline your frontend development workflow in 2018
16th February 2018
November 28th 2017
You maybe wondering exactly what an SVG is? It is a file format just like JPEG / PNG, but SVG stands for Scalable Vector Graphic. This file format, as explained is scalable, created with vectors and is also a graphic. This is great when we come to think about scaling images to fit responsively on a device.
SVG is standardized and maintained by the W3C (World Wide Web Consortium) who are a governing body for web standards. They have made SVG an image file format this is compliant with the web, which provide us with more options when it comes to working with graphics.
SVG has been around since the late 90’s however it is only in the last few years that it has really surged in popularity and become part of the general process when it comes to designing/building websites.
This has seen vector graphic software such as Illustrator and Sketch improve their SVG options making it easier for the designer to create any graphic they want but also provide a code-compliant SVG that a developer can use.
As SVGs are just vectors it means they are resolution independent. This means they can be scaled without any blurriness as they are created using some formulas. This means when the vector is increased or decreased the formula will get recalculated to keep the graphic consistent.
This means when you look at the graphic on any device including retina you will see that it looks crisp and sharp. As the file format is using code to create the vector this will mean a lightweight file that will not take up a lot of space in some cases bytes.
SVGs are built with XML that it gives the developer the ability to be able to make the SVG more interesting such as animations.
There are however a few drawbacks to SVGs that you should consider.
SVGs are not compliant with certain old browsers but you can create a fallback to a PNG replacement. With IE 8 not being supported anymore and IE 9 not far behind this maybe something won’t be required in the not too distant future.
Technical graphics with lots of layers are better being saved as JPEG / PNG as the file size can be better than SVGs in some cases and also rendering in the browser won’t take a massive hit on the processor.
The icons of the bear below can demonstrate the resolution problem that you may experience. Zoom in on your device and compare both the graphics.
Quite a difference don’t you think?