SVG image type

SVG image type

The format of scalable vector graphics , or SVG, is rapidly gaining momentum in importance for website design. If for some reason you still do not use SVG in web development, here are a few reasons why you should start doing it today !

Image resolution

It doesn't matter what your screen size, zoom level, resolution, or whether you have a Retina display. SVG is a vector , paths, shapes, and fills. This provides infinite resolution , just like when creating illustrations for printing and using forms, the same principles apply!

Download speed

As you know, the larger the file size, the slower it renders / loads. People tend to use PNG when they need transparency in their images, transparency in the image = increased file size. Large file size = longer download times. SVG is just code, which means a very small file size . In some cases, loading SVG can take a lot of time, for example, if you made the Eiffel Tower a vector graphic with a million paths and fills, it is best to use JPEG ... or PNG.

Embedding in the body of the page

Using traditional images means that if you don't encode them using base64, the images should be referenced as external resources. This means an increase in the number of HTTP requests and therefore a slower site. SVG is not only smaller in file size, but can also be embedded in your HTML , eliminating unnecessary HTTP requests and speeding up your site .

 

Animation

SVGs can be animated and styled using CSS . The animations (transform / transition) that you use in HTML elements can also apply to SVG elements. There are times when you cannot use CSS to animate SVGs, but these instances can usually be covered in JavaScript . This opens up a whole world of creativity!

Practicality

There are many ways to use SVG on the Internet, from displaying logos to making full use of the browser graphics engine to draw graphs.

Logos are usually based on vectors, and rightly so. The beauty here is that you can define an SVG document as your logo, and then use it anywhere without worrying about size, resolution or download time. The same goes for icons.

Charting - SVGs do a great job with vector forms, and are really great for things like infographics and charts.

Accessibility and SEO

SVGs have recently become well indexed by search engines , which is good news. SVG content, whether it is in a separate file or embedded directly in HTML, is indexed.

Disadvantages of SVG

Despite the large number of advantages of this graphics format, here are a few points to consider when using SVG:

  • You will have problems when trying to use SVG with older browsers , they do not support this format
  • Sophisticated graphics with thousands of nodes are probably best suited for JPEGs, browsers trying to render complex SVGs can simply hang.

Summary

In general, SVG is best used for low-intensity artwork; logos, icons and simple graphics.

Check SVG-images on your site

Liked the project?

Just share the link to this page with your friends