Outer non-scaling-stroke group makes it challenging to treat svg groups as plot layers

[R4chel]

For a while I was making separate layers by writing each layer to a separate file but I was really excited to see the beginSvgGroup and endSvgGroup functionality. My understanding is these can be used to help communicate different layers to the plotter.

However just using those functions didn't seem to let me make a multilayered plot. This is because every plot is wrapped in one outermost <g vector-effect="non-scaling-stroke"> tag so the whole plot is treated as having 1 layer by at least vpype and nextdraw

p5.plotSvg/lib/p5.plotSvg.js

Lines 1143 to 1145 in 8ae96fb

	// The SVG file wraps everything in a group with a non-scaling stroke effect:
	svgContent += `<g vector-effect="non-scaling-stroke">\n`;
	_svgGroupLevel++;

I tested locally removing that group from my plot and then the software saw the layers I had intended.

For testing this locally I am using vpype read <plot> proplist --layer all. I tried this with both a saved svg from examples/plotSvg_post_grouping and examples/plotSvg_generative/README.md

Additionally after this is addressed it would be awesome to explicitly add an example that has multiple layers to the examples.

[golanlevin]

Hi @R4chel,
Thank you so much for flagging and diagnosing this issue!

I don't use layers in my own personal workflows, so this was my blindspot and I hadn't yet experienced this as a problem. But your issue makes complete sense. I can see how this extra group would be annoying, and I also appreciate your suggestion to make an example with layers.

I had added the offending outermost "non-scaling-stroke" group for essentially cosmetic reasons, and (after doing some testing), I see that it's not even working as well as I intended. I'll remove it in the next version, which I aim to push out in ~January sometime.

Thank you!
Golan

[golanlevin]

Hi @R4chel, I've fixed this in the main repo; the fix will show up on the CDNs the next time I publish a new version.
It turns out the outer group was doing no work whatsoever, and (as you pointed out) intefering with how layers were understood by Inkscape and vpype.

I believe the plotSvg_generative and plotSvg_post_grouping examples now effectively demonstrate layers, as I understand them. I hope this addresses your issue correctly.

Note to self @golanlevin: small changes to examples today need to be propagated to editor.p5js.org.

Best,
Golan

[R4chel]

Thanks so much for addressing the issue so quickly and all your work on the whole package! I didn't personally test the fix but based on the commit I feel pretty confident it will fix the issue and look forward to using it after the next the deployment.

[R4chel]

Oops that was premature. I am testing it locally now on the latest version and having some trouble. I will explore and report back shortly.

[R4chel]

TLDR; it is possible with argument hacking to plot multiple layers in a single file in a way that wasn't possible before the most recent change. However, as for making it easy to do there is some more work to do.

I managed to print the plot directly after saving without any additional post processing but I had to make some tweaks first and I learned some more about how layers work for at least nextdraw and axidraw.

Most important take aways:

• Axidraw / nextdraw cli / Inkscape plugin require choosing a layer via numerical argument between 1-1000 and that layer names begin with a number. (here layer name means inkscape:label not id)
• changing the group names to begin with a number was insufficient e.g. 1horizontalLines
• adding Inkscape properties shown below did work

Here is the simple version of the commands I am running to draw with layers on my axidraw:

nextdraw ~/Downloads/post_grouping.svg -m layers -l 1 
nextdraw ~/Downloads/post_grouping.svg -m layers -l 2

Here is the diff that made it so I could draw by layer.

--- a/examples/plotSvg_post_grouping/sketch.js
+++ b/examples/plotSvg_post_grouping/sketch.js
@@ -35,6 +35,8 @@ function draw(){

   if (bDoExportSvg){
     beginRecordSvg(this, "post_grouping.svg");
+    p5plotSvg.injectSvgHeaderAttribute("xmlns:inkscape", "http://www.inkscape.o
rg/namespaces/inkscape");
+    p5plotSvg.injectSvgHeaderAttribute("inkscape:version", "1.4 (e7c3feb1, 2024-10-09)");
   }

   // Do a drunk walk, alternating horizonal and vertical moves.
@@ -49,14 +51,22 @@ function draw(){

     if (i%2 == 0){
       qx += 40 * random(-1,1);
-      beginSvgGroup("horizontalLines");
+      beginSvgGroup({
+        "id": "horizontalLines",
+        "inkscape:label": "1",
+        "inkscape:groupmode": "layer"
+      });
       stroke('red');
       line(px,py, qx,qy);
       endSvgGroup();

     } else {
       qy += 30 * random(-1,1);
-      beginSvgGroup("verticalLines");
+      beginSvgGroup({
+        "id": "verticalLines",
+        "inkscape:label": "2",
+        "inkscape:groupmode": "layer"
+      });
       stroke('blue');
       line(px,py, qx,qy);
       endSvgGroup();

And most fun of all here is the proof it worked!

As to next steps:

1. I can now do something I previously couldn't do so the change is still helpful and I appreciate it.
2. In the spirit of p5, I would love to make it easier for everyone to be able to plot layers out of the box and am happy to help.

[golanlevin]

Hi @R4chel,
Thanks for your patience. I believe this issue is now resolved. I have published version 0.1.8 with relevant fixes.
I've made some changes to the test example for this functionality,
https://github.com/golanlevin/p5.plotSvg/tree/main/examples/plotSvg_post_grouping

Note:

• All SVGs emitted by p5.plotSVG now have Inkscape compatibility (e.g. headers, layers) enabled by default. This can be disabled with setSvgInkscapeCompatibility(false) for vanilla SVGs.
• There are two functions, setSvgMergeNamedGroups() and setSvgGroupByStrokeColor() which do related but different things. The first one is for "conceptual" groupings (parts and assemblies, etc.) while the second one is ideal for setting marks to be drawn with the same pen. Note that they could interact in some potentially unexpected ways, depending on the hierarchy of the output SVG.
• It is no longer necessary to inject all of the additional Inkscape-specific detail (e.g. inkscape:groupmode) in beginSvgGroup(), as you demonstrated. The system will take care of this for you.

As an aside — I'm pleased, surprised, and apologetic that you had to use the injectSvgHeaderAttribute() function to implement your fix. This function was totally undocumented, and had only been made for some side-experiments! But you provided the key fix in the end.

Cheers,
Golan