Programmable Scalable Vector Graphics -- drawings that draw themselves
npm install @lingdong/psvg
Doc | Playground | Examples | NPM
PSVG is an extension of the SVG (Scalable Vector Graphics) format that introduces programming language features like functions, control flows, and variables -- Instead of writing a program that draws a picture, write a picture that draws itself!
PSVG is compliant with XML and HTML specs, so it can be easily embedded in a webpage or edited with an XML editor.
This repo contains a PSVG→SVG complier that transforms PSVG files to just regular SVG's. It can also automatically render all PSVG's on an HTML page when included as a .
> Note: Experimental and under development, currently the compiler is not very friendly and might misbehave at times; Contributions/Issues welcome.
For example, define a recursive function that draws the Sierpiński's triangle:
``xml
`
Which looks like this (after running it through the PSVG to SVG complier):

Since PSVG is a superset of SVG, all the elements in SVG are also in PSVG, and all of them are programmable. For example, you can use a for loop to generate a bunch of gradients whose stops are determined by a function of the index.
`xml
`
Which will generate gradients with ids grad0, grad1, grad2, ... To use, simply write:
`xml`
The above is a simplified excerpt from examples/pythagoras.psvg, which utilizes this "gradient of gradient" to colorize a tree:

To transform shapes in vanilla SVG, the "group" metaphor () is often used. In addition to groups, PSVG also introduces Processing/p5.js-like pushMatrix() popMatrix() metaphors. For example, from the same examples/pythagoras.psvg as above, the tag combined with are used to draw a fractal tree:
`xml
`
You can have your own pick of degree or radians: or are the same. You can also use to scale subsequent drawings.
Similarly, styling can also be written as commands to effect subsequent draw calls:
`xml
`
In addition to simple fractals shown above, PSVG is also capable of implementing complex algorithms, as it's a full programming language. For example, an implementation of Poisson disk sampling described in this paper, examples/poisson.psvg:

A baseline PSVG to SVG complier is included in this repo. It is a very "quick-and-dirty" implementation that eval()s transpiled JavaScript. So for now, don't compile files you don't trust!
Install it globally via npm
npm i -g @lingdong/psvg
and use it with:
``
psvg input.svg > output.svg
For example, to compile the hilbert curve example in this repo:
``
psvg examples/hilbert.psvg > examples/hibert.svg
or try it without installing via npx (comes together with npm)
``
npx -s @lingdong/psvg input.svg > output.svg
PSVG is also available for browser via CDN, or directly download
`html`
By including the script, all the elements on the webpage will be compiled to
Install locally in your project via npm
``
npm i @lingdong/psvg
`js
import { compilePSVG } from "@lingdong/psvg"
console.log(compilePSVG("
`
Or
`js
const { compilePSVG } = require("@lingdong/psvg")
console.log(compilePSVG("
`
Additionally, parsePSVG() transpilePSVG() and evalPSVG() which are individual steps of compilation are also exported.
In browsers, functions are exported under the global variable PSVG`.
Check out QUICKSTART.md for a quick introduction to the PSVG language.