Plugin convertPathData messes up icon

[jlherren]

Given the following SVG:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.6, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
     viewBox="0 0 18.7 23.6" style="enable-background:new 0 0 18.7 23.6;" xml:space="preserve">
<style type="text/css">
	.st0{fill:none;stroke:#9160ad;stroke-width:0.5;stroke-miterlimit:10;}
</style>
    <g>
	<path class="st0" d="M18.5,5.7c0-0.8-0.7-1.5-1.5-1.5h0c-0.8,0-1.5,0.7-1.5,1.5v4.8c0,0,0-6.7,0-6.7c0-0.8-0.7-1.5-1.5-1.5h0
		c-0.8,0-1.5,0.7-1.5,1.5v6.7c0,0,0-8.7,0-8.7c0-0.8-0.7-1.5-1.5-1.5h0c-0.8,0-1.5,0.7-1.5,1.5v2c0-0.8-0.7-1.5-1.5-1.5h0
		C7,2.3,6.3,2.9,6.3,3.8v10.3l-3.8-1.6c0,0-1-0.5-1.8,0.4c-1,1.1,0,1.9,0,1.9l7.7,7.7c1,0.6,2.2,1,3.4,1c3.6,0,6.5-2.8,6.6-6.3l0,0
		V5.7z"/>
        <line class="st0" x1="9.4" y1="3.7" x2="9.4" y2="10.5"/>
</g>
</svg>

Which looks like this:

When it is processed with svgo 1.3.0 using default settings, it results in this SVG:

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 18.7 23.6" xml:space="preserve"><style>.st0{fill:none;stroke:#9160ad;stroke-width:.5;stroke-miterlimit:10}</style><path class="st0" d="M18.5 5.7c0-.8-.7-1.5-1.5-1.5s-1.5.7-1.5 1.5V3.8c0-.8-.7-1.5-1.5-1.5s-1.5.7-1.5 1.5V1.8c0-.8-.7-1.5-1.5-1.5S9.5 1 9.5 1.8v2c0-.8-.7-1.5-1.5-1.5-1 0-1.7.6-1.7 1.5v10.3l-3.8-1.6s-1-.5-1.8.4c-1 1.1 0 1.9 0 1.9l7.7 7.7c1 .6 2.2 1 3.4 1 3.6 0 6.5-2.8 6.6-6.3V5.7zM9.4 3.7v6.8"/></svg>

Which looks like this:

I found out that I can set convertPathData.collapseRepeated to false to avoid this issue. But I suppose this shouldn't be happening in the first place.

[Despair-lj]

The problem with this svg is that there is a problem with your path.

v4.8 c0,0,0-6.7.0 -6.7 

The c path describes a straight line, so svgo optimizes it into a v path and merges the two, so svg loses part of the content.
You should change the path to m0, 4.8v-6.7, which will solve the problem.

and input

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
     viewBox="0 0 18.7 23.6" style="enable-background:new 0 0 18.7 23.6;" xml:space="preserve">
<style type="text/css">
	.st0{fill:none;stroke:#9160ad;stroke-width:0.5;stroke-miterlimit:10;}
</style>
    <g>
	<path class="st0" d="M18.5,5.7c0-0.8-0.7-1.5-1.5-1.5h0c-0.8,0-1.5,0.7-1.5,1.5m0,4.8v-6.7c0-0.8-0.7-1.5-1.5-1.5h0
		c-0.8,0-1.5,0.7-1.5,1.5m0,6.7v-8.7c0-0.8-0.7-1.5-1.5-1.5h0c-0.8,0-1.5,0.7-1.5,1.5v2c0-0.8-0.7-1.5-1.5-1.5h0
		C7,2.3,6.3,2.9,6.3,3.8v10.3l-3.8-1.6c0,0-1-0.5-1.8,0.4c-1,1.1,0,1.9,0,1.9l7.7,7.7c1,0.6,2.2,1,3.4,1c3.6,0,6.5-2.8,6.6-6.3l0,0
		V5.7"/>
        <line class="st0" x1="9.4" y1="3.7" x2="9.4" y2="10.5"/>
</g>
</svg>

output

<svg id="Ebene_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.7 23.6">
  <style>.st0 {fill: none;stroke: #9160ad;stroke-width: 0.5;stroke-miterlimit: 10;}</style>
  <path
    class="st0"
    d="M18.5 5.7c0-.8-.7-1.5-1.5-1.5s-1.5.7-1.5 1.5m0 4.8V3.8c0-.8-.7-1.5-1.5-1.5s-1.5.7-1.5 1.5m0 6.7V1.8c0-.8-.7-1.5-1.5-1.5S9.5 1 9.5 1.8v2c0-.8-.7-1.5-1.5-1.5-1 0-1.7.6-1.7 1.5v10.3l-3.8-1.6s-1-.5-1.8.4c-1 1.1 0 1.9 0 1.9l7.7 7.7c1 .6 2.2 1 3.4 1 3.6 0 6.5-2.8 6.6-6.3V5.7M9.4 3.7v6.8"
  />
</svg>

I hope to help you.

[jlherren]

Thanks for the reply. Are you saying that the input is an invalid SVG file? Because I obviously didn't create this SVG manually, it was created by Adobe Illustrator and it happens to renders correctly everywhere I tested it. If it's indeed invalid, then it's a bug in Illustrator.

[Despair-lj]

This SVG file can be rendered correctly, but there is a problem with the path selection.
The c path is used to describe the arc, and the v path is used to describe the line, but your svg uses the c path to describe a line.It's not a bug, but svgo converts it to v path

c0,0,0-6.7,0-6.7 -> v-6.7

Two v paths are connected, so svgo will combine the two

v4.8v-6.7 -> v-1.9

This is why the line is missing.
In my opinion, I can't say that the path is invalid. I just analyzed the problem and gave my suggestion.

You can see the introduction of SVG path here

[GreLI]

SVGO doesn't apply this optimization in presence of strokes. Unfortunately, support for styles is poor, so SVGO doesn't know about stroke. inlineStyles plugin should help

[jlherren]

Thank you for the replies!

I investigated some more and read the SVG path specs and I think I understand it better now. My SVG is indeed using a degenerated cubic bezier curve, where the two control points happen to coincide with the start and end point of the curve. That is unusual indeed but it's still a valid cubic bezier, at least in the mathematical sense.

But while investigating, I found a much smaller and simpler example that also gets messed up by SVGO. It does not use any style elements and the control points do not coincide with the start/end point of the curve. They are however on the curve itself, which produces yet again a straight line, but that is quite unquestionably a valid thing to do.

Here's the example:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
<path stroke="#000" fill="none" d="M1 1 v8 c0-2 0-4 0-6"/>
</svg>

And the output that SVGO produces (line breaks added by me):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
<path stroke="#000" fill="none" d="M1 1v2"/>
</svg>

As soon as I get some time I can try to have a look at what causes this wrong simplification, which is likely to be some division by zero or something similar.