Convert <use> tags. By default only defs with a single <use>.

[nikparo]

I ran into exported svg's that use a lot of unnecessary defs, and decided to take matters into my own hands...

This plugin:

• loops through the svg to first find all <defs> element definitions. It then finds all <use> items.
  (In hindsight, this should have been done in a single loop.)
• Filters out the element definitions that are only used once (by default, but optional)
• Converts <use> to <g> and inserts a clone of the definition.
• Removes the definitions that have been inlined.

This plugin does not remove unused definitions or collapse the resulting groups, leaving that for removeUselessDefs and collapseGroups.

I believe this plugin would cover the request in #563

[edit: now removes the definitions that have been inlined]

[nikparo]

May have created the request a bit too early, noticed that there are some problems with at least masks and clip paths.

[Edit: My test was faulty.]

[GreLI]

There are several caveats in your code.

[alexjlockwood]

I don't think this PR handles CSS cascades correctly. According to the SVG spec, CSS cascade is applied to the referenced elements, not the (conceptually) cloned elements that make up the shadow DOM. What I think you would have to do is:

1. Run some sort of inlineStyles plugin (i.e. Add inlineStyles plugin (rewrite of localStyles plugin) #592) on the SVG so that all of the elements that are descendants of a <defs> element are assigned their styled attributes.
2. Then run this plugin (i.e. find the <use> tags and replace them with the deeply cloned elements).
3. Make sure that any property-inheritance-related plugins are run after step (2).

Also I would take a look at the SVG spec on the <use> and <defs> tags since I also saw some things that were missing. For example, the plugin doesn't handle cases where x, y, width, and/or height attributes are specified on the <use> tag, etc.

Also this plugin doesn't handle the case where the <use> tag references another <use> tag, which apparently is possible.

[GreLI]

Well, SVGO doesn't handle CSS almost at all.

[strarsis]

A window.getComputedStyle() implementation would be useful here.
It is quite similar to inlineStyles plugin and style related API,
an extra lookup table or property would be required because it would be too slow otherwise.
This could be implemented as extra methods in css-tools when style support has been merged in.

[GreLI]

xlink can has any prefix not always xlink. Moreover, SVG 2 has allowed using href attribute without prefix at all.

[GreLI]

You can just set

prevId = i > 0 ? itemAry[i - 1].attr('xlink:href').value : null;
nextId = i < itemAry.length - 1 ? itemAry[i + 1].attr('xlink:href').value : null;

without try-catch (they are preventing JIT-optimizing).

But I'd recommend using Set to check for uniqueness.

[GreLI]

Here are two elements with the same id="rect" . Worth removing id?