SVGO Compressor

基于 SVGO 导出 SVG 资源时主动压缩

安装

• 下载并解压 SVGO Compressor.zip

• 双击 SVGO Compressor.sketchplugin 完成安装

使用

• 输出资源时 SVGO Compressor 将直接压缩 SVG 资源，无需额外的操作

• 在文档窗口将获得一条消息，显示该进程的一些统计信息，以便让你知道压缩工作与预期一致

编辑设置

如默认设置无法满足需求，可执行 Plugins > SVGO Compressor > About SVGO Compressor 在弹出的对话框点击 Edit SVGO Settings… 按钮，系统默认编辑器将打开 svgo.json 文件以编辑

插件做了什么

addAttributesToSVGElement

添加属性至外部为 SVG 的元素

addClassesToSVGElement

添加类至外部为 SVG 的元素

cleanupAttrs

清理属性换行、结尾和重复的空格

它的作用：

它删除在 SVG 属性中换行符、结尾和重复的空格，由于 Sketch 不输出多余的空格或换行符，所以这个属性在插件中默认不启用

cleanupEnableBackground

删除或清除附有宽/高的 enable-background 属性（详见 w3.org )

它会把：

<svg>

转换为：

<svg>

这不是 SVGO Compressor 所需要的，由于 Sketch 不输出 enable-background 属性，所以这个属性在插件中默认不启用

cleanupIDs

删除文档中未使用的 IDs 属性，压缩使用的 IDs 体积（如果没有 <style> 或 <script> 标签）

它会把：

<defs>

<rect id="path-1" x="0" y="0">

</defs>

<mask id="mask-2" fill="white">

<use xlink:href="#path-1"></use>

</mask>

<use id="Mask" fill="#D8D8D8" xlink:href="#path-1"></use>

<rect id="Rectangle" fill="#D8D8D8" mask="url(#mask-2)" x="-10" y="-10">

转换为：

<defs>

<rect id="a" x="0" y="0">

</defs>

<mask id="b" fill="white">

<use xlink:href="#a"/>

</mask>

<use fill="#D8D8D8" xlink:href="#a"/>

<rect fill="#D8D8D8" mask="url(#b)" x="-10" y="-10">

