Sketch压缩SVG插件SVGO Compressor

更新时间:04-18   软件大小:220 KB   软件由 卟想洅僾妳 上传,软件仅供学习参考

SVGO Compressor

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


安装


  • 下载并解压 SVGO Compressor.zip

  • 双击 SVGO Compressor.sketchplugin 完成安装


使用


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

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


Sketch压缩SVG插件SVGO Compressor


编辑设置


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


Sketch压缩SVG插件SVGO Compressor


插件做了什么


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


1
大家都在问

1、成为VIP后官网所有素材都可以下载吗?

成为旗舰QVIP后,图翼网(www.tuyiyi.com)官网所有素材都可以无限制下载。

2、素材会持续更新吗?

会 ,网站资料每天都有更新,且资源都是高端素材,精心的海外商业设计资源,可激发你的创造性。

3、充值购买后多久能够下载素材?

付款后秒成为VIP会员,如付款后没有显示VIP标识,可以退出重新登录账号即可显示。

4、免费下载或者VIP会员专享资源能否直接商用?

本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。

5、购买后支持退款吗?

在VIP有效期内素材可以无限下载,由于素材是虚拟物品,购买之后不支持退换。

标签:sketch插件
图翼网微信公众号:tuyiyicom
图翼网在线客服QQ:1003030973
图翼网站导航
图翼网QQ群联盟