2 fragments using the same name but from 2 different files conflicts

[Xample]

<div [inlineSVG]="'assets/icons/thermometer/thick.svg#arrival'" [cacheSVG]="false"></div>
<div [inlineSVG]="'assets/icons/thermometer/thin.svg#arrival'" [cacheSVG]="false"></div>

Renders

while inverting those lines

<div [inlineSVG]="'./thin.svg#arrival'" [cacheSVG]="false"></div>
<div [inlineSVG]="'./thick.svg#arrival'" [cacheSVG]="false"></div>

gives:

despite the cache to be disabled, the first object will be reused by the second one

SVGs.zip

[cyphercodes96]

might it be because of the #arrival symbol? although as i noticed the svg images have different names, they are being symbolized by the same unique chars

[Xample]

It could be 2 times #departure the result will be the same. I suspect some cache to use the fragment name as the key.

[arkon]

This is indeed because of the same IDs, which this directive doesn't try to distinguish between. It'll use whichever instance of the ID shows up first on the page (since they're injected directly into the DOM).

Ideally, the symbol IDs would be different.

[Xample]

@arkon sometimes we do not choose the name of the fragment. The namespace should be the file path (url) which will be unique per svg file, not the fragment (symbol) name

[arkon]

Under the hood, it's just using the regular <use> tag, so the file path has no real relevance.

I could randomize the IDs after, but that may cause some confusion with styling.

EDIT: this is a side effect of https://github.com/arkon/ng-inline-svg/commit/95c7a2f6096eb529971ad69dd8d4a5f736a81d2b

[fatpandaria]

why setting [cacheSVG]="false" doesn't work? What's the expected behavior? I also ran into the same issue with some common ids among my svgs and wrong cache rendered.

[arkon]

The cache is irrelevant to how things are rendered. Still not entirely sure how this should be solved.

[arkon]

From #114:

The svg injector should support the prevention of id conflicts. It is common usage of the module to include svgs from multiple sources. The usage of svgs from different sources creates the risk of colliding ids inside the svg elements.

For example SVGInject makes all IDs inside the svg unique, before they are injected into the HTML.

I stumbled across this problem while using different svgs, which had a clipPath definition with the same id. The latter svg therefore wasn't displayed.