清理 SVG 代码
本文是 SVG 清理文章 的一部分。
当设计师从编辑器中导出图标时，生成的 SVG 通常包含大量显示图标所不需要的额外代码。
糟糕的图标示例
以下 SVG 是使用流行的 Inkscape 软件生成的：
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>该代码包含大量无用的冗余内容。如果它不用于显示图标，那就是毫无用处的。
清理后剩下的内容如下：
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>图标尚未最终定稿。它仍然需要进行优化。
如果你认为上面的代码只包含少量无用标签，所以没什么大不了的，那只是一个简短的示例。在某些图标集中，有些图标包含数十 KB 的垃圾数据。
处理流程
清理过程不会对图标进行优化。它仅执行以下操作：
- 移除无用代码。
- 将样式转换为属性。
- 验证图标。
这是通过 Iconify Tools 中的 cleanupSVG() 函数完成的。