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 .

    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:

    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
    applicationResult, byteResult%Elapsed time, second
    SVG Scour 0.26-34 421 52029.6%205
    SVG Cleaner 0.5.13 727 88340.6%thirty
    SVG Optimizer 0.372 646 54157.9%fifteen
    SVG Scour + SVG Cleaner + SVG Optimizer2 502 13660.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 increase image compression.
    2. SVG is an XML text file, optimization programs can “corrupt” images, i.e. Browsers do not render the image correctly.
    3. SVG supports not only vector graphics, but raster, but modern SVG optimization applications do not support raster image optimization.

    Also popular now: