svg2p5

Convert SVG markup to p5.js canvas

svg2p5 is a converter that takes in SVG markup in the form of a <svg> tag or a <path> tag and outputs equivalent p5.js canvas code.

Support

✅ Supported SVG Markup	❌ Unsupported SVG Markup (yet)
`<path>`	`<circle>`
`stroke=""`	`<rect>`
`fill=""`	`<linearGradient>`
`strokeCap=""`	`<text>`
`strokeJoin=""`	etc.

Known Issues

Generally, the output may be imperfect and require some manual cleaning.

Sometimes the last vertex connects to the first vertex.
Sometimes you will find lonely vertex()s and bezierVertex()s that you will need to wrap with beginShape() and endShape() in order to see.

Short-Term To-Do List

Error prevention through linting SVG markup for unsupported attributes, notifying user and disabling conversion if that is the case.
MacOS Classic style active states for windows.
Update canvg.js to current version instead of using the ancient one that came with Professor Cloud.

Long-Term Objective

Make svg2p5 support all SVG attributes that have p5.js equivalents. That includes shadows, text, gradients, native shapes, etc.

Credits

Algorithm Based on Professor Cloud SVG to HTML5 converter, which in turn uses canvg.js!
Interface MacOS Classic System 3.
Colophon Chicago by Susan Kare, Roboto and Roboto Mono by Christian Robertson
I 💖 P5.JS