Combining multiple shapes into a <path> breaks <linearGradient>

[andersk]

svgo combines multiple shapes sharing the same <linearGradient> into a single <path>. This happens in the mergePaths plugin, and visually changes the result since the gradient stops are relative to the bounding box of the shape to which the gradient is applied (with the default gradientUnits="objectBoundingBox").

Input

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100">
    <linearGradient id="gradient">
        <stop offset="0" stop-color="#ff0000" />
        <stop offset="1" stop-color="#0000ff" />
    </linearGradient>
    <path fill="url(#gradient)" d="M 0 0 H 100 V 100 H 0 z" />
    <path fill="url(#gradient)" d="M 200 0 H 300 V 100 H 200 z" />
</svg>

Output

(Indentation restored for clarity.)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100">
    <linearGradient id="a">
        <stop offset="0" stop-color="red"/>
        <stop offset="1" stop-color="#00f"/>
    </linearGradient>
    <path fill="url(#a)" d="M0 0h100v100H0zM200 0h100v100H200z"/>
</svg>

[jadsongmatos]

is there any project that convert images to svg with gradient?

[andersk]

This is somewhat similar to #1217.

Should the mergePaths plugin be disabled by default?