Light DOM: clipPath ID collision issue

Shadow DOM: isolated SVG with <svg-isolate>

The following SVG elements (circle.svg, triangle.svg, hexagon.svg, heart.svg) all use the same clipPath id (id="clipPath"), which causes conflicts in the Light DOM when multiple instances are rendered on the same page.

By wrapping them with <svg-isolate>, each SVG is rendered inside its own Shadow DOM, preventing ID and class collisions and ensuring complete style and definition isolation.