svgo icon indicating copy to clipboard operation
svgo copied to clipboard

convertShapeToPath does not consider animations

Open cyberalien opened this issue 2 years ago • 0 comments

Describe the bug Plugin convertShapeToPath changes shapes for animated elements, which rely on shape specific attribute.

To Reproduce Steps to reproduce the behavior:

Attempt to optimise this icon with convertShapeToPath plugin:

<svg width="24" height="24" viewBox="0 0 24 24">
    <rect x="2" y="4" width="20" height="16" fill="#307594">
        <set attributeName="height" to="0" />
        <set attributeName="opacity" to="0" />
        <animate attributeName="height" values="0;16" dur="1s" fill="freeze" />
        <animate attributeName="opacity" values="0;1" dur="1.5s" fill="freeze" />
    </rect>
</svg>

Result is this:

<svg width="24" height="24" viewBox="0 0 24 24">
    <path fill="#307594" d="M2 4H22V20H2z">
        <set attributeName="height" to="0"/>
        <set attributeName="opacity" to="0"/>
        <animate attributeName="height" values="0;16" dur="1s" fill="freeze"/>
        <animate attributeName="opacity" values="0;1" dur="1.5s" fill="freeze"/>
    </path>
</svg>

Animation no longer works as expected because height attribute no longer exists.

Expected behavior Expected rect to not be converted to path because it has animations that change height attribute, so converting to path ruins animation.

Desktop (please complete the following information):

  • SVGO Version: 2.8.0
  • NodeJs Version: 16.13.0
  • OS: macOS 12.1

cyberalien avatar Jan 05 '22 18:01 cyberalien