Home/ Questions/Q 7940229
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T23:19:42+00:00

SVGs inserted into a document using javascript look like gibberish because they have symbols

  • 0

SVGs inserted into a document using javascript look like gibberish because they have symbols with conflicting IDs inside them. For instance, these two different svg files

http://filebin.ca/1LMtJr5zc2x/svg1.svg

http://filebin.ca/1LN9F5ZPIbH/svg2.svg

When inserted into a document with javascript*, one of them looks wrong (in my case the a’s turned into x’s). If you open the SVG files with a text editor you’ll see they both have a line like this

<symbol overflow="visible" id="glyph0-0">

So I’m guessing the browser sees the second svg reference “glyph0-0” and uses the one defined by the first svg. Is there some way to tell the browser “symbols defined inside an <svg> only matter there”? Like restricting the scope of symbols.

<img> tags which point to those two files don’t have this problem. However I’m not using that solution because then the server would have to keep a bunch of files around and keep track of when they can be thrown away. With my current solution the browser has the SVGs in memory and they’re gone when the window closes.

*with XMLHttpRequest, I fetch a dynamically-generated SVG file, clone the root <svg> tag and append it to the document.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    IDs are always global to a document, and non-unique IDs are considered invalid according to the HTML spec. If you require two symbols to have the same id, try using “class” instead of “id”. You could also do some regex pre-processing of the SVG string to adjust the IDs so they’re unique.

    • 0