element id overlap

[c-ding-math]

Consider the following two svg:

<svg>
    <defs>
        <g id="myCircle">
            <circle cx="50" cy="50" r="50"/>
        </g>
    </defs>
    <use xlink:href="#myCircle" x="200" y="200" style="fill:blue;"/>
</svg>

<svg>
    <defs>
        <g id="myCircle">
            <circle cx="25" cy="25" r="25"/>
        </g>
    </defs>
    <use xlink:href="#myCircle" x="200" y="200" style="fill:blue;"/>
</svg>

If we put them in one document, the second svg won't display correctly, because there are two g elements with the same id. Could you consider adding an option that allow people to add a prefix to the id attribute in a svg?

[mgieseki]

There's already a similar feature request (#234). It's on my list but not of very high priority because you can post-process the SVG files and replace the IDs with your own ones or just prefix them, e.g. with a short Python script or sed.
A proper implementation in dvisvgm is not that easy and requires quite a few changes. So, I'm afraid, this won't be implemented in the next few releases.

[jvsteiner]

Understood, and will look for some alternate options, but just for the record, and to make sure I am following this issue, I will mention that I also have this issue.

[jvsteiner]

in case anyone is using typescript for this kind of thing, here is a function I have found to work:

addRandomPrefixToIds(svgStr: string) {
	function generateRandomPrefix() {
		let letters = "abcdefghijklmnopqrstuvwxyz";
		letters += letters.toUpperCase();
		let prefix = "";
		for (let i = 0; i < 4; i++) {
			prefix += letters[Math.floor(Math.random() * letters.length)];
		}
		return prefix;
	}

	// Generate a random 4-letter prefix
	const randomPrefix = generateRandomPrefix();

	// Replace the id substrings
	let updatedSvgStr = svgStr
		.toString()
		.replace(/xlink:href='#g/g, `xlink:href='#g${randomPrefix}`);

	updatedSvgStr = updatedSvgStr
		.toString()
		.replace(/<path id='g/g, `<path id='g${randomPrefix}`);

	return updatedSvgStr;
}