javascriptsvggulpgulp-imageminimagemin

Imagemin svgo delete path


<?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>

I have SVG icon with two "path" tags. After building with imagemin.svgo imagemin remove one of this "path" and my icon looks very bad. How can I fix this?

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

This is my options.


Solution

  • Actually, SVGO doesn't remove the second path, it merges it into the first one (it's done by “mergePath” plugin enabled by default). But, since the second path has zero length, SVGO removes the “lineto” (“L10,14.8”) command (“convertPathData” plugin does that), so it reduces to just useless “moveto” (M10 14.8) command.

    I'd recommend not to draw images in a such style. You may use another <circle>, or draw a circle in a path with arc curves.

    Of course, you can disable “convertPathData” plugin for this particular image, but I don't recommend it as a general solution, since it's one of the basic optimization plugins.