SVG stands for Scalable Vector Graphics. It is an Extensible Markup Language based image format for two-dimensional graphics with support for interactivity and animation.
There are two groups of image formats - bitmap and vector. Bitmap format defines what color each pixel of an image should be painted whereas in vector format it consists of shapes, curves, lines, and text which together make a graphic. In simpler words the vector format gives instructions on how the image should be rendered. JPEG, PNG file formats fall under bitmap category whereas the SVG file format falls under the vector category.
For images with high detailing such as photographs, bitmap formats are suitable whereas for images with high scalable requirements like icon, web graphics, SVG format is suitable.
In the web dev community, recent trends have shown that developers prefer vector format files, i.e. SVG over any other raster group files. Here are the reasons why :
Scalability
With users accessing web applications from a wide range of devices of different sizes, it is very important to make sure the graphic resolutions are intact. This is solved by utilizing SVG formats as they fit each and every resolution requirement without any trouble as they scale seamlessly.
Smaller File Size
Compared to other file formats, SVG's when properly optimized result in smaller file size which enables faster loading images resulting in better performance and improved user experience.
Inline SVG's
SVG's can also be embedded using the inline method. This eliminates the HTTP request that is needed to load in an image file. As there are no files that need to be downloaded, the loading time of the page goes down and makes the website to appear faster and thus in turn improving the user experience as well.
Styling and Animating
Since SVG's are XML format files, they can be styled and scripted just like HTML files. This is extremely beneficial when there is a requirement to customize icons or add character to it such as when active, not active, disabled etc and all this can be done with a single file.
Though SVG's are highly beneficial, creating complicated images is very challenging and involves a lot of mathematical computations to be done. However with the right use of illustration tools, the problem can be tackled. In conclusion, the advantages of using an SVG clearly gives it an upper hand compared to its counter file formats making every developer's life easier !
If you have made it till here, thank you for taking the time to read this and I hope you found it useful.
Until next time 😄👋🏽
Top comments (0)