#<svg> XElement

<svg> is the cornerstone element for embedding Scalable Vector Graphics (SVG) directly within your markup. It lets you create crisp, resolution-independent graphics, from simple icons to complex data visualizations, that scale flawlessly across every screen size and pixel density.

Lynx SVG is designed for performant static rendering. Instead of creating individual element nodes on the main thread for each SVG tag, it offloads parsing to a background thread and renders the entire graphic as a single native view, reducing both main-thread parsing time and element node count. It covers 17 commonly used SVG tags and over 40 attributes, sufficient for the vast majority of real-world SVG assets.

#Usage

#Basic

Below is a basic usage example of the <svg> element:

svgsrc/base/index.tsx

Code

Preview

#Supported SVG Tags

The following SVG tags are fully supported:

#Supported SVG Attributes

The following attributes can be applied to the above tags:

#Attributes

#content

content?: string;

SVG XML content

#src

src?: string;

SVG resource URL

#Events

Frontend can bind corresponding event callbacks to listen for runtime behaviors of the element, as shown below.

#bindload

bindload = (e: BaseEvent) => {};

SVG Loaded

#Compatibility