Scripting
Documentation
Changelog
Privacy
Documentation
Changelog
Privacy

SVG

The SVG component is used to display SVG (Scalable Vector Graphics) images. It supports loading SVG content from the following sources:

  • A remote URL
  • A local file path
  • Inline SVG code

SVGs are rendered as bitmap images. You can choose to render them in template mode to apply tint colors using foregroundColor.

Import

1import { SVG } from 'scripting'

Props

Image Source (choose exactly one)

Prop Type Description
url string | DynamicImageSource<string> Displays an SVG from a network URL
filePath string | DynamicImageSource<string> Displays an SVG from a local file path
code string | DynamicImageSource<string> Displays an SVG from inline SVG code

These three props are mutually exclusive — only one should be provided.

Rendering Behavior (ImageRenderingBehaviorProps)

Prop Type Default Description
resizable boolean | object false Controls whether the image resizes to fit its frame (see below)
renderingMode 'original' | 'template' 'original' Use "template" to allow tinting via foregroundColor
interpolation 'none' | 'low' | 'medium' | 'high' 'medium' Sets interpolation quality when scaling the image
antialiased boolean false Whether the image should use anti-aliasing
widgetAccentedRenderingMode WidgetAccentedRenderingMode (Widget-only) — Defines how the image renders in Widget accented mode

resizable Prop Details

Type Meaning
true Image resizes to fit its container (stretch)
false Image maintains original size
{ capInsets, resizingMode } Allows defining cap insets and resizing mode (for 9-patch or tiled images)

Examples

Display SVG from a local file (template mode with tint)

1<SVG
2  filePath="/path/to/local/image.svg"
3  resizable
4  frame={{ width: 50, height: 50 }}
5  renderingMode="template"
6  foregroundColor="red"
7/>

Display SVG from inline code

1<SVG
2  code={`<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
3    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
4  </svg>`}
5  frame={{ width: 100, height: 100 }}
6/>

Notes

  • SVGs are now rendered as bitmap images only.
  • The vectorDrawing prop has been removed and is no longer supported.
  • To apply tinting, use renderingMode="template" along with foregroundColor.
  • Only one of url, filePath, or code may be specified at a time.
Outline