当前位置主页 > 资料库 > 前端教程 > SVG文件的手动优化

SVG文件的手动优化

2015-01-16

虽然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在处理矢量图的点时可以精确到小数点后几位数,但是你是使用像素为单位,十进制的点坐标不需要那么精确。

SVG矢量图-鹤

我们也可以用相同的手法来处理path上的点,但是使用手动方法去处理这些点会非常吃力。我们会在以后的文章中教你使用矢量图处理程序来处理这些点。

从技术上来说,我们也可以处理每一个对象,将它们的 id 属性删除。但保留着它们还是有用的,也许以后你会需要使用javascript或CSS来操作它们。

删除自定义代码

一般来说,SVG文件中使用命名空间的XML代码只是仅仅在编辑器中使用,我们可以安全的将它们从文件中删除。在Inkscape中,它们的命名空间属性通常是 sodipodiinkscape

inkscape:label="Some label"                                
                            

你可以很容易的手动移除这些额外的属性。

备份你的文件

正如位图文件一样,你应该保留一份完整的SVG命名空间副本在你的文件夹中,允许适当的程序作为附加信息来使用它们。

质量控制和验证

最后你需要关心的一个问题是:我优化的这个SVG文件能在浏览器中运行吗?这个问题是非常容易验证的:将你优化的SVG文件拖到浏览器中。这同时也是一个非常好的验证SVG代码的方法。在将你的SVG文件作为优化SVG文件使用之前,你必须要验证它。

Previous:
上一篇:CSS3和HTML5样式表重置
Next:
下一篇:使用Adobe Illustrator制作SVG的操作流程
返回顶部