# Group SVG loaded shape

**URL:** <https://discourse.processing.org/t/group-svg-loaded-shape/41636>\
**Category:** Coding Questions\
**Created:** [April 6, 2023, 12:15pm UTC](https://discourse.processing.org/t/group-svg-loaded-shape/41636 "2023-04-06T12:15:36Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![mrbbp](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mrbbp/32/15313_2.png) [@mrbbp](https://discourse.processing.org/u/mrbbp)\
**Post date:** [April 6, 2023, 12:15pm UTC](https://discourse.processing.org/t/group-svg-loaded-shape/41636/1 "2023-04-06T12:15:36Z")

</div>

Hello,

i’m playing with drawn letters in svg, and put together to build words.  
Something to make poster drawn by an axidraw  
I would like to group letters to manipulate group easily. (center word in the screen, etc, etc)

I have a PShape Array with all my svg drawing (`file`) (my letters) and put (`words`) in the sketch with a `shape(file[index],letterX,letterY, file[index].width/5, file[index].height/5);`

```processing
letterX = initX;
  letterY = initY;
  if (words!="") {
    for (int i=0; i<words.length();i++) {
      int index = int(words.charAt(i));
      shape(file[index],letterX,letterY, file[index].width/5, file[index].height/5);
      if (int(words.charAt(i)) == 10) {
        letterX = 0;
        letterY += file[index].height/5;
      } else {
        letterX += (file[index].width-100)/5;
      }
    }
  }

```

i’m not sure to undestand how to group these shapes together!  
i can’t do `word.addChild(shape(xxxx));`

any help please?

 ![Capture d’écran 2023-04-06 à 14.11.41](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/1/c/1ceb063f75af43a499274ee6ee728d8986b10946.png)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 6, 2023, 5:11pm UTC](https://discourse.processing.org/t/group-svg-loaded-shape/41636/2 "2023-04-06T17:11:51Z")

</div>

quote

While of course this would work, it would be a great deal more convenient if you could group the head and body into one PShape. With a PShape “GROUP”, you can.

[![](https://processing.org/static/60ec6d0a0b02a14d18763957955e5fad/6af66/pshape7.png "dark grey rectangle with a light grey circle above a rectangle to resemple a person") ](https://processing.org/static/60ec6d0a0b02a14d18763957955e5fad/6af66/pshape7.png)

```auto
// 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);

// Add the two "child" shapes to the parent group
alien.addChild(head);
alien.addChild(body);

// Draw the group
translate(width/2, height/2);
shape(alien);

```

For a full example that demonstrates a PShape that groups together a primitive shape, custom polygon, and path, see “GroupPShape” (under File → Examples → Topics → Create Shapes).

from [PShape / Processing.org](https://processing.org/tutorials/pshape)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 6, 2023, 5:17pm UTC](https://discourse.processing.org/t/group-svg-loaded-shape/41636/3 "2023-04-06T17:17:57Z")

</div>

Hello @mrbbp,

This topic may be of interest:

> [@New childs added to PShape after being displayed once won't show](https://discourse.processing.org/t/new-childs-added-to-pshape-after-being-displayed-once-wont-show/40963):
>
> Hello, in my sketch i continuesly add PShape childs to a group, but once i draw the group the newly added childs wont show up anymore, does anyone have a solution for this, or a workaround. I’d be very much appreciated. below is an example, in my original code the problem occurs when i temporary add a child to the group when i press the mouseButton. perhaps this info is usefull. Also, in my original code the group is quite large, and instead of just not showing the newly added childs, it crash…

`:)`

---

<div class="post-metadata">

**Author:** ![mrbbp](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mrbbp/32/15313_2.png) [@mrbbp](https://discourse.processing.org/u/mrbbp)\
**Post date:** [April 7, 2023, 6:25am UTC](https://discourse.processing.org/t/group-svg-loaded-shape/41636/4 "2023-04-07T06:25:17Z")

</div>

yes i read the GROUP example.  
but it use `createShape(primitive, x,y,w,h);`  
there is no example with a loaded svg.

therefor i tried

```auto
  letterX = initX;
  letterY = initY;
  if (words!="") {
    // create the lines (ther is certainly a betterway, nevermind)
    ligne[0] = createShape(GROUP);
    ligne[1] = createShape(GROUP);
    ligne[2] = createShape(GROUP);
    
    // for each letter of the string
    for (int i=0; i<words.length();i++) {
      int index = int(words.charAt(i));
      // create a group
      PShape lettre = createShape(GROUP);
      // add the svg to the group
      lettre.addChild(file[index]);
      lettre.setName("lettre"+index); // it doesn't give a name to the group
      // translate the letter next the last one
      lettre.translate(letterX,letterY);
      ligne[li].addChild(lettre); // add the child
      // adjust next letter position
      if (int(words.charAt(i)) == 10) {
        ligne[li].scale(.2);
        shape(ligne[li], 0,0);
        li++;
        letterX = 0;
        letterY += file[index].height;
      } else {
        letterX += (file[index].width-100);
      }
    }
    // scale all letters 
    ligne[li].scale(.2);
    // add the shape to the display ?
    shape(ligne[li], 0,0);
  }

```

in fact this code do the same svg structure as the first one. Each letter is in a group, but there is no group for a line (at least one group of group (letter)) as i expected with the code.

Also, i name the group, `setName("letter"+index)` (in javaDoc), but i do not understand what it is supposed to do ! there is no `name` attribute in the svg exported structure file.

Do i lost my time to attempt to produce a useless structure. in fact i don’t know if Processing is able to determine the size (width and height) of a group. if it don’t, i just have to calculate myself and store the size to center the line.

any answer or a begin?

---

<div class="post-metadata">

**Author:** ![mrbbp](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mrbbp/32/15313_2.png) [@mrbbp](https://discourse.processing.org/u/mrbbp)\
**Post date:** [April 7, 2023, 7:27am UTC](https://discourse.processing.org/t/group-svg-loaded-shape/41636/5 "2023-04-07T07:27:08Z")

</div>

`setName()` give a name to the group but does not export to svg → what for?  
`getWidth()` does not sendback a width of the group even after `shape()` (add to the “displaylist”).

```auto
    if (int(words.charAt(i)) == 10) {
        ligne[li].scale(.2);
        shape(ligne[li], 0,0);
        println("largeur ligne:"+ligne[li].getWidth());
    …

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 7, 2023, 7:37am UTC](https://discourse.processing.org/t/group-svg-loaded-shape/41636/6 "2023-04-07T07:37:24Z")

</div>

Annoying

Maybe just use a transparent PGraphics, then you have one PGraphics per word