@svgin/element

<svg-in> is a real, vanilla Custom Element (no Lit, no Stencil) built on the same fetch/sanitize/cache internals as <SvgIn />. It works in any framework, or none - every demo below is just plain HTML attributes and a CustomEvent listener, not a React wrapper component.

Using React? @svgin/react gives you the same sanitize-by-default loading as real React components.

Try it live

Basic
Vanilla JS
<svg-in src="..."> fetching and rendering a real SVG, no React wrapper, plus the svg-in-load event.
Open demo →
Raw markup
Vanilla JS
The svg attribute rendering markup you already have directly, sanitized, with no fetch at all.
Open demo →
Lazy loading
Vanilla JS
loading="lazy" deferring fetch/sanitize until the element scrolls near the viewport, via IntersectionObserver.
Open demo →
Inspector
Vanilla JS
disable-sanitization compared side by side: a malicious payload stripped by default, or rendered raw when opted out.
Open demo →
Events
Vanilla JS
A failing src dispatching svg-in-error instead of throwing - no React error boundary involved.
Open demo →