默认情况下，SVGO 会在 defs 中改变 IDs 的路径，使用更简短的名称 (a, b…)，但这可能不是所有情况下的理想 (如：如果导出多个网页使用的 SVG 资源，会在不同资源中使用相同的 IDs 路径）

解决这个问题，通过增加每个资源的前缀，基于其文件名，如：如果你输出一个资源命名 icon-star 其 defs 将被命名为 icon-star-a、icon-star-b 等… 可通过设置 svgo.json 中 minify 为 false

"plugins": [

  {

    "name": "cleanupIDs",

    "params": {

      "minify": false

    }

  }

]

cleanupListOfValues

以下属性值列表四舍五入为固定精度（默认为 3 位小数）

points

enable-background

viewBox

stroke-dasharray

dx

dy

x

y

不包括 width、height 或 transform 属性

它会把：

<polygon points="208.250977 77.1308594 223.069336 ... "/>

转换为：

<polygon points="208.251 77.131 223.069 ... "/>

它在 SVGO Compressor 中默认启用且精确到 3 位小数，如果想改变精度，可修改 svgo.json

"plugins": [

  {

    "name": "cleanupListOfValues",

    "params": {

      "floatPrecision": 1

    }

  }

]

cleanupNumericValues

将数值四舍五入为固定精度，默认移除的 px 单位

在 SVGO Compressor 中默认启用

collapseGroups

折叠无用的组

它会把：

<g>

<g attr1="val1">

<path d="..."/>

</g>

</g>

转换为：

<path attr1="val1" d="..."/>

在 SVGO Compressor 中默认启用

convertColors

将颜色 rgb() 转换为 #rrggbb，将 #rrggbb 转换为 #rgb

它支持以下功能：

将颜色名称关键字转换十六进制色值（names2hex 参数默认启用）

fuchsia > #ff00ff

将 rgb() 转换为十六进制色值（rgb2hex 参数默认启用）

rgb(255, 0, 255) > #ff00ff

rgb(50%, 100, 100%) > #7f64ff

将长十六进制转换为短十六进制色值（shorthex 参数默认启用）

#aabbcc > #abc

将十六进制色值转换为短颜色名称（shortname 参数默认启用）如果颜色名称短于十六进制色值长度，则将十六进制转换为颜色名称

#000080 > navy

convertPathData

优化路径数据：以较短的形式应用转换

由于操作会修改路径数据，因此在 SVGO Compressor 中默认关闭

convertShapeToPath

将基本形状转换为更紧凑的路径形式

在 SVGO Compressor 中默认关闭，因为它会把 rect 和 polygon 变成 paths 如果你打算做 SVG 动画，这不是理想的操作

convertStyleToAttrs

在属性中转换样式：清理注释和无效声明（无冒号）

它会把：

<g>

转换为：

<g fill="#000" color="#fff">

在 SVGO Compressor 中默认启用

convertTransform

将矩阵转换为短的别名，将长转换、缩放或旋转变换符号转换为短符号，将变换转换为矩阵，并将它们全部合并为一个，删除无用的变换

在 SVGO Compressor 中默认启用

mergePaths

将多个路径合并为一个

在 SVGO Compressor 中默认启用

minifyStyles

压缩样式（<style> 元素 + 样式属性）

在 SVGO Compressor 中默认启用

moveElemsAttrsToGroup

将内容相交和可继承属性折叠到现有的组容器

它会把：

<g attr1="val1">

<g attr2="val2">

text

</g>

<circle attr2="val2" attr3="val3"/>

</g>

转换为：

<g attr1="val1" attr2="val2">

<g>

text

</g>

<circle attr3="val3"/>

</g>

在 SVGO Compressor 中默认关闭

moveGroupAttrsToElems

将组属性移动到内容元素

它会把：

<g transform="scale(2)">

<path transform="rotate(45)" d="M0,0 L10,20"/>

<path transform="translate(10, 20)" d="M0,10 L20,30"/>

</g>

转换为：

<g>

<path transform="scale(2) rotate(45)" d="M0,0 L10,20"/>

<path transform="scale(2) translate(10, 20)" d="M0,10 L20,30"/>

</g>

在 SVGO Compressor 中默认关闭

removeAttrs

删除插件参数中的指定属性

例如：

"plugins": [

  {

    "name": "removeAttrs",

    "params": {

      "attrs": "fill"

    }

  }

]

将删除文件中的所有 fill 属性

由于显而易见的原因 SVGO Compressor 中默认关闭

removeComments

删除 SVG 文件中的注释，去掉 <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->

在 SVGO Compressor 中默认启用

removeDesc

删除 <desc> 去掉 <desc>Created with Sketch.</desc>

在 SVGO Compressor 中默认启用

removeDimensions

当 viewBox 属性存在时删除 宽/高度 属性

在 SVGO Compressor 中默认关闭，因为特定情况下会在网页上渲染

removeDoctype

删除 DOCTYPE 声明

在 SVGO Compressor 中默认启用

removeEditorsNSData

删除编辑器命名空间、元素和属性

由于历史原因，在 SVGO Compressor 中默认启用，但 Sketch 不再输出编辑器命名空间，所以并不需要

removeElementsByAttr

通过 ID 或 className 删除任意 SVG 元素

例如：

"plugins": [

  {

    "name": "removeElementsByAttr",

    "params": {

      "id": "elementID"

    }

  }

]

将删除所有 id 为 elementID 的元素

由于显而易见的原因在 SVGO Compressor 中默认关闭

removeEmptyAttrs

删除空值属性

在 SVGO Compressor 中默认启用

removeEmptyContainers

删除空容器元素

例如如下

<g>

<marker>

<a/>

</marker>

</g>

会被清空

在 SVGO Compressor 中默认启用

removeEmptyText

删除空文本元素

在 SVGO Compressor 中默认启用

removeHiddenElems

删除隐藏元素与禁用渲染

display="none"

opacity="0"

圆半径为零

具有零 x 或 y 轴半径的椭圆

具有零宽或高的矩形

宽高为零的模式

宽高为零的图像

有空数据的路径

无锚点折线

无锚点多边形

在 SVGO Compressor 中默认关闭，因 Sketch 不会导出隐藏元素

removeMetadata

删除 <metadata>

在 SVGO Compressor 中默认启用

removeNonInheritableGroupAttrs

删除组非可继承的 "演示" 属性

在 SVGO Compressor 中默认启用

removeRasterImages

删除 <image> 光栅图像引用

在 SVGO Compressor 中默认关闭，因为它非常具有破坏性

removeStyleElement

删除 <style> 元素

在 SVGO Compressor 中默认关闭

removeTitle

删除 <title>

在 SVGO Compressor 中默认启用，但你可能因为可访问性原因禁用它

removeUnknownsAndDefaults

删除未知元素的内容和属性，删除属性的默认值

在 SVGO Compressor 中默认启用

removeUnusedNS

删除未使用的命名空间声明

在 SVGO Compressor 中默认启用

removeUselessDefs

删除不带 IDs 直接呈现的 defs 和属性内容

在 SVGO Compressor 中默认启用

removeUselessStrokeAndFill

删除未使用的 stroke 和填充属性

在 SVGO Compressor 中默认启用

removeViewBox

删除与宽/高度一样的 viewBox 属性

它会把：

<svg>

转换为：

<svg>

在 SVGO Compressor 中默认关闭

removeXMLNS

移除存在的 xmlns 属性

它会把：

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

转换为：

<svg viewBox="0 0 100 50">

在 SVGO Compressor 中默认启用

removeXMLProcInst

删除 XML 处理指令 <?xml version="1.0" encoding="UTF-8"?>

在 SVGO Compressor 中默认启用

sortAttrs

对元素属性进行排序以提高可读性

在 SVGO Compressor 中默认启用

transformsWithOnePath

在一个路径上执行一组 SVG 操作

在 SVGO Compressor 中默认关闭，除非你真的知道你在做什么，否则不要启用：)