Why Use SVGs in Web Development
Traditionally, JPEG and PNG images have regularly been used across front-tend web development. More recently though, SVG’s have become more popular due to a variety of reasons. Having the ability to embed an image directly as code has a number of advantages to website developers as a whole. As the name of the format implies, Scalable Vector Graphics doesn’t use pixels such as the other formats, instead using vectors to output an image which can then give the ability to do a number of things to the image itself. Below are a number of reasons that SVGs should be considered as opposed to pixel-based image formats within web development.
Resolution
Due to the nature of SVGs, which uses paths, shapes and fill-methods to create the image. It doesn’t matter what your screen resolution is, monitor or whether HiDPI “retina” mode is enabled. They will always look crisp and clear no matter the device you are using.
Speed
PNGs and JPEGs usually have large file sizes. The higher quality you may want the image, the larger file size may be due to the resolution. This will then make the website slower when loading images on each page. PNGs are good for transparency but this can be alleviated too. Since SVGs are essentially just code, they have very small file sizes. There are downsides though, as complex SVGs, such as the Houses of Parliament can have thousands of paths, fills and shapes to render, which would then be best suited to a pixel-based format instead in these scenarios.
Another advantage is due to the nature of SVGs being code rather than an image file. Each time a PNG or JPEG needs to be loaded, a HTTP request needs to be made to the referenced link of where the image file is stored on a particular server. Having many images on a page can lead to a lot of HTTP requests, which can then case a slower site since images are then loaded consecutively. SVGs can be embedded directly inside the website HTML markup code, eliminating the need to use http requests and in tandem leads to a faster-loading website.
Animations
SVG images can be animated and styled with the use of CSS. CSS transitions, rotations and transforming can all be used to animate an image and allow for engaging and interactive content on a website. As a result, you are able to make simple or complex animations for a website, with native web technologies that can increase the engagement of a user which can then lead to longer read-times and more engaging content as a whole. You could make it as simple as a square moving from left to right on the web-view or even as complex as a horse galloping through the wind in the desert, all using the power of SVGs and CSS animations.
SEO-Friendly
Google index’s SVG’s directly as it is embedded within the HTML markup code of a page or website. This allows the code to be indexed into Google’s search engine and can be used for
Search-Engine Optimization.
As a whole, SVGs can be created, manipulated and expanded into anything you would like in terms of imagery or animated content within your website. By using native HTML and CSS web-based programming languages, these types of graphics allow tor a plethora of options. They are becoming standard across the web as a result, with FontAwesome and Google Material Icons both using them as a basis for users being able to implement a variety of SVG-based icons across their websites. In addition to having the ability to create your own with the use of open-source and premium applications. The possibilities of having custom images that are clean and crisp across all browsers and devices is available now and continuing to be developed into the future.
