@svgin/element: API reference
Every DOM attribute on <svg-in> is a string; see below for how each is read/coerced. Changing src/svg/disable-sanitization restarts the fetch/sanitize cycle; changing a purely presentational attribute just re-renders the already-resolved result.
Attributes
| Attribute | Notes |
|---|---|
| src | URL to fetch. Ignored if svg is also present. |
| svg | Raw SVG markup already in hand - sanitized and rendered directly, skipping the fetch step. Takes precedence over src. |
| width / height / fill | Forwarded verbatim (as strings) to the rendered <svg>, both for the loading placeholder and the resolved result. |
| class | Applies to the <svg-in> host as usual, and is additionally forwarded onto the rendered inner <svg>. |
| aria-label | Forwarded to the rendered <svg>. Disables the auto-wired aria-labelledby otherwise set when svg-title is present. |
| svg-title / svg-description | Injects a <title>/<desc> into the rendered SVG (accessible name/description). |
| disable-sanitization | Boolean attribute (presence, not value). Skips DOMPurify entirely - only for markup you already trust. |
| loading | 'eager' (default) or 'lazy'. 'lazy' defers fetch/sanitize until the element scrolls near the viewport, via IntersectionObserver. |
sanitizeFn / fetchOptions
JS properties, not attributes - a function or an arbitrary request-init object has no meaningful string attribute representation. Setting either while the element is connected restarts the fetch/sanitize cycle, same as changing src.
document.querySelector('svg-in').sanitizeFn = async (svg) => svg;
document.querySelector('svg-in').fetchOptions = { headers: { Authorization: 'Bearer ...' } };Events
No onError/onMount callback props - a plain custom element has no prop channel. Instead, <svg-in> dispatches two bubbling, composed CustomEvents: svg-in-load (detail: { svg: SVGSVGElement }) and svg-in-error (detail: { error: Error }). See it live at /element.
const el = document.querySelector('svg-in');
el.addEventListener('svg-in-load', (e) => console.log('loaded', e.detail.svg));
el.addEventListener('svg-in-error', (e) => console.error('failed', e.detail.error));