P8gGraphicsSVG, a new renderer for SVG graphics

PhiLho

P8gGraphicsSVG, a new renderer for SVG graphics

in Library and Tool Development • 1 year ago

This library is just a new PGraphics renderer for Processing, like the PDF or the DXF ones.
It extends the PGraphicsJava2D renderer, allowing to save the drawings of a sketch to a SVG file.
It doesn't handle animations, rendering only a static image.
It doesn't handle multiple pages. But it can be used to save a sequence of SVG files.
It has some limitations, particularly with pixel-manipulating functions (no filter, blend, mask...).

The Pausing While Recording (pause-resume) sketch of the PDF library cannot be done with P8gGraphicsSVG because of a different way of handling recording events: if this sketch is used with P8gGraphicsSVG instead of PDF, only the last drawing events will be recorded.
But an example sketch shows how to save a selected frame.

I had the idea to make this library after people reported issues with proSVG which is badly outdated.
I have a long interest for this graphical format (I made small improvements of the SVG support of Processing) so I was motivated to make such library.

Like proSVG, it is based on Apache Batik . I hand-selected the needed jars, a minimal set shipped with the library. Now, it uses jars I compiled myself (with Java 1.6, from trunk, so at version 1.8pre), to fix a text size bug in the official binary release.

You can find the source at http://bazaar.launchpad.net/~philho/+junk/Processing/files/head:/libraries/P8gGraphicsSVG/
The binary (and sources, no doc except examples and a README file) can be downloaded at http://phi.lho.free.fr/programming/Processing/P8gGraphicsSVG/index.html and via the new 2.0 mechanism of grabbing libraries from the PDE.

Please, read the README.txt file explaining the bases (and indicating a known bug from Batik).
Report bugs here.

[EDIT - 2012-11-29] Released v.2.0, major version because I renamed the library from PGraphicsSVG to P8gGraphicsSVG to conform to Processing library naming rules. The package name has been changed too, and the save() and saveFrame() methods have been removed, being ambiguous with bitmap saving. We use endRecord() more consistently now.
[EDIT - 2012-08-11] Released v.1.1, with some API changes and a tested, working saveFrame(). It uses its own numbering (the number of effective saveFrame() calls).
[EDIT - 2012-08-14] Released v.1.2. No changes in the library itself, but it includes Batik 1.8pre jars compiled from the SVN trunk.
[EDIT - 2012-08-15] Moved to a page on my own site... Updated the jar with the Processing library identity card... (libarry.properties)

Replies(15)

fjenett

Re: PGraphicsSVG, a new renderer for SVG graphics

1 year ago

Great! Now all it needs is a Processing.js companion that will allow to create vectors from Processing.js sketches ...

PhiLho

Re: PGraphicsSVG, a new renderer for SVG graphics

1 year ago

Thanks, Florian.
The PJS idea is out of the scope of this library (no Batik for JS!), but still a good idea, indeed.

Note: I updated to v. 1.1.

PhiLho

Re: PGraphicsSVG, a new renderer for SVG graphics

1 year ago

I was annoyed by the text size bug in the official release of Batik, so I downloaded the SVN trunk and compiled it (quite easy with Ant) and generated the jars. I had to tweak the Ant script because the codec.imageio package was forgotten (see the README for details).

So I released the v.1.2 of PGraphicsSVG. The only change with 1.1 is the set of jars (slightly smaller, perhaps because the jars were compressed with Java 1.6?).

davemonst..

Re: PGraphicsSVG, a new renderer for SVG graphics

1 year ago

Hi PhiLho,

I tried to download the current version from http://phi.lho.free.fr/programming/Processing/PGraphicsSVG/index.html, but I keep getting 404 errors. I'd love to use your library in my current project.

Cheers,

Dave

PhiLho

Re: PGraphicsSVG, a new renderer for SVG graphics

1 year ago

Ah, sorry.
There was a typo in the link, /Programming/ instead of /programming/
Fixed now.

Thanks for trying and for reporting the issue.

monkstone

Re: Re: PGraphicsSVG, a new renderer for SVG graphics

10 months ago

I just downloaded the library using the processing-2.0 auto-install feature, and it ended up all-over the place (ie not in the sketchbook libraries folder), also the jar for the actual library was not included along with all the batik.. jars? Now that did not bother me in the slightest, as the source was included so I recompiled library with latest svn version of processing with netbeans it all worked for me (however netbeans did complain about "public boolean isRecording()" as not being overidden suggesting it is no longer part of the PGraphicsJava2D interface?). I think for the auto-unpackaging to work properly the zip file needs to be a zip of the folder as it would be in the processing sketchbook libraries folder, it certainly seems to work with my lsystems library...

PhiLho

Re: P8gGraphicsSVG, a new renderer for SVG graphics

10 months ago

Oops, looks like I made a bad, hasty packaging...
I updated this thread to reflect the name change, compiled and packaged the jar after removing the isRecording() which indeed disappeared from Processing, and carefully zipped at the folder level...

Many thanks for this detailed report. I hope you will enjoy the library.

joseph

Re: P8gGraphicsSVG, a new renderer for SVG graphics

7 months ago

Hi PhiLho,

I tried generating a SVG from one of my applications that uses vertex with z coordinates. Unfortunately it yield a 'Use a version without a z-coordinate instead' message. I tried implementing it the same way your examples been setup, but it gave me a blank svg file.

What I'm trying to attain here exactly is to have a vector svg format of my sketch, same as a pdf format (it takes a snapshot of our sketch and have everything it sees within the canvass as a flat vector). Wherein if we open that pdf file in Illustrator, regardless whether its from a 3D or 2D Processing sketch, it always produce a flat vector pdf version.

