https://github.com/ygev/svg2p5
Convert SVG to p5.js canvas.
https://github.com/ygev/svg2p5
p5js svg svg-converter svg-path
Last synced: 5 months ago
JSON representation
Convert SVG to p5.js canvas.
- Host: GitHub
- URL: https://github.com/ygev/svg2p5
- Owner: ygev
- Created: 2021-03-20T22:46:47.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-06-14T05:57:44.000Z (over 4 years ago)
- Last Synced: 2025-05-07T04:57:55.987Z (5 months ago)
- Topics: p5js, svg, svg-converter, svg-path
- Language: JavaScript
- Homepage: https://svg2p5.com
- Size: 655 KB
- Stars: 26
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
svg2p5
Convert SVG markup to p5.js canvas
svg2p5 is a converter that takes in SVG markup in the form of a `` tag or a `` tag and outputs equivalent [p5.js](https://p5js.org/) canvas code.
### Support
|✅ Supported SVG Markup | ❌ Unsupported SVG Markup (yet) |
|---|---|
| `` | `` |
| `stroke=""` | `` |
| `fill=""` | `` |
| `strokeCap=""` | `` |
| `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.
- [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](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute) that have p5.js equivalents. That includes shadows, text, gradients, native shapes, etc.
### Credits
- **Algorithm** Based on [Professor Cloud](https://www.professorcloud.com/svg-to-canvas/) SVG to HTML5 converter, which in turn uses [canvg.js](https://github.com/canvg/canvg)!
- **Interface** MacOS Classic System 3.
- **Colophon** [Chicago](https://fontsarena.com/chicago-flf-by-susan-kare-robin-casady/) by Susan Kare, [Roboto](https://fonts.google.com/specimen/Roboto) and [Roboto Mono](https://fonts.google.com/specimen/Roboto+Mono) by Christian Robertson
- **I 💖 [P5.JS](https://p5js.org/)**