Add first class support for SVG imports and exports

[lostPixels]

Most appropriate sub-area of p5.js?

• [ ] Color
• [x ] Core/Environment/Rendering
• [ ] Data
• [x] Dom
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [x] Utilities
• [ ] WebGL
• [x] Other (specify if possible)

New feature details:

As an artist using p5.js for plotter drawings, I use vector graphics to power my Axidraw. There are very few options for this workflow out there, and p5.js has by far the best API.

Although I am still able to partially use it, the p5js.svg library was abandoned over 5 years ago. It is the only way to draw and export SVGs. It's plagued with many bugs that require a deep understanding to fix.

It would be amazing if p5.js natively supported SVG operations. The 2D API maps perfectly to it, and the only new option that would be nice is loading and manipulating external SVGs.

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[brunocastro]

I will need to export svg in my project too. Sometimes, we needed to edit the programmatic art in vector software.

[jimmymorris]

+1 for this

[bobcgausa]

https://editor.p5js.org/Bobcook47/sketches/Dk3Osbx3z Can’t help with export But am lookin for testers on import Library handles some files and fragments

[klavsbuss]

+1

[bobcgausa]

Try my p5 import library for svg, no export though

https://editor.p5js.org/Bobcook47/present/Dk3Osbx3z

Sent from my iPad

On Feb 20, 2021, at 5:28 PM, Klavs [email protected] wrote:



+1

— You are receiving this because you commented. Reply to this email directly, view it on GitHubhttps://github.com/processing/p5.js/issues/4630#issuecomment-782758951, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AAUCTBGAYANSA3MBOD2LIHTTAAZQDANCNFSM4N32FPSQ.

[nataliefreed]

+1 on this. Is there a place where this (support for vector exports from P5 for use with pen plotters and other digital fabrication workflows) is being discussed? I know there was a discussion here a while back, and that it's not an easy thing to implement. But not sure if it's a design question or an issue of finding someone with the expertise and time. The workflow for this is so nice in Processing, it would be incredible to have that capability in shareable web apps. There are other Javascript libraries that handle SVGs of course, but there's nothing like P5.js for tinkering and teaching.

[limzykenneth]

@nataliefreed No current discussions that I know of is going on though there had been pretty consistent interest in this. I think the lack of progress is mostly due to lack expertise and time. It's not a high priority project for p5.js officially at this time and I don't know of any addon projects that are working on this at the moment.

[zenozeng]

@nataliefreed

Hi, I just released [email protected], which fixes a lot of bugs and should work with [email protected].

• https://github.com/zenozeng/p5.js-svg

And the following are the examples for SVG imports and exports

• http://zenozeng.github.io/p5.js-svg/examples/#exporting
• http://zenozeng.github.io/p5.js-svg/examples/#manipulating

[jimmymorris]

@zenozeng thanks for updating! this is super exciting, look forward to trying it out!

[aafiyahtech]

Hi @zenozeng Cool, let me check

There could be huge scope if we could import an SVG as a shape and then manipulate it in p5js, as the native shape doesn't properly support the translate function. So moving the shape becomes difficult

[agrshch]

It's great to see that the SVG support is added as a proposal for 2.0! SVG runtime by @zenozeng is truly amazing, but it doesn't cover all the use cases and it can be significantly slower than regular canvas. It's a solvable issue though. I used tricks like drawing everything on the canvas for preview and creating (and deleting) the second p5 instance to export the result as SVG. But it would be really nice to have an opportunity to load and export SVG files without switching runtime. Like in Processing

[davepagurek]

Some prior discussion on importing SVG is here for context: https://github.com/processing/p5.js/issues/5779

[thrly]

+1 on an officially supported SVG export sometime please 🙏

[goldwasser]

Also adding +1 on official support for SVG import/export.

I believe a more fundamental change that might be a precursor to this is support for shapes as first-class objects, somewhat akin to the PShape class in the Java Processing library. Having shapes as first-class objects would not only be useful/necessary when modeling data associated with an SVG file but would have impact even when not using SVG files. While createShape/endShape can currently be used to render a custom shape, they do not create a first-class object that can be stored or later manipulated or restyled.

Given the advantages of javascript, it would also be great to allow a PShape-like class register callbacks for mouse events such as onEnter, onExit, onClick, and so those would already provide very useful new functionality for a variety of shapes, helping automate tasks such as determining which "shape" is the topmost one underneath a mouse location.

I don't see any open issues about first-class shapes, and I could split this and start a new issue. But given that this particular issue has been tagged for p5.js 2.0, I thought I'd start by adding to this thread.

[AaratiAkkapeddi]

Adding another +1!