Dealing with SVGs

Students working on a final that makes use of SVGs asked about SVGs and p5. I looked and don't see an issue discussing this so thought I would open one. I noticed there is some a commented out p5.Shape object. Some stream of consciousness questions:

Would it make sense to have acreateSVG() function for creating an SVG DOM element from a file?
Is drawing SVGs to an HTML canvas something that is standard practice on the web or would this never happen and it makes more sense to place SVG DOM elements on top of a canvas with absolute positioning?
Would it makes sense to support a few functions to build an SVG from scratch?
To what extent should we port functionality from PShape to p5.Shape?

Apologies if this is covered somewhere else and I'm missing something obvious.

@runemadsen

I started a few months back on trying to create a basic p5.Shape object and realized the PShape API from Processing will likely need some rethinking, and I think it needs someone with more SVG experience to help think about this.

also, @runemadsen did a pretty neat test that allows exporting p5 canvas to svg. https://github.com/runemadsen/p5-svg-test

yeah going from svg to canvas and back is fairly simple. But do we really need a SVG to do shapes? couldn't we just do another canvas that doesn't display, like a buffer canvas or 2. And Id be willing to make a 2d point array matrix transformation library.. I probably have one laying around my computer from when I was working on processing.js. If you are concerned about the matrix multiplication slowing down the drawing of the images I could setup a webworker to do it without binding up the main window.

This is being pursued as part of the 2015 Google Summer of Code by Zeno Zeng.

@workergnome

@workergnome does the 'this' you refer to include integration of pdf/svg into some p5.Shape object, and if so, do we have someone working on implementing the 2d/canvas components of such an object? I am particularly interested in this as it relates to typography, and being able to return glyph paths to users via p5.Shape objects... Lastly, do we have any spec for what our p5.Shape object should look like?

@dannewoo

Adding @dannewoo and @zenozeng to this discussion.

@dhowe

@dhowe I am now working on p5.js-svg and for now it uses canvas2svg with patches. I hope basically we can write once and run on both canvas and svg. So we can use canvas for perfermence and use svg for exporting or oop api. Also, I hope that we could only maintain the 2d shapes in canvas API, and let p5.js-svg automatically render it in SVG.

There are still some bugs in the canvas2svg layer. I am now working on it and add more unit tests for canvas2svg. And after that (hopefully this week or next week), I will begin working on the SVGShape API:

Current API Design:

s = new SVGShape();
s.circle();
s.rect();
s.translate(100, 100); // move towards right and bottom
s.translate(100, 100); // again
s.rotate(angle); // should respect p5's angleMode
s.rotateTo(angle);
blur5 = new SVGFilter.Blur(5);
s.addFilter(blur5);
s.removeFilter(blur5);
s.scale(scale);
s.scaleTo(scale);

c = new SVGShape.Circle(x, y, r);
c.x = newX; // update using javascript setter API
c.y = newY;
c.r = newR;

As for p5.Shape, I don't know if there is already a plan for it. I am afraid that some features of SVGShape API might be SVG only. However, I would be happy to make SVGShape somehow compatiable with p5.Shape's API. Let me know if you have any suggestions on the API design.

See also:

@dhowe

So, @dhowe, @zenozeng, to clarify my understanding of what we're saying:

There is not currently an implementation of p5.Shape.
@zenozeng is working on direct, programatic export of canvas to SVG, which will likely need to support a p5.Shape object, but he has not yet created one.
https://processing.org/reference/PShape.html is the Processing object that we're looking to mirror.

@zenozeng, are you also working on loading SVGs into the canvas, or are you only looking into export the canvas as an SVG?

I think the other interesting question here is if we are trying to support all of SVG (which is a huge bear of a spec) or if we're trying to support the subset of SVG that maps closely to Canvas? Currently, Processing has basic input/output of SVGs through the PShape api. @zenozeng, it sounds like you're trying to achieve a more ambitious goal—could you clarify more what your end goal is? Is there a subset of p5.js that you're trying to achieve export of?

@workergnome

@workergnome I am now only working on render p5.js in and has no plan for implementation of PShape. p5.js-svg is a runtime for p5.js plus some API designed for SVG. And this is my future plan: https://github.com/zenozeng/p5.js-svg/blob/master/plan.md

