Turns an SVG path d string into a spline curve — the way to reuse hand-drawn
or exported vector artwork (an Illustrator path, an icon outline, a logo) as a
3D path in the scene.
JavaScript API:
SVGSplineSource
This is the SVG-input member of the spline-source family: a spline-source
supplies the curve geometry for a AbstractSpline, so it lives as the
single geometry child of a sk-spline (or is built into a
sk-path-spline, which wraps this source behind a svg attribute).
Once hosted, the curve draws with a stroke paint, carries an
sk-align-to-spline-constraint, or seeds points and fields — like any
spline.
Key attributes. path is the SVG d string, in any path grammar the
browser parses (M/L/C/A/Z…). coordinate-space maps the 2D path into
3D by a signed axis token: x-y (the default) negates Y so Y-down SVG artwork
stands upright in Skenra's Y-up world; x-z lays the path flat in the ground
plane; xy keeps it hand-authored Y-up. normalize-scale rescales the path to
fit a [-n, n] box so exported artwork at pixel coordinates becomes
scene-sized (omit it to keep authored coordinates). anchor chooses which
point of the artwork lands on the node origin — a named preset (center,
top-left, …), normalized [x, y], or a specific content(x, y) point.
subpath-index selects which subpath to use when the d string holds several
(each M starts a new one), and flatness-tolerance trades curve smoothness
against vertex count when flattening. Finally, like every spline-source it carries
the family's distribution / distribution-count controls: a spline-source is
itself a points-source, so a sk-cloner given one places clones along the
curve, and these controls choose how the curve is sampled into those positions.
Related. It is one input modality of the spline-source family alongside
sk-points-spline-source (control points), sk-morph-spline-source
(blend two sources), sk-trail-spline-source (a moving node's wake), and
the GPU sources sk-compute-buffer-spline-source /
sk-custom-wgsl-spline-source. Its host is a sk-spline; the
built-in shortcut for SVG input is sk-path-spline.
Serve these docs to run the live example.
WebGPU needs a secure context — open this page via grunt serve
rather than double-clicking the file. The Markup tab works from disk.
<!-- One piece of two-subpath SVG artwork — a CURVED circle (subpath 0, cubic
béziers) then a TRIANGLE (subpath 1, straight lines) — used three ways so
every key attribute is visible:
• left (x-z, blue) — subpath-index="0", the round subpath, laid flat in
the ground plane. `flatness-tolerance="4"` is coarse,
so the "circle" flattens to a visibly faceted polygon.
• centre (x-y, amber) — the SAME artwork with subpath-index="1": a completely
different shape (the triangle), standing upright
(default Y-down→Y-up flip).
• right (x-y, red) — subpath-index="0" again, but anchor="top-left" pins
the artwork's top-left corner (not its centre) to the
node origin, so the ring sits offset from the others.
`normalize-scale="3"` rescales each selected subpath to a 3-unit box. -->
<sk-scene>
<sk-directional-light p="55deg" h="25deg" intensity="1.0"></sk-directional-light>
<sk-ambient-light intensity="0.45"></sk-ambient-light>
<sk-plain-material id="flat" base-color="#4f86c6"></sk-plain-material>
<sk-plain-material id="up" base-color="#e0b040"></sk-plain-material>
<sk-plain-material id="raw" base-color="#d1495b"></sk-plain-material>
<!-- Curved subpath 0, flat in the ground plane, coarse flatness → faceted. -->
<sk-spline x="-4">
<sk-svg-spline-source coordinate-space="x-z" normalize-scale="3"
subpath-index="0" flatness-tolerance="4"
path="M 26,0 C 26,14 14,26 0,26 C -14,26 -26,14 -26,0 C -26,-14 -14,-26 0,-26 C 14,-26 26,-14 26,0 Z M 0,-22 L 19,13 L -19,13 Z">
</sk-svg-spline-source>
<sk-stroke-paint material="#flat" width="1.5"></sk-stroke-paint>
</sk-spline>
<!-- Triangle subpath 1 (a different shape entirely), upright (x-y). -->
<sk-spline>
<sk-svg-spline-source coordinate-space="x-y" normalize-scale="3" subpath-index="1"
path="M 26,0 C 26,14 14,26 0,26 C -14,26 -26,14 -26,0 C -26,-14 -14,-26 0,-26 C 14,-26 26,-14 26,0 Z M 0,-22 L 19,13 L -19,13 Z">
</sk-svg-spline-source>
<sk-stroke-paint material="#up" width="1.5"></sk-stroke-paint>
</sk-spline>
<!-- Curved subpath 0 again, anchored top-left instead of centred (anchor shifts it). -->
<sk-spline x="4">
<sk-svg-spline-source coordinate-space="x-y" normalize-scale="3"
subpath-index="0" anchor="top-left"
path="M 26,0 C 26,14 14,26 0,26 C -14,26 -26,14 -26,0 C -26,-14 -14,-26 0,-26 C 14,-26 26,-14 26,0 Z M 0,-22 L 19,13 L -19,13 Z">
</sk-svg-spline-source>
<sk-stroke-paint material="#raw" width="1.5"></sk-stroke-paint>
</sk-spline>
</sk-scene>| Attribute | Type | Default | Description |
|---|---|---|---|
pathrequired |
<string> |
— | The SVG path d string — matches the declarative path attribute. |
coordinate-space |
<coordinate-space> |
— | The coordinate space for mapping path data into 3D space — a signed |
anchor |
<content-anchor> (<anchor>) |
— | Anchor point determining which point in the SVG content maps to the spline node's origin. |
normalize-scale |
<normalize-scale> (<number> | |
— | The single normalization control. |
flatness-tolerance |
<number> |
— | Tolerance for flattening curves into line segments. |
subpath-index |
<number> |
— | Selected subpath index. Only the selected subpath is used. |
distribution |
<spline-distribution> ("control-points" | "tessellated" | "arc-length-spaced") |
— | — |
distribution-count |
<number> |
— | — |
Used in guides: Scene basics