Unique IDs

[robjbrain]

Is there a way to get the generated SVGs to have Unique IDs?

Right now it seems to generate IDs such as "a", "b", "c" etc which when having multiple SVGs on one page is causing issues.

It looks like perhaps this plugin would help, but i'm not sure how to integrate it with laravel-mix-svg-vue https://github.com/josephmcasey/sketch-plugin-svgo-unique-id

[robjbrain]

To add to this, the setting causing it to be renamed to "a", "b" etc is cleanupIDs which the svgo docs say:

remove unused and minify used IDs

There is a prefixIds command which is defined as:

prefix IDs and classes with the SVG filename or an arbitrary string

But this seems to prefix the id "mask" as "prefixprefixmask" in every single image. I'm guessing it's not picking up the filename because of how this plugin works?

This is the config i'm using:

.svgVue({
        extract: true,
        svgoSettings: [
            { prefixIds: true },
            { cleanupIDs: false },
            { removeTitle: true },
            { removeViewBox: false },
            { removeDimensions: true }
        ]
    })

[danielstgt]

I'm sorry for this extremely delayed reply.

This issue taught me a bit more about IDs in general inside a <svg> element, never knew about the need for uniqueness. Good to know!

However, you are correct that the documented prefix from SVGO doesn't get applied. As you guessed, the underlying plugin doesn't seem to get the filename passed.

A bit naive solution (and if possible) would be to omit the IDs.

There are two issues I found for the used SVGO plugin regarding this issue:

https://github.com/imagemin/imagemin-svgo/issues/41 https://github.com/imagemin/imagemin-svgo/issues/17

For now, I will close this issue here and keep an eye on the other ones.