Introduction
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
Description
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.
- User need to delete all invisible layers of the file.
- User can convert the all text to the paths.
- In the image there are many combination of shapes, strokes and paths, in order to combine them user need to convert them into paths.
- User need to simplify all them into groups.
- User can also scan for the non SVG friendly elements i.e embedded raster images.
- Delete the hidden content and reshape the paths by using crop. Code contain with the masked details even which is not visible thus implice overflow the canvas.
- In order trim the canvas user need to remove the white spaces.
Description
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.
[html]
<?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>
[/html]
Now the code below demonstrates the optimised SVG code by using SVGO tool.
[html]
<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>
[/html]
Description
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.
Key Points
- 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"