Menu
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>
922
An id on an <svg> tag assigns an identifier to the svg element. The identifier must be unique across the page.
Yes. What is the issue your having? @JeremyA. West Added XML version, encoding, and SVG Doctype for the external file.
At the end of the day, Vue uses dynamic HTML templating, meaning the most straightforward way to use SVG with Vue is exactly how you might do it with standard HTML: By placing the <svg> inline. By using an <img> tag that links to an external SVG file with the src attribute.
What is an SVG file? Scalable Vector Graphics (SVG) is a web-friendly vector file format. As opposed to pixel-based raster files like JPEGs, vector files store images via mathematical formulas based on points and lines on a grid.
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>
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.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
