An Introduction to SVG & Comparison of different Image Formats

SVG (Scalable Vector Graphics) is a vector graphic format that is used to define vector-based graphics for the Web in XML format. Though it was conceived back in late 1990s, SVG gained its popularity recently because of modern browsers support and most vector drawing programs could export it.

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.

Under the hood, SVG files are nothing more than simple plain text documents that describes lines, circles, shapes, colors, curves and texts. Every element and every attributes in SVG files can be animated, giving them a wider range of flexibility for web designing. Also, these files can be easily modified and customized via CSS and/or javascript, making them more versatile compared to traditional PNG and JPEG files. Here is a good comparison of SVG and PNG files.

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 <animate> , <set> , <animateMotion> , <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.com and 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

<meta property="og:image" content="https://www.example.com/logo.svg" />

The Open Graph Object Debugger will say it is not an image.

SVG vs PNG vs GIF vs JPG

You 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 !