08 / 11
Mount compiled SVG in any framework
Compile once on the server, then hand the trusted SVG string to React, Vue, Angular, or Svelte.
01 / Host
Keep compilation outside the component
Compile before the component renders. The component only receives the resulting SVG string.
| Framework | Trusted HTML boundary |
|---|---|
| React | dangerouslySetInnerHTML={{ __html: svg }} |
| Vue | v-html="svg" |
| Angular | A reviewed SafeHtml value |
| Svelte | {@html svg} |
Only pass output produced by Schemd through that boundary. Do not use it for arbitrary user-supplied HTML.
If the page is interactive, attach one delegated listener to the host. Clean it up when the component unmounts. The SVG itself stays framework-agnostic.