文档结构  
翻译进度:已翻译     翻译赏金:0 元 (?)    ¥ 我要打赏

在这篇文章中我将建议你三种方法,利用 SVGO 让你对 SVG 进行优化,使之适合 Web 使用。

为什么你需要对 SVG 做优化

SVG (全称是 Scalable Vector Graphics) 是一个跟分辨率无关的图形格式。其最大的好处就是不基于像素,在现今的视网膜屏设备的时代这是非常棒的一种格式,在响应式的网页中表现良好。

如果你跟我一样不是一个图像设计师,你就会发现有很多开源的在线资源来获取 SVG 素材。这样做的缺点就是这些资源往往不是为 Web 所设计的。这意味着你会发现你下载的这些资源充满和复杂的路径信息,就跟 PhotoShop 处理后的图像一样。同时,因为 SVG 本身是基于 XML 的,查看源码就会发现有大量的不必要的标签。除了我强迫症似得要求代码必须简洁,这些非常复杂的文件导致文件体积膨胀得厉害,直接影响网站的性能。

第 1 段(可获 2.03 积分)

不要以为 SVG 是你自己绘制的就会很精简。虽然最新版本的 Adobe Illustrator 可以导出尽可能小的 SVG 数据,而老的版本或者是其他的向量图形编辑工具仍然保留大量不必要的注释、doctype 声明和私有的属性信息。

下面这个图形编辑器生成的代码可以说明这个问题:

<svg 
  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:svg="http://www.w3.org/2000/svg" 
  xmlns="http://www.w3.org/2000/svg"
  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 
  viewBox="0 0 1000 1000" version="1.1">

  <g inkscape:label="Katze" inkscape:groupmode="layer" id="layer1" transform="translate(0,-52.362183)">
  
  ... More code here
  
  </g>

</svg>
第 2 段(可获 0.83 积分)

而你所需要的仅仅是下面的内容:

<svg 
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 1000 1000">

  <g id="layer1" transform="translate(0,-52.362183)">
  
  ... More code here
  
  </g>

</svg>

此外,如果你不在 CSS 或者 JavaScript 中使用 layer1 ,你就可以 <g> 标签中的 id 属性。

就我个人而言,我更喜欢手工去清除 SVG 代码中的无用内容。但是,不要害怕,大部分最繁琐和重复的优化工具都可以使用工具来完成。

SVGO 是什么?

不用怀疑,SVGO 是用来实现这个功能的工具中使用最为广泛的。

第 3 段(可获 1.06 积分)

SVGO 运行在 Node.js 之上,是一个异步的、事件驱动的网络应用。你不需要为了使用 SVGO 而去了解如何构建 Node.js 应用。 不过你需要了解命令行的使用方法。

SVGO 可以让你启用和禁用一些特别的优化效果,这个是通过插件来实现的。

例如,如果你想要移除 SVG 图形中空的属性,可以启用插件 removeEmptyAttrs.js plugin.

SVGO 所有的插件列表请看 GitHub.

第 4 段(可获 1.28 积分)

有不少方法可以让你将 SVGO 集成到你的开发工作中。下面我们将讨论三种不同的方式。

#1. Node.js 和 SVGO

为了开始使用 SVGO,需要安装最新稳定版本的 Node.js ,请选择对应操作系统版本,并依照安装程序指南进行。

接下来你需要 npm (Node.js 的包管理器) 来安装 SVGO。请在终端命令行中输入如下命令:

npm install -g svgo

现在就已经装好了 SVGO ,可以在任何位置使用它。

输入以下命令来优化一个 SVG 文件:

第 5 段(可获 1.3 积分)
svgo yoursvgfile.svg

将 yoursvgfile.svg 文件替换成你优化过的 SVG 文件。不过,用这种方式使用工具会破坏原始文件,这是我不建议的。事实上你可能想要对源文件进行修改,这样会破坏文件中包含的编辑器特定信息,使之无法使用图形程序的功能。所以最好的实践是生成一个全新文件,这样不会覆盖原有文件。这样做的命令如下:

svgo yoursvgfile.svg yoursvgfile.min.svg
第 6 段(可获 1.04 积分)

现在你有两个 SVG 文件,原始文件名是 yoursvgfile.svg,经过优化后的文件名是 yoursvgfile.min.svg 。

