When SVGs are inserted into a document using javascript, they may appear as gibberish due to conflicting IDs within them. For example, consider these two distinct svg files:
Upon insertion into the document using javascript*, one of them may display incorrectly (such as 'a's turning into 'x's). Examination of the SVG files in a text editor reveals a line like this in both files:
<symbol overflow="visible" id="glyph0-0">
It seems that the browser interprets the second SVG reference "glyph0-0" and uses the one defined in the first SVG. Is there a method to instruct the browser to limit the scope of symbols to their individual <svg> elements?
<img> tags linking to these files do not experience this issue. However, this solution is not preferred as it requires the server to maintain multiple files and manage their disposal. With the current solution, the browser holds the SVGs in memory temporarily, disposing of them when the window closes.
*Using XMLHttpRequest, I fetch a dynamically-generated SVG file, duplicate the root <svg> tag, and append it to the document.