<svg>
<svg> is the cornerstone element for embedding Scalable Vector Graphics (SVG) directly within your markup. It empowers you to craft crisp, resolution-independent illustrations—ranging from simple icons to complex data visualizations—that scale flawlessly across every screen size and pixel density without loss of quality.
Usage
Basic
Below is a basic usage example of the <svg> element:
Supported SVG Tags
The following SVG tags are fully supported:
| Tag | Description |
|---|---|
| circle | Defines a circle. |
| clipPath | Defines a clipping path. |
| defs | Container for definitions that can be reused. |
| text | Defines a text element. |
| ellipse | Defines an ellipse. |
| g | Groups elements together. |
| image | Embeds raster images. |
| line | Defines a straight line. |
| linearGradient | Defines a linear gradient. |
| path | Defines a path. |
| polygon | Defines a closed shape with straight sides. |
| polyline | Defines a series of connected straight lines. |
| radialGradient | Defines a radial gradient. |
| rect | Defines a rectangle. |
| stop | Defines a gradient stop. |
| svg | Root SVG element. |
| use | References and reuses shapes defined elsewhere. |
Supported SVG Attributes
The following attributes can be applied to the above tags:
| Attribute | Description |
|---|---|
| xlink:href | Reference to a resource (deprecated, prefer href). |
| style | Inline CSS styling. |
| points | List of points for polygon/polyline. |
| offset | Gradient stop offset. |
| font-size | Text font size. |
| id | Unique identifier. |
| xmlns | XML namespace. |
| clip-path | Clipping path reference. |
| clip-rule | Clipping rule for fill vs. stroke. |
| clipPathUnits | Units for clipPath. |
| color | Foreground color. |
| cx, cy | Center coordinates for circles/ellipses. |
| d | Path data. |
| fill | Fill color/paint. |
| fill-opacity | Fill transparency. |
| fill-rule | Fill rule for intersecting paths. |
| fx, fy | Focal point for radial gradients. |
| gradientTransform | Transform matrix for gradients. |
| gradientUnits | Coordinate system for gradients. |
| height, width | Dimensions. |
| href | Hyperlink reference (modern replacement for xlink:href). |
| opacity | Overall transparency. |
| preserveAspectRatio | Aspect ratio behavior on scaling. |
| r | Radius for circles. |
| rx, ry | Corner radii for rounded rectangles. |
| spreadMethod | How gradient fills beyond defined range. |
| stop-color | Gradient stop color. |
| stop-opacity | Gradient stop transparency. |
| stroke | Stroke color/paint. |
| stroke-dasharray | Dash pattern for strokes. |
| stroke-dashoffset | Offset for dash pattern. |
| stroke-linecap | Shape at the end of open subpaths. |
| stroke-linejoin | Shape at path corners. |
| stroke-miterlimit | Limit for miter joins. |
| stroke-opacity | Stroke transparency. |
| stroke-width | Stroke thickness. |
| transform | Transformation matrix. |
| viewBox | Coordinate system and aspect ratio. |
| x, y | Position coordinates. |
| x1, y1, x2, y2 | Line endpoints. |
Attributes
content
Android
iOS
Clay
Harmony
SVG XML content
src
Android
iOS
Clay
Harmony
SVG resource URL
Events
Frontend can bind corresponding event callbacks to listen for runtime behaviors of the element, as shown below.
bindload
Android
iOS
Clay
Harmony
SVG Loaded
Compatibility
LCD tables only load in the browser
Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.