虽然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文件使用之前,你必须要验证它。