As for the API, I hope most of p5.js current API could be run on p5.js-svg. For now, almost all Shape/2d_primitives works. See the test page I mentioned above. I will add unit tests and implementation of other API later.

BTW, I am a little confused, canvas's drawImage method could draw SVG directly, which means that the following code should already work in p5.js:

var img;
function preload() {
    img = loadImage('test.svg');
}

function setup() {
    background(100);
    createCanvas(1000, 1000);
}

function draw() {
    image(img, 0, 0);
}

@zenozeng

@zenozeng—that will certainly work, but it loads it as an image, not as a vector object. You can display it, but you cannot use the data contained within the SVG programmatically within p5.js.

I hadn't realized that what you were doing was trying to re-implement p5.js, drawing to an SVG instead of a canvas. That's a much more ambitious goal that I had thought, closer to something like processing.py (or p5.js itself) than just a helper library—or am I misinterpreting what you're working on?

Thank you for taking the time to explain this work to me.

@lmccart

As @lmccart suggests above, Processing's PShape seems rather overloaded, encompassing SVG and OBJ import, curves/paths, color-handling, drawing, textures, lighting, transforms/matrices, etc. So I'm not sure we want to mirror its API... For the purposes of typography, it would be nice to have some type of object that encapsulates one or more paths, which could be part of a PShape (as is the case in Processing) or perhaps be its own p5.Path object. I'm not sure, as @workergnome says, that exposing all, or even much, of SVG's functionality within p5js makes much sense. Perhaps we separate SVG functions into a library like sound (perhaps @zenozeng's work goes in this direction?) or we allow SVG objects to be loaded via a PShape, but then only expose the native SVG object to the user, rather than implementing lots of SVG-specific functions in p5js core objects.

@runemadsen

Thanks everyone for their comments and please do keep them coming! I do go through all of them and gave them individually some thoughts and they are all great points to go forward with.

One point that I did not thought of before asking here is the possibility of exporting SVG for laser cutters and plotters which I think is a major point of this feature so special thanks for bringing up this idea.

Another very interesting point that I think really need close attention is what @runemadsen mentioned about the need for a scene graph system and how it may diverge from the classic Processing/p5.js drawing methods. This will probably be a key point in the implementation decisions.

Also vey valid point from @lmccart about creating a whole new area that needs to be maintained over time which I also agree with @bmoren idea about making a separate addon at least to start with which can help ease the overall scale of p5.js as a project.

I will be submitting this as a Processing Fellowship project but it may be that I will work on something else for the Fellowship, that'll depend on discussions with the board but if anyone is interested in working on this, we can either work together or you can take over the project, just let me know.

I understand this is tricky and closed, but in summary, if one would like to procedurally generate an SVG, is p5js' recommendation to not use p5js and instead use one of the alternatives listed in this thread?

@raphaelschaad

@raphaelschaad For now yes. There's no official support of SVG in p5.js and none planned for the immediate future (that I know of). I would personally recommend rune.js (as mentioned above) for an easy to use and easy to get started with, SVG library.

@zenozeng

Looks like it's been closer for awhile but I'd add a big +1 for full SVG support. It'd be hugely helpful for making CNC-able patterns from p5.js. It'd make for a tool that fabricators and such would love.

Here's an example: my plan was to import an SVG made in Inkscape, sketch, etc; use p5.js and some sliders to tesselate that SVG, including sliders to rotate, scale, set borders, etc. Then export to SVG. I tried using @zenozeng's library, and it's a promising start, but missing some critical elements like rotate(), translate(), and scale().

One thing that p5.js adds to the mix that Processing never had well is the DOM and all its lovely, standard UI elements. So easy to add inputs! Oh, how I love the p5 DOM code. It makes it dead easy to make control panel apps like the one I described. It also has such nice import and export features.

I'm going to try mixing Rune.js with the DOM library, see what unholy mess I can make there, in the meantime. That might be a workable solution? We'll see.

In case it helps someone, here's my workaround. It's long-ish and probably does not apply to most use-cases, but anyway.

p5 can import at least one type of vector shapes: fonts.

So I downloaded FontForge and started a font project. Every SVG I want to use in my project, I import it in the cell for a particular letter. I then generate a TTF font file.

In p5, I load that font file and then just do a text() of the letter I assigned to the wanted shape in FontForge.

That's it.

In case it helps someone, here's my workaround. It's long-ish and probably does not apply to most use-cases, but anyway.

p5 can import at least one type of vector shapes: fonts.

So I downloaded FontForge and started a font project. Every SVG I want to use in my project, I import it in the cell for a particular letter. I then generate a TTF font file.

In p5, I load that font file and then just do a text() of the letter I assigned to the wanted shape in FontForge.

That's it.

This is somewhere between 'genius' and 'ohgod' but thanks for the hack :)
Will solve my issue temporarily.

