In this tutorial, I'm going to introduce various advantages of using SVG image files, browser support for SVG files and point out some drawbacks.
What are the advantages of SVG in web designing?
- SVG Images are Scalable:
Traditional image formats like PNGs and JPEGs are raster based, meaning they have fixed dimensions & are pixelated on scaling whereas SVG images are based on points, numbers and co-ordinates, making them infinitely scalable and resolution-independent. Isn't that cool?
Image source: pngimage.net
- SVG Images are Zoomable:
Since SVG files are infinitely scalable, they do not lose quailty even if they are zoomed or resized.
|Vector images are zoomable
- SVG Images support Animation.
SVG graphics can be animated by using different animation elements like
<animateColor>and many more easily.
- Easy to Customize:
SVG images can be easily edited and customized with normal text editor, making them more flexible compared to traditional image files. Also, they can be exported via any vector graphic designing tools.
- Web Performance:
SVG Images are comparatively smaller than their raster based files, hence providing a better web performance and flexibility. Also, these images are based on XML, so no image calls need to be made (remember other image files like PNG, JPG were located in some locations like
1.blogspot.comand a connection was made to display them).
Browser Support For SVG graphics
Here is a good news: Almost all modern browsers can render SVG files and support fundamental SVG features. You can check browser support at caniuse.com.
Downside Of SVG Graphics
- SVG graphics might not support as much details compared to standard image formats as they are based on points and paths instead of pixels. Also, if an object consists of a large number of small elements, the file size increases very fast. Though the following graph from stackexchange suggests the other.
- To create a complicated SVG files, it takes a lot of effort compared to legacy formats. Though it depends on individual: if you're enthusiast and want to learn new things, it is a must-go format.
- OpenGraph does not support SVG Images: It is one of the reason, I had to go for base64 image format for Favicon instead of SVG file while trying to overcome browser leverage caching issue. Platforms like facebook and twitter do not support SVG Images.
For instance, if you include
The Open Graph Object Debugger will say it is not an image.
<meta property="og:image" content="https://www.example.com/logo.svg" />
SVG vs PNG vs GIF vs JPGYou might be in a situation when some suggest to go for SVG as they are scalable and resolute independent while other prefer standard image formats for their wide range. So, which image format to choose? A simple answer: All of them based on their usage. Here is a short comparison of different image format by PageCloud.
If you're posting a family photo in Facebook ,use JPG. If you're creating a short animated funny video, choose GIF. If you want a detailed image and need to preserve transparency, go for PNG. If you need shapes with less details than normal photographic images, use SVG.
In TwistBlogg, we use SVG images for logo, icons (trying to implement for all icons), header background and footer background. Default images for posts are either PNG or JPG (because OpenGraph does not support SVG files as images). We haven't added any animation images, so no GIF file currently present. Moreover, GIF images impact a lot in web performance. That is a topic for another post. Happy Blogging !