SVGInjector messes up id's inside defs

[tbredin]

The index of the injected svg seems to be inserted after id's, which is breaking url references

eg:

fill: url(#green)

image.svg:

<defs>
    <linearGradient id="green">
        ...
    </linearGradient>
</defs>

But when injected:

<defs>
    <linearGradient id="green-0">
        ...
    </linearGradient>
</defs>

[protodave]

Hey Thomas! SVGInjector renumerates all of the SVG IRI addressable elements to avoid an issue with browser render engines when using multiple instances of the same SVG. Take a look at:
https://github.com/iconic/SVGInjector/blob/master/svg-injector.js#L271 for some more details.

So, in your case, the element in your SVG that's using the fill attribute should have also been updated to point at the newly renumerated linearGradient ID.

Could you share that SVG (or the smallest version of it that exhibits the issue) and I'll look into what's is going on. Thanks!

[tbredin]

Thanks @protodave, that actually makes a lot of sense.

Unfortunately that breaks my css which is styling an element in defs based on the id (using css for linearGradient stop-color. Yes, I am weird but there's a good reason for it).
A class might work better for my purposes, I think it will work

[pixeltherapy]

While I understand the benefits of the 'name-spacing' you're doing by changing ID names, I just want to add my actual use case where the defs are predefined in the injected SVG and the elements using these defs are inserted later via javascript.

This creates the same not-insurmountable problem as @tbredin which is perfectly fine in the context of Iconic but becomes a small issue in the wider use of SVGinjector. It might be a good idea to have the scope of IRI renaming revealed as an option in future versions if there's more than a few lone voices calling for it.

[yiotaz]

I have the exact same issue. I have a radialGradient with an id where it is targeted throughout the svg file as a fill attribute with this id. How can I make this work?

[yiotaz]

Can you please tell me if you have found a solution for this? How do I need to reconstruct my svg in order to work properly?

[pixeltherapy]

For those in need, you need to modify the JS source of SVGInjector to exclude certain defs included by default. Check the var iriElementsAndProperties on line 284 of svg-injector.js.

Modify it by commenting out what you don't want messed with, ensuring that your ID's are unique across your project, as I'm sure you already do. For example:

var iriElementsAndProperties = {
    'clipPath': ['clip-path'],
    'color-profile': ['color-profile'],
    'cursor': ['cursor'],
    'filter': ['filter'],
    // 'linearGradient': ['fill', 'stroke'],
    'marker': ['marker', 'marker-start', 'marker-mid', 'marker-end'],
    'mask': ['mask'],
    'pattern': ['fill', 'stroke']
    // 'radialGradient': ['fill', 'stroke']
};

[yiotaz]

Something else I need to ask you is this:

I have this
the fill has to locate the radialGradient definition in . In Firefox however this doesn't seem to work.
Is it possible that it fails due to multiple instances of the svg in the same page or do I need to look for something else?

In Chrome it works perfectly fine. Chrome is as if it takes into account each svg instance separately and searches the id in that one, thus we have the result we want, unlike Firefox.

Thank you

[pixeltherapy]

Yeah, FireFox is weird when it comes to SVG. Without the code you're using it's hard to identify the bug, but there are a few relatively common ones. StackOverflow is your friend here 😉

My own tips are:

• You should always avoid any duplicate id's for this reason, use whatever method you can to make them unique (JS/PHP etc.). This is something SVG Injector does anyway if you don't mess with it.
• Inline SVG vs. SVG as img/object/whatever behave remarkably differently and will mess with your mind. I tend to inline whenever possible and life is so much easier.

[yiotaz]

Thank you very much for your time and advice.

Much appreciate it :)

[parashram]

For those in need, you need to modify the JS source of SVGInjector to exclude certain defs included by default. Check the var iriElementsAndProperties on line 284 of svg-injector.js.

Modify it by commenting out what you don't want messed with, ensuring that your ID's are unique across your project, as I'm sure you already do. For example:

var iriElementsAndProperties = {
    'clipPath': ['clip-path'],
    'color-profile': ['color-profile'],
    'cursor': ['cursor'],
    'filter': ['filter'],
    // 'linearGradient': ['fill', 'stroke'],
    'marker': ['marker', 'marker-start', 'marker-mid', 'marker-end'],
    'mask': ['mask'],
    'pattern': ['fill', 'stroke']
    // 'radialGradient': ['fill', 'stroke']
};

I had issue in SVG loading by svg-injector ver 1.1.3. So, followed this solution but now SVG's colors aren't displaying correctly.
SVG Image don't load on when injector override defs id="a-1" color display correctly. and incorrect color displaying without injector override default id="a" while image load properly.
Can anyone suggest me the needful solution to avoid this issue?