The Magic of SVG

SVG the future of the Web image?

NB: SVG is a vector image format, it is commonly used for illustrations, logos, etc. But there is little, if any, interest in certain types of images (photographs, etc.).  
Which web designer hasn't already had this great debate: “is SVG the image format of the future of the web”? With multi-device issues, vector images seem to be the panacea. Infinitely resizable, one image is enough for all types of screens.
However, critics of SVG have a strong argument. SVG can be heavy… I think this assertion deserves investigation.
question

Back to the concept of the weight of an image

The digitization of images, which developed in the 80s, gave rise to two distinct techniques. It exists :

  • Raster images,
  • Dare vector images.

img1

Raster images

Raster images (bitmap) are made up of the assembly of pixels (the basic unit used to measure the definition of a raster digital image. Its name comes from the English phrase picture element, which stands for picture element).
An image is represented by a matrix of pixels. A pixel is represented by its color, coded by number of bits.
1 bit: 2 colors (black and white)
4 bits: 16 colors (or levels of gray) possible
8 bits (1 byte): 256 possible
24 bits (3 bytes): 16 million possible
And 1 kilobyte ( ko ) = 1 bytes
The weight of a raster image therefore depends on its number of pixels, which itself depends on the number of colors used.

Vector pictures

Vector images consist of the description of the constituent elements (simple geometric figures, line segments, Bézier curves, etc.), their color and their location.
The size of an SVG image depends on its complexity. The coordinates, dimensions and structures of vector objects are indicated in numerical form in XML.
A specific style system (CSS or XSL) makes it possible to indicate the colors and fonts to be used. This format supports some basic geometric shapes (rectangles, ellipses, etc.), but also paths (paths), which use Bézier curves and thus make it possible to obtain almost any shape. Filling can be done using gradients (gradients) pattern colors (pattern) which are any SVG objects, or filters. You can also apply patterns along the paths (markers) and use fill functions. The alpha channel, for transparency, is managed at all levels.
svg
The more information there is, the heavier the image will be.
(Don't panic, no need to code to make SVG, you can export the image in svg directly from illustrator in particular).

Why is a heavy image bad?

Heaviness lengthens the loading time of a page. Admittedly, today fiber is spreading and this kind of problem arises less, except that… smartphones are also legion and 3G is bringing back this loading problem by accentuating it. As one of my colleagues would say:

heavy image = image that takes a long time to load, therefore on 3G connection => it is expensive and it is not displayed. On another connection => a browser does not make more than 2 requests in parallel to the same server, with 4 heavy images, you have to wait for the first 2 to be fully loaded to start loading the following ones…

It is therefore no longer useful to prove to you that lightness is better (concerning the images of course!).

Place to test

We are going to follow the evolution of an image, gradually becoming more complex in order to compare its weight between the png and the svg. I then use ImageOptim (https://imageoptim.com/fr.html) to reduce the size of png images (PNG optimized). I then compress my SVG (SVGZ format).
1

1 – Basic picture

 2

2 – Image with several shapes

 
3

3 – Adding a gradient background

 4
 

4 – Adding a complex shape (the stripes)

 5
 

5 – Adding drop shadows

 
6 – Finally I export this last image in png by putting 1200 px in width. The SVG being vectorial, it keeps the same weight whatever the place it will occupy on the screen of the Internet user, this is not the case of the png.
 

  PNG PNG optimized SVG SVGZ
1 I 4 I 3 I 4 I 2
2 I 8 I 4 I 12 I 4
3 I 29 I 20 I 13 I 4
4 I 87 I 77 I 33 I 8
5 I 96 I 89 I 34 I 8
6 I 219 I 196 I 34 I 8

My experiment has the defect of being a specific case, it does not have a universal character. It nevertheless demonstrates that SVG is not necessarily heavier than PNG… Really not (on the other hand, you have to respect some basic [intuitive] rules, such as not leaving hidden objects, preferably using vector shapes…).
end
You will find the sources of my experience by following this link: https://github.com/apdr/The-Magic-of-SVG.

Learn more

The definitions

http://www.alsacreations.com/tuto/lire/1421-svg-initiation-syntaxe-outils.html
http://fr.wikipedia.org/wiki/Image_vectorielle
http://en.wikipedia.org/wiki/Scalable_Vector_Graphics
http://mon-ip.awardspace.com/convertisseur.php 

Best Practices for Creating Vector Images for the Web

http://helpx.adobe.com/fr/illustrator/using/best-practices-creating-web-graphics.html1
http://www.alsacreations.com/tuto/lire/1602-reduire-le-poids-image-svg-illustrator.html
http://fr.clever-age.com/veille/blog/utiliser-optimiser-et-servir-des-fichiers-svg.html
see the “Browser compatibility table” part of: http://voormedia.com/blog/2012/10/creating-svg-vector-graphics-for-maximum-browser-compatibility
 

More comparisons...

http://css-ig.net/articles/svg-format-graphique-actualite
 

By Anne Pedro
UX-ACTIVIST at UX-REPUBLIC