svg2p5
svg2p5 copied to clipboard
Published
20 hours ago •
ygev
ygev
Convert SVG to p5.js canvas.
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 andbezierVertex()s that you will need to wrap withbeginShape()andendShape()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.
- [x] 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
ygev