Optimization / compression of SVG images

Hello Habr!
The article is devoted to the optimization of SVG format images.



SVG (from English Scalable Vector Graphics - scalable vector graphics) is a scalable vector graphics markup language created by the World Wide Web Consortium (W3C) and included in a subset of the extensible markup language XML, designed to describe two-dimensional vector and mixed vector / raster graphics in XML format .

Instruments

The principle of the application is as follows, they remove the "unnecessary" information from the SVG, thereby reducing the size of the file itself. Today, there are three main applications for optimizing SVG:

• SVG Cleaner ;
• SVG Scour (for work, you must install Python );
• SVG Optimizer (for work, you must install Node.js ).

Comparison

To compare the results of applications, I took the following image .
')

Image saved using Adobe Illustrator CS6.


Image size - 6,279,219 bytes

application	Result byte	Result%	Elapsed time, second
SVG Scour 0.26-3	4,421,520	29.6%	205
SVG Cleaner 0.5.1	3,727,883	40.6%	thirty
SVG Optimizer 0.37	2,646,541	57.9%	15
SVG Scour + SVG Cleaner + SVG Optimizer	2,502,136	60.1%	240

I conducted testing with a large number of images, the above table almost accurately displays my test results.

Conclusion

1. Consistent use of applications helps to increase the image compression steppe.
2. SVG is an XML text file, optimization programs can “spoil” images, i.e. browsers do not draw the image correctly.
3. SVG supports not only vector graphics, but raster, but modern applications for optimizing SVG do not support the optimization of raster images.