StaticelementOptionalel: ElementStaticparseHelper: Parse float attribute with fallback
Optionalfallback: numberStaticparseStaticparseStaticparseStaticparseThe valid SVG string to parse
An array of parsed SVG element(s)
const svgString = `<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="red" stroke="black" stroke-width="2" />
<path d="M10 10 H 90 V 90 H 10 L 10 10" fill="none" stroke="blue" stroke-width="1.5" />
</svg>`;
const elements = this.parse(svgString);
console.log(elements);
// Output:
[
{
type: 'circle',
cx: 50,
cy: 50,
r: 40,
fill: [1, 0, 0, 1],
stroke: [0, 0, 0, 1],
strokeWidth: 2
},
{
type: 'path',
d: 'M10 10 H 90 V 90 H 10 L 10 10',
fill: undefined,
stroke: [0, 0, 1, 1],
strokeWidth: 1.5
}
]
StaticparseParses an SVG string and preserves root-level document metadata used by
the renderer, especially viewBox, width, and height.
The SVG Parser class.
Use the
this.parse()method to convert an SVG string into an array of SVG elements.This parser supports basic SVG shapes like paths, circles, ellipses, rectangles, polygons, polylines, lines, and text. It handles attributes like
fill,stroke,stroke-width, and coordinates, ensuring they are valid and fall within expected ranges. It also supports nested groups (<g>elements) and parses their children recursively.