fix(reusePaths): reuse defs tag if exists and remove redundant nodes

[SethFalco]

If an SVG already had a defs tag, the reusePaths plugin would create a new one anyway. This changes it so if a defs tag is found to exist in the document already, reuse and append to it.

This avoids having 2 defs in the same document after optimizing, which is unexpected, and also reducing the SVG size further.

When reusing paths in an existing defs tag, it kept around useless nodes that sometimes even broke the SVG. This removes the node if it's an href only, and removes it if it's an id only pointing to another href, and points elements directly to that href instead.

Example

The plugin used to output this before, which includes some redundant nodes that broke SVGs:

<defs>
  <use xlink:href="#a"/>
  <use id="b" xlink:href="#a"/>
  <clipPath id="c">
    <use href="#b" width="100%" height="100%" overflow="visible"/>
  </clipPath>
</defs>

• <use xlink:href="#a"/> is literally doing nothing.
• <use id="b" xlink:href="#a"/> this can go, and replace references of #b with #a.

Metrics

Taking the SVG from the bug reports, this both fixes the problem while producing an even smaller final output. The test was performed with only reusePaths enabled.

SVG	Time	% reduced	final KiB
v3.0.2	39 ms	8.1%	100.613
this branch	45 ms	8.7%	99.886

I've also tested this in combination #1784 which still works correctly.

Related

• Closes reusePaths removes object #1737
• Will cause conflicts for fix(reusePaths): dont reuse id if referenced in href #1784 (I'll just fix them, no worries.)

Notes

• When set as a default plugin, test-regression had 3 mismatches before, still at 3.