SVG - SPLessons

Chapter 21

SVG Optimization

SVG Optimization

This chapter demonstrates about the SVG Optimization which is used to properly optimize the SVG files by removing empty groups and point less attributes and other things. Following are the concepts are covered in this chapter.

  • Vector Graphic Editors
  • Line optimization tool
  • Text Editors

Vector Graphic Editors

User can open the vector file in Adobe illustrator or draw and open the layers inspector of the file. Every layer of the file is related to a separate part of the code in a SVG file instead of that user can combine and simplify the SVG code in following ways.


Once done with the above steps user can save the SVG file and open it in a text editor then check the attributes of the viewBox Those are starting with “0 0” or not if not most efficient way is make it as x=0, y=0.

Line optimization tool

Now a days several Line Optimizing tools are present but here SVGO tool is used to get the SVG Optimization code. SVGO is Node based open sourced project and which is hosted on Github. By using the SVGO tool user can get the big file size savings and which give the successful optimized SVG code.

In order to use the SVG user need to have the installed Node and NPM. Then user need to follow the instructions which are provide by the SVGO Instructions. User need to maintain the backup files if any thing goes wrong. Noe user need to optimize the file. In  order to optimise the SVG code follow the SVGO tool instructions. The code below demonstrates the Normal SVG Optimization code.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#A13D96;}
    .st1{fill:#040305;}
</style>
<g>
</g>
<circle class="st0" cx="331.8" cy="428.9" r="221.8"/>
<g>
    <path class="st1" d="M63.5,566c3.3,4.1,7.9,7.3,12.9,7.3c7.4,0,11.8-7.7,11.8-19c0-10.2-3-16.3-10.6-21.9
        c-9.2-6.6-14.9-16.2-14.9-31.6c0-17.3,7.3-30.2,18.2-30.2c5.7,0,9.9,2.6,12.4,5.4l-2,11.7c-1.8-2.1-5.5-5.3-10.6-5.3
        c-7.7,0-10.6,9.1-10.6,16.6c0,10.4,3.4,15.5,11.2,21.4c9.5,7.3,14.3,16.3,14.3,32.6c0,17.1-6.3,32.1-19.6,32.1
        c-5.4,0-11.4-3.3-14.4-7.3L63.5,566z"/>
    <path class="st1" d="M105.3,529.7c0-10.2-0.2-18.5-0.3-26h6.5l0.4,13.7h0.2c2.9-9.7,7.8-15.3,14.4-15.3c9.9,0,17.2,16.3,17.2,40.4
        c0,28.7-8.9,42.9-18.5,42.9c-5.3,0-10-4.6-12.4-12.5h-0.2v43.3h-7.3V529.7z M112.6,551c0,2.1,0.1,4.1,0.3,5.9
        c1.3,10.1,5.8,17,11,17c7.8,0,12.3-12.5,12.3-30.8c0-15.8-4.3-29.5-12-29.5c-5,0-9.8,6.9-11.1,17.8c-0.3,1.8-0.5,4-0.5,5.8V551z"/>
    <path class="st1" d="M152.9,466.4h7.3v117h-7.3V466.4z"/>
    <path class="st1" d="M176.7,546.2c0.2,19.6,6.4,27.7,13.9,27.7c5.3,0,8.5-1.8,11.2-4.1l1.3,10.4c-2.6,2.3-7.1,5.1-13.5,5.1
        c-12.4,0-19.9-16.3-19.9-40.4s7.2-42.9,19-42.9c13.3,0,16.7,22.7,16.7,37.4c0,3-0.1,5.1-0.3,6.8H176.7z M198.2,535.8
        c0.1-9.1-1.9-23.4-10.2-23.4c-7.5,0-10.7,13.3-11.3,23.4H198.2z"/>
    <path class="st1" d="M213.4,568.8c2.3,2.6,6.1,5.6,9.8,5.6c5.3,0,7.8-5.1,7.8-11.9c0-6.9-2.1-10.5-7.4-14.5
        c-7.3-5.3-10.8-13-10.8-22.6c0-12.9,5.3-23.4,13.9-23.4c4.1,0,7.7,2.1,9.9,4.9l-1.8,10.5c-1.6-2-4.5-4.8-8.3-4.8
        c-4.3,0-6.7,4.9-6.7,10.9c0,6.6,2.3,9.6,7.6,13.7c6.9,5.1,10.6,12,10.6,23.9c0,14.2-5.6,24.1-15,24.1c-4.4,0-8.5-2.3-11.4-5.6
        L213.4,568.8z"/>
    <path class="st1" d="M246.5,568.8c2.3,2.6,6.1,5.6,9.8,5.6c5.3,0,7.8-5.1,7.8-11.9c0-6.9-2.1-10.5-7.4-14.5
        c-7.3-5.3-10.8-13-10.8-22.6c0-12.9,5.3-23.4,13.9-23.4c4.1,0,7.7,2.1,9.9,4.9l-1.8,10.5c-1.6-2-4.5-4.8-8.3-4.8
        c-4.3,0-6.7,4.9-6.7,10.9c0,6.6,2.3,9.6,7.6,13.7c6.9,5.1,10.6,12,10.6,23.9c0,14.2-5.6,24.1-15,24.1c-4.4,0-8.5-2.3-11.4-5.6
        L246.5,568.8z"/>
    <path class="st1" d="M317.1,542.9c0,29.5-10.4,42.4-20.1,42.4c-10.9,0-19.4-15.8-19.4-41c0-26.5,8.9-42.2,20-42.2
        C309.3,502,317.1,518.7,317.1,542.9z M285.1,543.7c0,17.5,5,30.7,12.2,30.7c7,0,12.3-13,12.3-31c0-13.5-3.4-30.5-12.1-30.5
        C288.9,512.9,285.1,528.7,285.1,543.7z"/>
    <path class="st1" d="M326.4,525.3c0-8.4-0.1-15-0.3-21.6h6.5l0.4,13.2h0.2c2-7.4,6.7-14.8,13.4-14.8c5.6,0,14.3,6.6,14.3,34v47.5
        h-7.3v-46c0-12.9-2.4-23.6-9.4-23.6c-4.8,0-8.5,6.8-9.9,14.8c-0.3,1.8-0.5,4.3-0.5,6.8v48h-7.3V525.3z"/>
    <path class="st1" d="M371.7,568.8c2.3,2.6,6.1,5.6,9.8,5.6c5.3,0,7.8-5.1,7.8-11.9c0-6.9-2.1-10.5-7.4-14.5
        c-7.3-5.3-10.8-13-10.8-22.6c0-12.9,5.3-23.4,13.9-23.4c4.1,0,7.7,2.1,9.9,4.9l-1.8,10.5c-1.6-2-4.5-4.8-8.3-4.8
        c-4.3,0-6.7,4.9-6.7,10.9c0,6.6,2.3,9.6,7.6,13.7c6.9,5.1,10.6,12,10.6,23.9c0,14.2-5.6,24.1-15,24.1c-4.4,0-8.5-2.3-11.4-5.6
        L371.7,568.8z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

Now the code below demonstrates the optimised SVG code by using SVGO tool.

<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792"><style>.st0{fill:#A13D96;} .st1{fill:#040305;}</style><circle class="st0" cx="331.8" cy="428.9" r="221.8"/><path class="st1" d="M63.5 566c3.3 4.1 7.9 7.3 12.9 7.3 7.4 0 11.8-7.7 11.8-19 0-10.2-3-16.3-10.6-21.9-9.2-6.6-14.9-16.2-14.9-31.6 0-17.3 7.3-30.2 18.2-30.2 5.7 0 9.9 2.6 12.4 5.4l-2 11.7c-1.8-2.1-5.5-5.3-10.6-5.3-7.7 0-10.6 9.1-10.6 16.6 0 10.4 3.4 15.5 11.2 21.4 9.5 7.3 14.3 16.3 14.3 32.6 0 17.1-6.3 32.1-19.6 32.1-5.4 0-11.4-3.3-14.4-7.3l1.9-11.8zM105.3 529.7c0-10.2-.2-18.5-.3-26h6.5l.4 13.7h.2c2.9-9.7 7.8-15.3 14.4-15.3 9.9 0 17.2 16.3 17.2 40.4 0 28.7-8.9 42.9-18.5 42.9-5.3 0-10-4.6-12.4-12.5h-.2v43.3h-7.3v-86.5zm7.3 21.3c0 2.1.1 4.1.3 5.9 1.3 10.1 5.8 17 11 17 7.8 0 12.3-12.5 12.3-30.8 0-15.8-4.3-29.5-12-29.5-5 0-9.8 6.9-11.1 17.8-.3 1.8-.5 4-.5 5.8V551zM152.9 466.4h7.3v117h-7.3v-117zM176.7 546.2c.2 19.6 6.4 27.7 13.9 27.7 5.3 0 8.5-1.8 11.2-4.1l1.3 10.4c-2.6 2.3-7.1 5.1-13.5 5.1-12.4 0-19.9-16.3-19.9-40.4s7.2-42.9 19-42.9c13.3 0 16.7 22.7 16.7 37.4 0 3-.1 5.1-.3 6.8h-28.4zm21.5-10.4c.1-9.1-1.9-23.4-10.2-23.4-7.5 0-10.7 13.3-11.3 23.4h21.5zM213.4 568.8c2.3 2.6 6.1 5.6 9.8 5.6 5.3 0 7.8-5.1 7.8-11.9 0-6.9-2.1-10.5-7.4-14.5-7.3-5.3-10.8-13-10.8-22.6 0-12.9 5.3-23.4 13.9-23.4 4.1 0 7.7 2.1 9.9 4.9l-1.8 10.5c-1.6-2-4.5-4.8-8.3-4.8-4.3 0-6.7 4.9-6.7 10.9 0 6.6 2.3 9.6 7.6 13.7 6.9 5.1 10.6 12 10.6 23.9 0 14.2-5.6 24.1-15 24.1-4.4 0-8.5-2.3-11.4-5.6l1.8-10.8zM246.5 568.8c2.3 2.6 6.1 5.6 9.8 5.6 5.3 0 7.8-5.1 7.8-11.9 0-6.9-2.1-10.5-7.4-14.5-7.3-5.3-10.8-13-10.8-22.6 0-12.9 5.3-23.4 13.9-23.4 4.1 0 7.7 2.1 9.9 4.9l-1.8 10.5c-1.6-2-4.5-4.8-8.3-4.8-4.3 0-6.7 4.9-6.7 10.9 0 6.6 2.3 9.6 7.6 13.7 6.9 5.1 10.6 12 10.6 23.9 0 14.2-5.6 24.1-15 24.1-4.4 0-8.5-2.3-11.4-5.6l1.8-10.8zM317.1 542.9c0 29.5-10.4 42.4-20.1 42.4-10.9 0-19.4-15.8-19.4-41 0-26.5 8.9-42.2 20-42.2 11.7-.1 19.5 16.6 19.5 40.8zm-32 .8c0 17.5 5 30.7 12.2 30.7 7 0 12.3-13 12.3-31 0-13.5-3.4-30.5-12.1-30.5-8.6 0-12.4 15.8-12.4 30.8zM326.4 525.3c0-8.4-.1-15-.3-21.6h6.5l.4 13.2h.2c2-7.4 6.7-14.8 13.4-14.8 5.6 0 14.3 6.6 14.3 34v47.5h-7.3v-46c0-12.9-2.4-23.6-9.4-23.6-4.8 0-8.5 6.8-9.9 14.8-.3 1.8-.5 4.3-.5 6.8v48h-7.3v-58.3zM371.7 568.8c2.3 2.6 6.1 5.6 9.8 5.6 5.3 0 7.8-5.1 7.8-11.9 0-6.9-2.1-10.5-7.4-14.5-7.3-5.3-10.8-13-10.8-22.6 0-12.9 5.3-23.4 13.9-23.4 4.1 0 7.7 2.1 9.9 4.9l-1.8 10.5c-1.6-2-4.5-4.8-8.3-4.8-4.3 0-6.7 4.9-6.7 10.9 0 6.6 2.3 9.6 7.6 13.7 6.9 5.1 10.6 12 10.6 23.9 0 14.2-5.6 24.1-15 24.1-4.4 0-8.5-2.3-11.4-5.6l1.8-10.8z"/></svg>

Text Editors

User can also use the text editor to remove the remaining fluff in the opmized image. Some times user need to delete the slightly off path fill attributes because which are intended to be a black but which process as a grey hexadecimal color.

User can also get the unnecessary paths i.e fill-rule attribute to make it as successfully optimized code user need to remove those paths.

Summary

  • SVG Optimization code improves the initial page load time for every single visitor.
  • SVGs are mend for the global use.
  • viewBox attributes must starts with “0 0”