虽然SVG格式是非常优秀的矢量图格式，但是它的矢量文件相对于位图文件要臃肿得多。SVG文件中的代码充斥着许多无用的元素、属性和空格。当使用类似Adobe Illustrator 和 Inkscape之类的矢量图软件来添加自定义的名称空间标签时，会出现更多的无用代码。
现在已经有越来越多的自动化程序可以优化SVG文件。但是有时候-特别是处理简单的插图的时候-手动优化SVG代码显得更为方便。这也是制作SVG优化文件的最佳实践方法。同时，你还可以通过手动操作优化SVG来了解SVG优化工具是如何工作的（有时候程序优化的结果不一定是正确的）。
因为SVG文件可以通过多种方法来制作，我们会用几篇文章来讲述。这篇文章红讲述的是手动优化SVG文件。
手动优化SVG文件
<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 16.0.4, 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="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="612px" height="502.174px" viewBox="0 65.326 612 502.174" enable-background="new 0 65.326 612 502.174" xml:space="preserve"> <g> <g> <ellipse id="shading" fill="#C6C6C6" cx="283.5" cy="487.5" rx="259" ry="80" /> <path id="bird" d="M210.333, 65.331C104.367,66.105-12.349, 150.637, 1.056, 276.449c4.303, 40.393, 18.533, 63.704… fill=”#000000" /> </g> </g></svg>上面的代码没有经过矢量图软件的加工，如果经过矢量图软件加工，它会有更多的代码。我们将在后面讲解它。现在，我们可以对这个文件进行下面的几项优化：
- 去除所有的注释。
- 删除XML的序言和doctype。
- 删除SVG的版本号、ID、xlink（如果不使用）、X坐标、Y坐标、宽度和高度以及
enable-background和所有的名称空间属性。 - 属性不需要的组。
- 使用十六进制的hex颜色。
- 删除不必要的空格和回车。
在执行了上面的所有优化项之后（为了能更直观的看清代码，最后一项没有做），我们可以得到下面的代码：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 65 612 502"> <ellipse fill="#C6C6C6" cx="283" cy="487" rx="259" ry="80"/> <path d="M210.333, 65.331C104.367, 66.105-12.349, 150.637, 1.056,276.449c4.303, 40.393,18.533, 63.704,52.171, 79.03 c36.307” … fill=”#000"/></svg>上面的这些修改是在以下几点假设条件成立的情况下进行的：
- SVG矢量图的宽和高已经在CSS文件中被确定。
xlink没有被使用（没有被链接的元素）。- 所有的组都不被用于特定的目的。
你可能已经发现我们也修改了 viewBox 的值和ellipse的 position ，将它们四舍五入到最近的整数。SVG在处理矢量图的点时可以精确到小数点后几位数，但是你是使用像素为单位，十进制的点坐标不需要那么精确。
我们也可以用相同的手法来处理path上的点，但是使用手动方法去处理这些点会非常吃力。我们会在以后的文章中教你使用矢量图处理程序来处理这些点。
从技术上来说，我们也可以处理每一个对象，将它们的 id 属性删除。但保留着它们还是有用的，也许以后你会需要使用javascript或CSS来操作它们。
删除自定义代码
一般来说，SVG文件中使用命名空间的XML代码只是仅仅在编辑器中使用，我们可以安全的将它们从文件中删除。在Inkscape中，它们的命名空间属性通常是 sodipodi 和 inkscape。
inkscape:label="Some label" 你可以很容易的手动移除这些额外的属性。
备份你的文件
正如位图文件一样，你应该保留一份完整的SVG命名空间副本在你的文件夹中，允许适当的程序作为附加信息来使用它们。
质量控制和验证
最后你需要关心的一个问题是：我优化的这个SVG文件能在浏览器中运行吗？这个问题是非常容易验证的：将你优化的SVG文件拖到浏览器中。这同时也是一个非常好的验证SVG代码的方法。在将你的SVG文件作为优化SVG文件使用之前，你必须要验证它。
下载仅供下载体验和测试学习，不得商用和正当使用。
下载体验