Skip to main content

xsvg

eXtensible SVG

Author a superset of SVG — plain XML with a handful of x: extensions — that compiles to a plain, static SVG file. The text layout, diagrams, and mesh gradients SVG never shipped.

npm install @visioncortex/xsvg-viewer

You author this…

<x:pie cx="60" cy="60" r="50">
<x:slice value="40"/>
<x:slice value="60" fill="#0ea5e9"/>
</x:pie>

…and get plain SVG

<path d="M60,10 A50,50 0 0 1 …Z" fill="#6366f1"/>
<path d="M60,60 L60,10 A50,50 …Z" fill="#0ea5e9"/>

The x: tags live in their own XML namespace, so a viewer that doesn't understand them simply skips them — the file never breaks. You compile when you want the effects baked in.

Every extension lowers to plain SVG

Text layout SVG never had

Greedy wrapping, full justification, shrink-to-fit, and the party trick — flowing text inside any shape’s outline, not just a rectangle. Laid out from real font metrics.

Learn more →

Type on a path & envelope warps

Ride text along any curve — a live native textPath, or glyphs deformed with skew and ribbon. Bend whole shapes and outlined text through arch, flag, rise, fisheye, and perspective fields.

Learn more →

Mesh gradients, baked

Corner colours on curved Coons patches — the smooth multi-focal blends no linear or radial gradient can express. SVG 2 specified them; no browser draws them. xsvg bakes them to a tiny texel-aligned PNG.

Learn more →

Diagrams that re-route themselves

Connectors route between two elements’ edges — as an orthogonal H–V–H rail or a smooth curve — and re-derive when a box moves. With boolean path algebra and Minkowski offsets, the diagram primitives SVG lacks.

Learn more →

Data visualization

A data-coordinate frame: plot maps a domain onto a pixel box for bars and lines; pie turns a value into an angle with explode, donut, and polar-area. Paired with content-driven tables — all baked to plain shapes, no chart runtime.

Learn more →