What Is SVG and Why Should I Use It?
SVG stands for Scalable Vector Graphics. It is an XML based format used to display 2 dimensional graphics on the web with support for animation and interactivity.
“So… it is another format to display graphics… images, right?”
And I will answer you “Right”.
And you will tell me “Don’t we already have image file formats to use on the web?”
I will say “Yes, we do, but they are not quite the best we can use”. Let me explain this to you better.
Raster vs. Vector Images
There are mainly two types of image files on the web and in the computer world, in general:
- Raster image files
- Vector image files.
Raster files are a matrix of points. So BMP, PNG, GIF, JPG are all raster files.
GIF (Graphics Interchange Format) file format is mainly used to show simple animated images. It has the transparency in it. This format has a limitation of being able to display only 256 colours.
JPG (this one does not make a whole lot of sense, at least not to me, the acronym for this image file format means “Join Picture Experts Group”. That’s why you might see “JPEG” with an “E” sometimes as well) files are mainly used to display photos (even though we have “JPEG 2000”, “JPEG XL”, and “JPEG XR” formats as well but this is topic for another article).
PNG (Portable Network Graphics) file offers a great quality of graphics specially for images with few colour variations. It also offers transparent images. However, this image file format cannot display animated images. To do that you will need APNG images (Animated PNG). PNG files can display millions of colours, so it is an advantage if compared to static GIF images, for example. They also tend to be smaller than GIF images, in general.
NOTE: In rough terms, raster graphics are lossy image formats and vector formats are lossless formats.
|
|
|
Have you noticed that when you zoom in in an image in a web browser or inside of a raster graphics editor (Photoshop, GIMP or even Affinity Photo) you will notice that the image seems to lose “quality” as soon as you start to zoom in? You will see the pixels of it at the edges. Now, if you are dealing with vector images, like SVG images, you can zoom as much as you want (Inkscape, anyone?) and you will NOT see any pixelated edges, because there are none! The quality of the image will remain high. Isn’t that cool?
So, this means that you will have the work of making, let’s say, a logo for you or your company and that once you are done with it you will have it for a wide range of scenarios because quality will always be there. No need to do another version of it. At least not for the need of having it in different sizes! Because it scales.
Whether you want to use it to make a stamp out of it or a giant banner, the image can easily be the same, in a matter of seconds you just resize it inside of your vector application or it will automatically scale if displayed in different devices. That’s pretty magical, to be honest.
So, because it is a web standard, created and endorsed by W3C (World Wide Web Consortium) you can see how useful it is. HTML is for creating content on the web. CSS is for styling your content (colour, formatting options, alignment). JavaScript is mainly for the behaviour of elements (animate something, for instance). And now we have SVG which can be used for displaying 2D graphics. Through JavaScript and CSS we can manipulate SVG elements (we will see the topic, also, for another article). GSAP (Greensock Animation Platform).
Where Can This Be Used?
SVG files can be used on the web and in files where you need to keep the resolution, quality and details at a maximum level. And possibly when you know you will want to do the file only once and then reuse it on different media. It is a great file exchange format between Corel DRAW, Adobe Illustrator, Inkscape, Affinity Designer, Gravit, Skencil, LibreOffice Draw, xfig and Vectornator just to name a few. So this is pretty powerful. You can draw your graphic in any of these programs and in the operating systems that they run on and use it on the web.
Advantages
Its main advantages are being widely adopted and being able to be displayed in all major modern web browsers today (like Mozilla Firefox, Google Chrome, Opera and Safari). Final file size of graphics generated used in this file format, depending on how many shapes and paths, tend to be small. It depends only on the complexity of the objects stored in it and the colours, gradients, masks, layers… but if they are a simple set of shapes or a simple set of words they tend to be small if compared to the same objects produced in a raster image editor.
Disadvantages
You may notice that if an SVG image has too many gradients or a big number of paths it tends to take a little bit of the program it is displaying the image (whether a web browser or a vector editor) to render to show the image. They will also not work on legacy browsers (yes, we are talking about you, Internet Explorer).