@JuanIrache

So much of this thread and line of thought is around generating and exporting SVGS.
I suppose that you get a limited support with the fonts (control color and thickness, etc)
Do you have an example of this you can share @JuanIrache ? sounds interesting!

As for importing SVG's p5 can handle them just fine using the image functionality eg.

let svg;

function setup() {
  createCanvas(400, 400);
  svg = loadImage('https://upload.wikimedia.org/wikipedia/commons/0/0a/Tux-shaded.svg')
}

function draw() {
  background(220);
  image(svg,10,10)
}

But you have no control over the inner workings once they are imported beyond the normal image functionality, and of course no ability to export a vector file for lasercutting, scaling up, plotting, etc.

My p5 svg library with many examples has a link posted.Bob CookOn Dec 16, 2020 8:49 AM, Ben Moren <notifications@github.com> wrote: So much of this thread and line of thought is around generating and exporting SVGS. I suppose that you get a limited support with the fonts (control color and thickness, etc) Do you have an example of this you can share @JuanIrache ? sounds interesting! As for importing SVG's p5 can handle them just fine using the image functionality eg. let svg; function setup() { createCanvas(400, 400); svg = loadImage('https://upload.wikimedia.org/wikipedia/commons/0/0a/Tux-shaded.svg') } function draw() { background(220); image(svg,10,10) } But you have no control over the inner workings once they are imported beyond the normal image functionality, and of course no ability to export a vector file for lasercutting, scaling up, plotting, etc. —You are receiving this because you commented.Reply to this email directly, view it on GitHub, or unsubscribe.

Sorry for my late reply. A lot has happened in the past few years. I recently restarted the maintenance of the p5.js-svg project and released the 1.0.7 version. I have fixed many bugs, supporting the latest version of p5.js (1.3.1), and implemented CanvasTransform Interface.

Project Homepage:
https://github.com/zenozeng/p5.js-svg

Examples：
https://zenozeng.github.io/p5.js-svg/examples/
https://zenozeng.github.io/p5.js-svg/test/

@zenozeng

Wow, this is amazing to see @zenozeng! Great work!

@zenozeng

Amazing! Thank you so much @zenozeng and cant wait to play around with it :)

All great to see! I look forward to trying it out. Thank you! Tom

…

On Tue, Jun 22, 2021 at 1:59 PM dannewoo ***@***.***> wrote: Amazing! Thank you so much @zenozeng <https://github.com/zenozeng> and cant wait to play around with it :) — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#458 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAC45HYTOGQ5ELOVYLRGRQDTUDFOTANCNFSM4AY3SEBQ> .

-- Tom Igoe

@zenozeng

Hi friends, I just wanted to put a note here about p5.plotSvg, a new plotter-oriented SVG export library for p5.js: https://github.com/golanlevin/p5.plotSvg

The p5.plotSvg library allows you to export a p5.js drawing as an SVG file that consists exclusively of scalable vector paths, such as lines, arcs, shapes, polylines, and curves. I anticipate that people will use these SVGs to execute drawings on a pen plotter, such as an AxiDraw, or with tools like a laser cutter.

The p5.plotSvg library is modeled after the way in which PDF exporting and SVG exporting are implemented in Processing (Java). It works by temporarily overriding the functionality of the p5.js drawing commands.

The p5.plotSvg library is not a general purpose p5-to-SVG exporter; it is intended for the specific needs of plotter enthusiasts. Thus, large parts of both the p5 and SVG specifications have been purposefully omitted, even where they are common to both. For example, there is no support for graphics that include pixel-based images, transparency, filters, blend modes, gradients, clipping paths, animation, or (even) fills and stroke weights. Also, p5.plotSvg is not an SVG-based alternative renderer for the web browser, nor is it a library for loading, parsing, or displaying SVG files in p5.js; for those use cases, I definitely recommend using @zenozeng's p5.js-svg library!

