Optimization / compression of SVG images
Hello Habr!
The article is devoted to optimizing SVG format images.
SVG (from 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 XML extensible markup language, designed to describe two-dimensional vector and mixed vector / raster graphics in XML format .
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:
To compare the results of the applications, I took the following image .
Image saved using Adobe Illustrator CS6.
Image Size - 6,279,219 bytes
I conducted testing with a large number of images, the above table almost accurately displays my test results.
The article is devoted to optimizing SVG format images.
SVG (from 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 XML extensible markup language, 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 (you need to install Python to work );
- SVG Optimizer (you need to install Node.js to work ).
Comparison
To compare the results of the applications, I took the following image .
Picture
Image saved using Adobe Illustrator CS6.
SVG options
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% | fifteen |
SVG Scour + SVG Cleaner + SVG Optimizer | 2 502 136 | 60.1% | 240 |
Conclusion
- Consistent use of applications helps increase image compression.
- SVG is an XML text file, optimization programs can “corrupt” images, i.e. Browsers do not render the image correctly.
- SVG supports not only vector graphics, but raster, but modern SVG optimization applications do not support raster image optimization.