Add prefixIds plugin

[strarsis]

This PR adds the prefixIds plugin which prefixes all identifiers (IDs, class names) and
also updates the url(...) references.

Additionally support for extra information is added that can be optionally used by the plugins,
currently containing the path to the input SVG file or that mode is text (when text input is used).

Related issues: #494 #595 #623 #673 #674
Similar approach would be inlining all styles (see the inlineStyles plugin) -
though this is not possible with elements that are <used/> (see #651).
This prefixing approach could be viewed as a "polyfill" (partially) for scoped styles.

[caub]

why you don't pass that info data in the config?

[strarsis]

The svgo architecture handles the config globally, it is harder to add per-plugin extra config than adding an extra argument to each plugin. Also this extra information is not config but rather environment/state instead.

[caub]

good point, things like floatPrecision too, could be global instead of spread like now https://github.com/svg/svgo/blob/master/lib/svgo/config.js#L36 I'll see if it could be done with your way.

But if you want to do less changes, you could do it like ^, every plugin that needs a global config, defines it in the config, and it gets spread

[strarsis]

Yes, the file path must be somehow injected into the config object for each file (or set to empty/false/null for a string input): https://github.com/strarsis/svgo/blob/67e5a3ef10e349bded15bc9f508596252c2884be/lib/svgo/coa.js#L437

[caub]

yea sorry again to be annoying, after that I stop:), but I think the best is to have an optional prefix property at the root of the config and pass it to any plugin that needs it like https://github.com/svg/svgo/blob/master/lib/svgo/config.js#L34, it's more consistent with current code. The other option would be to refactor more and do var svgo = require('svgo'); svgo.optimize(svgStr, options); passing whole config at each call, possibly in the form {common: {floatPrecision:.., prefix: '..'}, plugins: [...]} so each plugin receive common and its plugin specific options. This plugin is interesting, even if it doesn't really minify, I use svgo to make png/jpg previews of them, and I do that in iframes to avoid those conflicts, so your way could make it work too.

[strarsis]

@caub: Yes, a separate prefix config option is supported now (see https://github.com/svg/svgo/pull/700/files#diff-623dc50b643d62febf2af73ea1856b51R120).

[caub]

those 3 deps are really not necessary

just put the regex you need, and for tree walking it's just

function walk(node, cb) {
 cb(node);
 if (node.content) node.content.forEach(walk)
}

but make sure you can't use 'perItem' mode first

[strarsis]

Good point, I use perItem now.

[strarsis]

Edit: Referenceable attribute check added.

Currently all attribute values are checked for url(...) / ID references.
Maybe this can be made more efficient by only checking attributes that can actually reference to other elements, as defined in https://github.com/svg/svgo/blob/master/plugins/_collections.js#L2286.
Edit: The list contains properties, not elements that can reference.

[caub]

also I wouldn"t enable it by default

[strarsis]

FWIW, I just noticed that Illustrator CC offers 'Unique' for 'Object IDs' in SVG export options.

[funklos]

Jeah we also found this option but we also noticed that illustrator export is not suitable in every case.
In cooperation with our graphics department we decided to use sketch for SVG exports, since sketch is gaining more and more traction for reponsive screen design this was the logical consequence.
So the combination of sketch with svgo for batch optimization on deployment is our way in the future..

[strarsis]

@GreLI: Conflicts fixed, ready to merge!

[strarsis]

👍 Yes!

[theKashey]

Awaiting for the version bump!

[chenxiaochun]

Very good!

[TongDaDa]

I want to cancel the class prefix in the svg file, What should I do?

[strarsis]

@TongDaDa: You can disable plugins you don't want to use.