我刚刚执行了这个步骤,SVGO 告诉我其优化文件耗费了 167 毫秒。优化后的文件体积 17.9kb,减少了 11.48kb,优化效果 36.2%。

Message after SVGO performs its SVG file optimization.

如果你用文本编辑器打开 yoursvgfile.min.svg 文件,就会发现代码更少了,所以文件的体积也更小。非常棒!

你也可以使用 -f 参数来指定 SVGO 要输出文件的路径,如下所示:

svgo -f ../path/to/folder/with/svg/files
第 7 段(可获 1.21 积分)

为了定制 SVGO 优化的效果,可以利用 SVGO 带的很多插件,例如:

svgo yoursvgfile.svg --enable='removeComments,mergePaths'

该命令为  yoursvgfile.svg 文件创建一个优化版本,该优化版本中去除注释,合并源码中的多个路径。

#2. 将 SVGO 集成到 Glup 工作流

一个广泛使用的前端工作流程包括一个任务运行工具用来自动执行诸如编译 Sass 到 CSS、压缩脚本等等操作。

其中一个最受欢迎的运行工具就是 Gulp, 该工具不仅强大而且实现快速。

第 8 段(可获 0.99 积分)

很容易将 SVGO 集成进你基于 Glup 的工作流程,这得益于 gulp-svgmin。

可以使用 npm 来安装 gulp-svgmin :

npm install gulp-svgmin

一个用于 svgmin 的基本 gulp 任务如下所示:

var gulp = require('gulp');
var svgmin = require('gulp-svgmin');

gulp.task('default', function () {
  return gulp.src('logo.svg')
    .pipe(svgmin())
    .pipe(gulp.dest('./out'));
});

上述代码是你添加到 Gulp 配置文件 Gulp.js 里的内容,该代码调用 svgmin 对 logo.svg 进行优化,并输出到指定目录。

更多的示例请参考 gulp-svgmin GitHub 页面。如果对 Gulp 还不太熟悉,但你想更快的上手,可以阅读 Giulio Mainardi 的文章 An Introduction to Gulp.js ,该文章提供了非常简单的入门教程。

第 9 段(可获 1.16 积分)

#3. SVGOMG: 在线版本的 SVGO

命令行工具很实用而且可以快速完成所需的工具。然后没法对优化后的 SVG 图像进行预览。

预览的好处就是让你可以即时的发现一个图像经过优化后是否发生什么退化。所以你可以快速的进行优化参数的调整,以获得满足要求的图像输出。

SVGOMG 是由 Jake Archibald 开发的在线 SVGO 优化工具。

这是一个免费在线的 SVGO 的 GUI (Graphical User Interface) 版本(SVGOMG 全称是 SVGO Missing GUI):

第 10 段(可获 1.26 积分)

SVGOMG Interface.

SVGOMG 界面.

可以选择以下三种方式开始:

  • 将你的 SVG 图形文件拖放至界面中用灰色标注的区域,如上图所示
  • 使用电脑的文件上传功能打开你的 SVG
  • 将你的 SVG 代码粘贴到设计菜单区域

或者你也可以点击 Demo 菜单来使用演示的 SVG 文件。

一旦你完成上述步骤,就可以可以调整工具的设置,这些工具对应的是 SVGO 的插件,然后可以立即预览的调整后的效果,包括图形的质量以及文件大小。

第 11 段(可获 1.34 积分)

SVGOMG in action.

SVGOMG 开动了。

最大的好处就是如果你调整得太厉害导致图像被破坏,你可以马上采取行动,将问题扼杀在萌芽状态。

如果你点击左上角的 Code 菜单项,你就可以在代码中看到 SVGOMG 产生的即时的代码反馈。

你同时可以切换原图和优化的版本显示,这个方便你做比较。

最后一个很棒的特性是 SVGOMG 也可以支持离线使用,这项特性是利用 Service Workers 技术实现的。

第 12 段(可获 1.35 积分)

结论

如果你关注简洁的代码以及网站性能,那么你应该对你的 SVG 图像进行优化。

在这篇文字中我为你指明用三种用 SVGO 优化 SVG 图像的方法。还有其他的方法,如:

你会怎么用 SVGO 呢?你的 SVG 图像优化流程是怎样的呢?请在下面评论框中分享你的方法。

第 13 段(可获 1.25 积分)

文章评论