SVGO Compressor

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

安装

  1. 下载并解压 SVGO Compressor.zip
  2. 双击 SVGO Compressor.sketchplugin 完成安装

使用

  1. 输出资源时 SVGO Compressor 将直接压缩 SVG 资源,无需额外的操作
  2. 在文档窗口将获得一条消息,显示该进程的一些统计信息,以便让你知道压缩工作与预期一致

编辑设置

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

插件做了什么

addAttributesToSVGElement

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

addClassesToSVGElement

添加类至外部为 SVG 的元素

cleanupAttrs

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

它的作用:

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

cleanupEnableBackground

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

它会把:

<svg width="100" height="50" enable-background="new 0 0 100 50">

转换为:

<svg width="100" height="50">

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

cleanupIDs

删除文档中未使用的 IDs 属性,压缩使用的 IDs 体积(如果没有 <style><script> 标签)

它会把:

<defs>
	<rect id="path-1" x="0" y="0" width="100" height="100"></rect>
</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" width="100" height="100"></rect>

转换为:

<defs>
	<rect id="a" x="0" y="0" width="100" height="100"/>
</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" width="100" height="100"/>

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

解决这个问题,通过增加每个资源的前缀,基于其文件名,如:如果你输出一个资源命名 icon-stardefs 将被命名为 icon-star-aicon-star-b 等… 可通过设置 svgo.jsonminifyfalse

"plugins": [
  {
    "name": "cleanupIDs",
    "params": {
      "minify": false
    }
  }
]

cleanupListOfValues

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

不包括 widthheighttransform 属性

它会把:

<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 中默认关闭,因为它会把 rectpolygon 变成 paths 如果你打算做 SVG 动画,这不是理想的操作

convertStyleToAttrs

在属性中转换样式:清理注释和无效声明(无冒号)

它会把:

<g style="fill:#000; color: #fff; -webkit-blah: blah">

转换为:

<g fill="#000" color="#fff" style="-webkit-blah: blah">

在 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 width="100" height="50" viewBox="0 0 100 50">

转换为:

<svg width="100" height="50">

在 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 中默认关闭,除非你真的知道你在做什么,否则不要启用:)

基本信息