The exported svg has the same className, resulting in style overwriting

[Sayi]

When I use d2 to generate svg, the svg string always has the same class:

<svg id="d2-svg" class="d2-1016141690"

When I display multiple svgs on the same html page, the styles will interfere with each other.

How can I specify that each svg generates a unique class?

Thanks.

[Sayi]

Some styles defined in svg will also be messed up and seem to be not isolated:

.light-code {
display: none
}

.dark-code {
display: block
}

and the html page like this:

<svg id="d2-svg" ...
<svg id="d2-svg" ...
<svg id="d2-svg" ...
<svg id="d2-svg" ...
<svg id="d2-svg" ...

[Sayi]

use <img src="11.svg"/> will ok, but use svg will failed~~

[alixander]

@Sayi

<svg id="d2-svg" class="d2-1016141690"

The d2-xxxx should be a unique hash based on some markers of the diagram. So only the same two diagrams will use the same class, which overwriting css is fine. Are you seeing a case where two different diagrams have the same hash? If so, that is a bug and I'd love to see what produced it

[stereobooster]

So only the same two diagrams will use the same class, which overwriting css is fine. Are you seeing a case where two different diagrams have the same hash? If so, that is a bug and I'd love to see what produced it

dark and light version of the same diagram. Example here at the bottom https://beoe.stereobooster.com/start-here/dark-scheme/