PSVG - Programmable SVG

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
`

By including the script, all the elements on the webpage will be compiled to when the page loads. Again, don't include PSVG files that you don't trust.

$3

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.