SVG

svg extrudes vector paths into 3D geometry.

Use it when the source of truth should remain vector artwork rather than a polygon model.

When to use it

Use svg when:

the asset already exists as SVG
the artwork is logo-like, icon-like, or path-driven
you want depth and lighting without rebuilding the asset as a 3D model
the DOM or URL source should stay easy to swap

Input sources

StringTune-3D supports two common sources:

inline <svg> inside the host element
external source through data-svg-src

Runtime contract

Activation

HTML

<div string="3d" string-3d="svg"></div>

Key CSS variables

Variable	Default	Effect
`--svg-depth`	`10`	Extrusion depth
`--svg-curve-segments`	`12`	Curve detail
`--svg-bevel-size`	`0`	Bevel size
`--svg-bevel-thickness`	`0`	Bevel thickness
`--svg-bevel-offset`	`0`	Bevel offset
`--svg-bevel-steps`	`3`	Bevel segments
`--svg-morph-duration`	`600`	Morph timing

Like other visible object types, svg also uses the shared transform and material surface.

Example

HTML

<div
  string="3d"
  string-3d="svg"
  data-svg-src="/icons/logo.svg"
  style="
    width: 220px;
    height: 220px;
    --svg-depth: 14;
    --rotate-y: 16;
  "
></div>

What the runtime does

Inline SVG is parsed from the current DOM.
External SVG is fetched and cached by source URL.
Paths are converted into extrudable geometry and rebuilt when the SVG source changes.
Morph timing is controlled through the SVG-specific CSS duration variable rather than a separate JS animation API.

Reach for svg when the artwork is still fundamentally vector. Reach for model when the asset is already authored as 3D geometry. That split tends to keep both the asset pipeline and the docs clearer.