Imagemin svgo 删除路径答案

【问题标题】：Imagemin svgo delete pathImagemin svgo 删除路径
【发布时间】：2017-06-21 11:22:23
【问题描述】：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="icons" transform="translate(-368.000000, -426.000000)">
            <g id="attention-blue" transform="translate(368.000000, 426.000000)">
                <circle id="Oval-13" fill="#34C6D9" cx="10" cy="10" r="10"></circle>
                <path d="M10,10.8 L10,5.6" id="Line" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M10,14.8 L10,14.8" id="Line2" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
            </g>
        </g>
    </g>
</svg>

我有带有两个“路径”标签的 SVG 图标。使用 imagemin.svgo imagemin 构建后，删除此“路径”之一，我的图标看起来很糟糕。我怎样才能解决这个问题？

gimagemin.svgo({
    plugins: [
      {minifyStyles: false},
      { removeViewBox: false },
      { removeUselessStrokeAndFill: false },
      { cleanupIDs: false }
        ]
  })

这是我的选择。

【问题讨论】：

标签： javascript svg gulp gulp-imagemin imagemin

【解决方案1】：

实际上，SVGO 不会删除第二个路径，它会将其合并到第一个路径中（这是由默认启用的“mergePath”插件完成的）。但是，由于第二条路径的长度为零，SVGO 删除了“lineto”（“L10,14.8”）命令（“convertPathData”插件执行此操作），因此它简化为无用的“moveto”（ M10 14.8) 命令。

我建议不要以这种风格绘制图像。您可以使用另一个<circle>，或者在带有arc curves 的路径中画一个圆圈。

当然，您可以为该特定图像禁用“convertPathData”插件，但我不建议将其作为通用解决方案，因为它是基本的优化插件之一。

【讨论】：