Svgo: 'prefix' option of cleanupIDs does not seem to work

[chipcullen]

First off, thank you to everyone is working on this great tool. It makes working with SVGs so much better!

I'm currently trying to run a directory of icons through a gulp routine (using gulp-svgmin), and for the life of me, I cannot get the 'prefix' feature of cleanupIDs to work. My ultimate goal is to dynamically prefix IDs for all of the files.

I simply _can't get prefix to work, at all_. I'm stumped. This doesn't seem to be related to the gulp plugin, though. Let's set the gulp plugin aside for a moment.

I've tried a lot of different things, and have a reduced case that demonstrates my problem:

I have globally installed SVGO

svgo -v: 0.7.0
node -v: 6.3.0

I made the following config file (called svgo.yaml):

plugins:
  - cleanupIDs:
      remove: false
      prefix: 'foo-'
  - addClassesToSVGElement:
       className: 'mySvg'

(I'm including addClassesToSVGElement just to demonstrate that other options work)

Here is my test.svg file:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 172.23 172.23" id="bar1">
    <title id="bar2">
        Test SVG
    </title>
    <path id="bar3" d="M172.23 86.11A86.12 86.12 0 1 1 86.11 0a86.11 86.11 0 0 1 86.12 86.11"/>
</svg>

Now I run svgo --config=svgo.yaml --pretty test.svg

Here is my output:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 172.23 172.23" id="bar1" class="mySvg">
    <title id="bar2">
        Test SVG
    </title>
    <path id="bar3" d="M172.23 86.11A86.12 86.12 0 1 1 86.11 0a86.11 86.11 0 0 1 86.12 86.11"/>
</svg>

My _expected_ output would be

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 172.23 172.23" id="foo-bar1" class="mySvg">
    <title id="foo-bar2">
        Test SVG
    </title>
    <path id="foo-bar3" d="M172.23 86.11A86.12 86.12 0 1 1 86.11 0a86.11 86.11 0 0 1 86.12 86.11"/>
</svg>

• Am I missing something with how the prefix option is supposed to be configured?
• Is there anything else I can try?
• The remove option seems to be working, as the IDs remain, just not prefixed.

Any help/insight is greatly appreciated. Thank you!!

[GreLI]

prefix option is being used only with minify: true. E.g. in yours test.svg it would be “foo-a”.

[chipcullen]

Hrm - when I change my config file to:

plugins:
  - cleanupIDs:
      remove: false
      prefix: 'foo-'
      minify: true
  - addClassesToSVGElement:
       className: 'mySvg'

My output is still:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 172.23 172.23" id="bar1" class="mySvg">
    <title id="bar2">
        Test SVG
    </title>
    <path id="bar3" d="M172.23 86.11A86.12 86.12 0 1 1 86.11 0a86.11 86.11 0 0 1 86.12 86.11"/>
</svg>

So, neither option has taken. Am I misunderstanding something? Based on what you say, I would expect

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 172.23 172.23" id="foo-a" class="mySvg">
    <title id="foo-b">
        Test SVG
    </title>
    <path id="foo-c" d="M172.23 86.11A86.12 86.12 0 1 1 86.11 0a86.11 86.11 0 0 1 86.12 86.11"/>
</svg>

[GreLI]

Based on what you say, I would expect...

Well, that's what I get myself with your config. Have you applied it properly?

[chipcullen]

Have you applied it properly?

Besides the creation of the config file, and passing it via --congfig= in the command, is there anything else one needs to do?

[chipcullen]

If this helps, this is what I'm seeing:

[GreLI]

Oh, I got it. Only used IDs are being minified.

[jaafit]

I'd like to have this applied to unused IDs as well. I often reference IDs from outside the svg file, and would like to prefix these ids to avoid collisions.

Until such a feature is available, what's a clean way to make my own custom plugin for svgmin?

[strarsis]

@jaafit, @chipcullen, @james-brndwgn, @kyleknighted, @teebszet, @pavel-popov-jr:
prefixIDs plugin is now available in svgo release.

[blowsie]

For me the plugin doe not appear to prefix mask elements