Best wishes,
Golan

Congrats, Golan! How are things going with you? — David David Newbury, Senior Director, Public Technologies | The J. Paul Getty Trust | (310) 440 6116 | getty.edu<http://www.getty.edu/> [../../Getty_Logo_EmailSig.png] From: Golan Levin ***@***.***> Reply-To: "processing/p5.js" ***@***.***> Date: Tuesday, November 19, 2024 at 10:59 AM To: "processing/p5.js" ***@***.***> Cc: David Newbury ***@***.***>, Mention ***@***.***> Subject: Re: [processing/p5.js] Dealing with SVGs (#458) Hi friends, I just wanted to put a note here about p5.plotSvg<https://github.com/golanlevin/p5.plotSvg>, a new plotter-oriented SVG export library for p5.js: https://github.com/golanlevin/p5.plotSvg The p5.plotSvg library allows you to export a p5.js drawing as an SVG file that consists exclusively of scalable vector paths, such as lines, arcs, shapes, polylines, and curves. I anticipate that people will use these SVGs to execute drawings on a pen plotter, such as an AxiDraw, or with tools like a laser cutter. The p5.plotSvg library is modeled after the way in which PDF exporting and SVG exporting are implemented in Processing (Java). It works by temporarily overriding the functionality of the p5.js drawing commands. The p5.plotSvg library is not a general purpose p5-to-SVG exporter; it is intended for the specific needs of plotter enthusiasts. Thus, large parts of both the p5 and SVG specifications have been purposefully omitted, even where they are common to both. For example, there is no support for graphics that include pixel-based images, transparency, filters, blend modes, gradients, clipping paths, animation, or (even) fills and stroke weights. Also, p5.plotSvg is not an SVG-based alternative renderer for the web browser, nor is it a library for loading, parsing, or displaying SVG files in p5.js; for those use cases, I definitely recommend using @zenozeng<https://github.com/zenozeng>'s p5.js-svg library! Best wishes, Golan — Reply to this email directly, view it on GitHub<#458 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AAAIN2CFBGQYFJRUSFUPIML2BODCVAVCNFSM4AY3SEB2U5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TENBYGY2TAOJVGQ2Q>. You are receiving this because you were mentioned.Message ID: ***@***.***>

This is great timing, Golan. I'm putting together the Paths module of my revised P5.js course right now, and I just discovered this thread while looking at the state of the art for loading and displaying SVG files in sketches. I'm still somewhat bummed that I can't display SVGs on the canvas as fluidly as we used to in Processing, but I'll gladly talk about SVG export instead.

Hi friends, I just wanted to put a note here about p5.plotSvg, a new plotter-oriented SVG export library for p5.js: https://github.com/golanlevin/p5.plotSvg

Navigation Menu

Repository navigation

Dealing with SVGs #458

39 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Dealing with SVGs #458

Description

Activity

lmccart commented on Dec 10, 2014

darbicus commented on Dec 10, 2014

workergnome commented on May 26, 2015

dhowe commented on Jun 8, 2015

shiffman commented on Jun 8, 2015

zenozeng commented on Jun 8, 2015

workergnome commented on Jun 8, 2015

zenozeng commented on Jun 8, 2015

workergnome commented on Jun 8, 2015

dhowe commented on Jun 8, 2015

39 remaining items

limzykenneth commented on Dec 6, 2017

raphaelschaad commented on Feb 22, 2019

limzykenneth commented on Feb 22, 2019

tigoe commented on Dec 1, 2019

JuanIrache commented on Dec 6, 2020

thel3l commented on Dec 16, 2020

bmoren commented on Dec 16, 2020

bobcgausa commented on Dec 16, 2020

zenozeng commented on Jun 17, 2021

shiffman commented on Jun 20, 2021

dannewoo commented on Jun 22, 2021

tigoe commented on Jul 3, 2021

golanlevin commented on Nov 19, 2024

workergnome commented on Nov 19, 2024

isohedral commented on Dec 2, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions