Dealing with SVGs

[shiffman]

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.

[lmccart]

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

[darbicus]

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.

[workergnome]

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

[dhowe]

@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?

[shiffman]

Adding @dannewoo and @zenozeng to this discussion.

[zenozeng]

@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:

• Tests for current p5.js-svg
• https://github.com/zenozeng/p5.js-svg/blob/master/plan.md
• https://github.com/zenozeng/p5.js-svg

[workergnome]

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?

[zenozeng]

@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);
}

[workergnome]

@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.