Multiple svg with same IDs

Question

Can i put multiple svgs in a html page and use the same IDs in all of them?

<div>
  <svg height="0" width="0">
    <clipPath id="svgPath"> ........        
  </svg>
  <svg height="0" width="0">
    <clipPath id="svgPath"> ........        
  </svg>
  <svg height="0" width="0">
    <clipPath id="svgPath"> ........        
  </svg>
</div>

Answer 1

Since the specs define the id attribute as unique per document, you should refactor the IDs or use an alternative, e.g. embedding via img or object tag.

<img src="my.svg" height="100" alt="alternative Text">

<object type="image/svg+xml" data="my.svg" width="100" height="100"></object>

Answer 2

If you need the SVGs to be inline you should consider using an SVG injector, which changes the IDs to unique strings when inserting the SVGs into the HTML document

SVGInject adds a random string to the end of the ID for elements defined in the <defs> section. For example, svgPath may become something like svgPath-Dcs83KsE. Other SVG injectors add a running number to the ID.

Both methods were developed so the same SVG can be injected multiple times into a HTML document without creating an ID conflict. But of course it also works for different SVGs with conflicting IDs.