Can the P8gGraphicsSVG library do this?

=======

To recreate the blank svg, here is a sample code:

import org.philhosoft.p8g.svg.P8gGraphicsSVG;

int hw, hh;

void setup()
{
size(200, 200);

hw = width / 2;
hh = height / 2;
}

void draw()
{
background(#FF7777);
pushMatrix();
translate(0, 0);
beginRecord(P8gGraphicsSVG.SVG, "AutoCrop.svg");
fill(#0000ff);
beginShape();
vertex(30, 20, 1);
vertex(85, 20, 1);
vertex(85, 75, 1);
vertex(30, 75, 1);
endShape(CLOSE);
endRecord();
popMatrix();
println("Done");
}

Also, if I may add. I certainly understand that this library extends the PGraphicsJava2D renderer, which obviously doesn't accept z coordinates. But is there anyway P8gGraphicsSVG could accept and flatten a 3D sketch then have it export as a 2D vector? Same way how we export PDF?

I have a technical reason by the way as to why I should be generating my sketch as a SVG, rather than PDF.

Thanks!

PhiLho

Re: P8gGraphicsSVG, a new renderer for SVG graphics

7 months ago

It is just not possible, even less in newer versions, where the old P3D mode is gone.

First, I am surprised that you say that it works with the PDF exporter. Your description isn't really accurate (" (it takes a snapshot of our sketch and have everything it sees within the canvass as a flat vector", these renderers doesn't "take a snapshot" but have to record the drawing orders as they happen). So I am not sure if you talk about the standard Processing PDF exporter...
It is the same as mine (which copied lot of stuff from it, actually):
public class PGraphicsPDF extends PGraphicsJava2D {
I suppose you are not talking about the DXF exporter, so I am a bit lost.

Your demo sketch cannot work, because it too uses Java2D: remove the beginRecord / endRecord lines, it will produce the same error!

Theoretically, one can copy the old P3D renderer, make the SVG one to extend this one, and perhaps attain what you look for. That's a work I won't do, sorry, but the source code of P8gGraphicsSVG is available, if you want to try the adventure.

Thanks for your interest in my little library.

joseph

Re: P8gGraphicsSVG, a new renderer for SVG graphics

7 months ago

I think I explained that horribly. My apologies on that one. My late night sleepiness is getting worse. But nevertheless, the library is damn useful. Thanks!

pedroam

Re: P8gGraphicsSVG, a new renderer for SVG graphics

4 months ago

hi there.

any idea when P8gGraphicsSVG will be available for processing 2.0 ?

PhiLho

Re: P8gGraphicsSVG, a new renderer for SVG graphics

4 months ago

It is available already, no?

bettinani..

Re: P8gGraphicsSVG, a new renderer for SVG graphics

1 month ago

Hi,

I have been trying to find a svg exporter for a while and your library is brilliant. love it. but I have been running into a slight problem when using it together with controlP5. I want to use sliders to generated a shape that's then exported as svg. but anytime I add a button or slider, it generates numerous, empty png files and I have no idea why? I am fairly new to processing as well so maybe there is something I am doing wrong. I stripped down the code to the bare minimum to see what the problem may be (see below) but can't figure it out. maybe it's a controlP5 issue? any ideas?

thanks a lot for your help.

import org.philhosoft.p8g.svg.P8gGraphicsSVG;
import controlP5.*;
ControlP5 cp5;
P8gGraphicsSVG svg;
void setup()
{
size(500, 500);
smooth();
frameRate(10);
/* the moment this is uncommented the sketch generates endless amounts of png files
cp5 = new ControlP5(this);
cp5.addBang("save")
.setPosition(40, 300)
.setSize(280, 40)
.setTriggerEvent(Bang.RELEASE)
;
*/
}
void draw()
{
g.background(255);
svg = (P8gGraphicsSVG) createGraphics(width, height, P8gGraphicsSVG.SVG, "test.svg");
beginRecord(svg);
svg.clear(); // Discard previous frame
svg.beginDraw(); // And record this one
noFill();
stroke(125);
rect(50,50, 400, 400);
}
void keyPressed() {
if (key == 's')
{
svg.endRecord();
println("Saved.");
}
}

andreas.s..

Re: P8gGraphicsSVG, a new renderer for SVG graphics

1 month ago

just modified your sketch a bit to make it work. I moved svg.endRecord() into draw so that you do not keep on drawing into your svg continuously which in your case also includes the drawing of the controller into the svg. I added the boolean variable record which can be triggered by the controller. When triggered, your drawing routines will be rendered into an svg file.

import org.philhosoft.p8g.svg.P8gGraphicsSVG;
import controlP5.*;
ControlP5 cp5;
P8gGraphicsSVG svg;
boolean record;
void setup()
{
size(500, 500);
smooth();
frameRate(10);
cp5 = new ControlP5(this);
cp5.addBang("record")
.setPosition(40, 300)
.setSize(280, 40)
.setTriggerEvent(Bang.RELEASE)
;
}
void record() {
record = true;
}
void draw() {
if(record) {
svg = (P8gGraphicsSVG) createGraphics(width, height, P8gGraphicsSVG.SVG, "test-"+frameCount+".svg");
beginRecord(svg);
svg.clear(); // Discard previous frame
svg.beginDraw(); // And record this one
}
background(200);
noFill();
stroke(125);
rect(random(width) ,50, 400, 400);
if(record) {
svg.endDraw();
endRecord();
record = false;
}
}

bettinani..

Re: P8gGraphicsSVG, a new renderer for SVG graphics

1 month ago

Brilliant! thanks for the quick help, Andreas. works a charm!!!

Top Reply