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:
svg
<?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
<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:
- Removes useless code.
- Converts style to attributes.
- Validates icon.
It is done with the cleanupSVG() function from Iconify Tools.