Cleaning up SVG code

This article is part of SVG clean up article.

When a designer exports icon from an editor, often SVG contains a lot of extra code that is not needed to display an icon.

Bad icon example

The following SVG was generated with popular Inkscape software:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
    id="svg2" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" sodipodi:docname="cloud.svg" inkscape:version="0.48.4 r9939"
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1200px" height="1200px"
    viewBox="0 0 1200 1200" enable-background="new 0 0 1200 1200" xml:space="preserve">

<sodipodi:namedview  inkscape:cy="448" inkscape:cx="-67.796606" inkscape:zoom="0.26339286" showgrid="false" id="namedview3175" guidetolerance="10" gridtolerance="10" objecttolerance="10" borderopacity="1" bordercolor="#666666" pagecolor="#ffffff" inkscape:current-layer="svg2" inkscape:window-maximized="1" inkscape:window-y="24" inkscape:window-height="876" inkscape:window-width="1535" inkscape:pageshadow="2" inkscape:pageopacity="0" inkscape:window-x="65">
   </sodipodi:namedview>
<path id="path4180" inkscape:connector-curvature="0"
   d="M983.888,575.377c187.925-18.507,293.084,231.644,148.656,358.546
   H49.759C-89.529,697.252,82.314,382.276,333.563,443.401
   C535.007,115.536,908.131,291.199,983.88,575.377H983.888z"
/>

</svg>

That code contains a lot of useless junk. If it is not used to display an icon, it is useless.

This is what is left of it after clean up:

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" viewBox="0 0 1200 1200">
<path id="path4180" d="M983.888,575.377c187.925-18.507,293.084,231.644,148.656,358.546
   H49.759C-89.529,697.252,82.314,382.276,333.563,443.401
   C535.007,115.536,908.131,291.199,983.88,575.377H983.888z"
/>

</svg>

Icon is not yet finalised. It still requires optimisation.

If you think the code above contains just a little bit of useless tags, so it is not a big deal, it was a short example. There are icons in some icon sets with tens of kilobytes of junk data.

Process

Clean up process does not optimise the icon. It only does the following:

It is done with the cleanupSVG() function from Iconify Tools.

Optimisation is done later, after parsing palette.