Function inlineSvg

inlineSvg(
node: SVGElement,
options: string | InlineSvgOptions,
): ActionReturn<string | InlineSvgOptions>
Svelte action for dynamically inlining remote SVG into the DOM using fetch.

⚠ SECURITY WARNING - XSS RISK

This action does NOT sanitize the fetched SVG or remote file. Inline SVG is treated like live DOM and can execute scripts. Untrusted SVG can lead to full cross-site scripting (XSS).

Common attack vectors include:
```
  - <script> elements
  - Event handler attributes: onclick, onload, onmouseover, etc.
  - javascript: URLs inside href, xlink:href, style, gradients, filters
  - <foreignObject> allowing embedded HTML + JS execution
  - External references (remote images, fonts, scripts)
```
IMPORTANT: Remote SVG should be considered the same as remote HTML. If you inline untrusted content, you may be executing attacker code.

You MUST sanitize SVG content before injecting it into the DOM. Sanitization can be done:
```
(1) Server-side, OR
(2) In the `transform` function using a trusted sanitizer.
```
For client-side sanitization, DOMPurify is strongly recommended: https://github.com/cure53/DOMPurify

Additional references on SVG security and XSS vulnerabilities:
- MDN - Security considerations for XSS: https://developer.mozilla.org/en-US/docs/Web/Security/Attacks/XSS
- OWASP XSS Filter Evasion / SVG Risk Overview: https://owasp.org/www-community/xss-filter-evasion-cheatsheet
FAILURE TO SANITIZE SVG MAY RESULT IN REMOTE CODE EXECUTION.
Parameters
- node: SVGElement
  SVGElement to inline SVG into.
- options: string | InlineSvgOptions
  A string for src / SVG remote URI or a complete options object.
Returns ActionReturn<string | InlineSvgOptions>
Action lifecycle functions.
Example
Basic usage:
```
<script>
  import { inlineSvg } from '#runtime/svelte/action/inline-svg';
</script>

<svg use:inlineSvg={'http://example.com/icon.svg'}></svg>
```
Example
An example using the transform function with DOMPurify:
```
<script>
  import { inlineSvg } from '#runtime/svelte/action/inline-svg';
  import DOMPurify from 'dompurify';

  const config = {
    src: 'https://example.com/icon.svg',
    transform: (remoteData) => {
      // Sanitize untrusted SVG before injecting into the DOM.
      // Without sanitization, malicious SVG can execute script code.
      return DOMPurify.sanitize(remoteData, { USE_PROFILES: { svg: true } });
    }
  };
</script>


<svg use:inlineSvg={config}></svg>
```
See
DOMPurify

Function inlineSvg

⚠ SECURITY WARNING - XSS RISK

Parameters

Returns ActionReturn<string | InlineSvgOptions>

Example

Example

See

Settings

On This Page