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.

[limzykenneth]

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

[tigoe]

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.

[JuanIrache]

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.

[thel3l]

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.

[bmoren]

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.

[bobcgausa]

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.

[zenozeng]

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/

[shiffman]

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

[dannewoo]

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

[tigoe]

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 https://github.com/processing/p5.js/issues/458#issuecomment-866205892, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAC45HYTOGQ5ELOVYLRGRQDTUDFOTANCNFSM4AY3SEBQ .

-- Tom Igoe