https://github.com/boringdeveloper/p5js-to-svg
https://github.com/boringdeveloper/p5js-to-svg
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/boringdeveloper/p5js-to-svg
- Owner: boringdeveloper
- Created: 2023-04-15T17:07:10.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-04-15T17:14:03.000Z (about 2 years ago)
- Last Synced: 2025-03-27T15:55:56.078Z (3 months ago)
- Size: 1000 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# p5js-to-svg
Use p5.js-svg library to convert the p5js element to svg. Add this in the `` tag of your index.html
```html
```
Create a button to save the svg file.
```html
Save SVG
```
In your sketch.js file, add this function.
```js
function downloadSvg() {
noLoop();
let svgElement = document.getElementsByTagName('svg')[0];
let svg = svgElement.outerHTML;
let file = new Blob([svg], { type: 'plain/text' });
let a = document.createElement("a"), url = URL.createObjectURL(file);
a.href = url;
a.download = 'exported.svg';
document.body.appendChild(a);
a.click();
setTimeout(function()
{
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, 0);
}
```
In the `createCanvas()` function, add the `SVG` parameter.
```js
createCanvas(1080, 1080, SVG);
```