Displaying images on a variety of screens with different dimensions is a persistent problem because using normal CSS is very time-consuming and labor-intensive. Instead, the SVG is very popular because of the utilities it brings. So what is the meaning of SVG? Let's find out.

What is SVG?

Scalable Vector Graphics (SVG) is an Extensible Markup Language (XML) and is used to describe two-dimensional, static and animated vector graphics, typically for web applications. It can be displayed, scaled freely without losing image quality. SVG is an open standard and is managed by the World Wide Web Consortium.

Advantages of SVG

Small file size, easy to compress

SVG images, XML, contain many repetitive pieces of text, so they are well suited for data lossless compression algorithms. When an SVG image has been compressed using the standard GZIP algorithm, it is called an "SVGZ" image and uses the corresponding .svgz filename extension.

Beautiful display on retina screens

SVG, like all vector graphics, can be scaled to any size without loss of clarity (except very small). In other words, you can zoom to an SVG all you want and they will always look sharp. So you no longer have to create a 2x Retina version for your image logo.

Better load times

SVG is great for web design, as they have infinite resolution and very small file sizes. It can be embedded directly into an HTML document with the SVG tag, since the browser does not need to download the graphics. This means that your website will load faster.

Disadvantages of SVG

SVG is a language not designed to be edited directly on the source code. To create SVG images in general, you will need to use assistive tools. While SVG may be an option for web images in the not-too-distant future, it's still relatively new and needs support from web browsers.

When to use SVG?

Of course, SVG cannot be used 100% of the time. The disadvantage of SVG is the limitation in detail and color, of course we can use SVG to draw a complex image, or as real as a photo, but if we do so, the performance will be very bad.

But with the current trend, flat design style is in fashion, websites with simple interface, using simple images, few details, SVG can fully promote its strengths.