How do I export groups of objects in SVG and find them correctly in Inkscape?

Processing Coding Questions
1

Hello,

I have several shapes and I would like to assign a color to them, so that I can then print them layer by layer.

So I would like to assign “objects” to a (color) group that I could then split into layers in inkscape.

But when I try to make object groups, I can’t really find what I’ve defined in Inkscape.

How can I handle that?

Here is my code Where I assign one shape per group. A circle for the head and a rectangle for the body :

 import processing.svg.*;

void setup() {
  size(400, 400);
  noLoop();
  beginRecord(SVG, "filename.svg");
}

void draw() {
  // Make the parent shape
  PShape alien = createShape(GROUP);
  // Make two shapes
  PShape head = createShape(ELLIPSE, 0, 0, 50, 50);
  PShape body = createShape(RECT, 0, 50, 50, 100);
  alien.addChild(head);
  alien.addChild(body);
  translate(width/2, height/2);
  shape(alien);
  endRecord();
}

But when I open the svg with Inkscape, I find a circle (head) into the supposed “body group”

What am I missing, is it even possible? I know I can make a workaround by making one svg by layer but I’m just getting started and it’s going to complicate my code where I’m trying to keep it simple and efficient.

Thank you!

2

right,
this tool:

https://xmlgraphics.apache.org/batik/using/svg-generator.html

does strange things,
when you edit the SVG manually ( as it creates ugly source ) you see that
and if i skip all your shape things,
just do

import processing.svg.*;

void setup() {
  size(400, 400);
  noLoop();
  rectMode(CENTER);
  beginRecord(SVG, "data/shapes.svg");
  translate(width/2, height/2);
  circle(0,0,50);
  rect(0,50,50,100);
  endRecord();
}

still get

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" style="fill-opacity:1; color-rendering:auto; color-interpolation:auto; text-rendering:auto; stroke:black; stroke-linecap:square; stroke-miterlimit:10; shape-rendering:auto; stroke-opacity:1; fill:black; stroke-dasharray:none; font-weight:normal; stroke-width:1; font-family:'Dialog'; font-style:normal; stroke-linejoin:miter; font-size:12px; stroke-dashoffset:0; image-rendering:auto;" width="400" height="400" xmlns="http://www.w3.org/2000/svg">

<!--Generated by the Batik Graphics2D SVG Generator-->

<defs id="genericDefs"/>

<g>

<g style="fill:white; stroke-linecap:round; stroke:white;" transform="translate(200,200)" >
<circle r="25" style="stroke:none;" cx="0" cy="0" />	
</g>

<g style="stroke-linecap:round;" transform="translate(200,200)" >
<circle r="25" style="fill:none;" cx="0" cy="0" />
<rect x="0" y="50" width="50" style="fill:white; stroke:none;" height="100" />
<rect x="0" width="50" height="100" y="50" style="fill:none;" />
</g>
	
</g>
	
</svg>
3

Thanks for your insight.
Is it possible to use another svg library with processing? Which one would be the best?

4

Why do you want to use it if I may ask?

5

Hi,
a little late to the game but I struggled with the same situation where I want different colors in my sketch to be grouped into inkscape layers so I can draw them one by one on my plotter.
I’ve written a WinForms program that does this form me, using a processing svg as input. The output has a layer for each separate color with all paths in that layer with the same color. I used it so I can accurately draw with my collection of fineliners, for portraits and landscapes.
But it can be used with any color palette, to group shapes into layers based on their color so you don’t have to do this manually in Inkscape.

No idea if this will work for anyone else but me, but if you’re interested I can send you the program?

Or alternatively, if you found a library that we can use in processing to create layers for colors, that would be cool too!

1 Like
6

The result is this (I also reformat the document to be a square):

parsing svg
parsing svg1665×656 292 KB

The tool’s UI looks like this:
parsing svg tool UI
parsing svg tool UI740×917 34.9 KB

The option to use Staedtler pens is only useful if you’ve drawn with a set of rgb values that I use and which match the colors of my fineliners.

1 Like
7

Hey makoho,

Yes i’m interested! Where can I find your program?

Thank you!

8

Hi, thanks for your interest!
I haven’t been working on it for a while, when I left the project it wasn’t working perfectly yet. I guess it did group shapes of the same color into layers, mostly, but it also added a black background that I couldn’t get rid off.
It’s not available anywhere but I could put it up somewhere. Except that I’m off vacationing for the next week and a half. When I’m back I’ll see if I can make it available to you!

– marco

9

Hi,
I wanted to let you know I’ve found an Inkscape extention that can do this. It’s called Styles To Layers, by Mario Voigt. You can find it here: https://inkscape.org/~MarioVoigt/★styles-to-layers