# Get all children from SVG

**URL:** https://discourse.processing.org/t/get-all-children-from-svg/29932
**Category:** Coding Questions
**Created:** [May 7, 2021, 8:26am UTC](https://discourse.processing.org/t/get-all-children-from-svg/29932 "2021-05-07T08:26:40Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![thesandrobrito](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/thesandrobrito/32/12634_2.png) [@thesandrobrito](https://discourse.processing.org/u/thesandrobrito)
#### Post date: [May 7, 2021, 8:26am UTC](https://discourse.processing.org/t/get-all-children-from-svg/29932/1 "2021-05-07T08:26:40Z")

</div>

Hi Everyone.  
I came back to processing after a few years of not coding anything and I am struggling with something I think I could do before.

I’m looking to draw SVGs with the flexibility of changing the colours of the elements inside. Because different SVGs have different amount of elements I need to be able to fetch those elements dynamically.  
I know I can get a set of elements by using getChild(“Name”) but that works when I have the names only.

I’ve arrived at this code which prints separate graphic elements but for some reason, it’s not drawing them. This example uses very common the bot1.svg

```auto
import processing.svg.*;

PShape[] children;
PShape sh;

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

  sh = loadShape("bot1.svg");
  shapeMode(CENTER);
  strokeWeight(1);
}
void draw(){
  children = new PShape[sh.getChildCount()];
  push();
  translate(width/2, height/2);
  //shape(sh,0,0,400,400);
  //children = sh.getChildren();
  
  for (int s = 0 ; s <children.length; s++) {
      children[s] = sh.getChild(s);
      children[s].disableStyle();
      children[s].fill(0);
      shape(children[s], 0, 0, 100, 100);
      println(children[s]);
    
  }
  
  pop();
}

```

---

<div class="post-metadata">

### Author: ![matheplica](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/matheplica/32/21035_2.png) [@matheplica](https://discourse.processing.org/u/matheplica)
#### Post date: [May 7, 2021, 10:42am UTC](https://discourse.processing.org/t/get-all-children-from-svg/29932/2 "2021-05-07T10:42:57Z")

</div>

Try this in your setup :

```auto
sh = loadShape("bot1.svg");
sh.disableStyle();
children = sh.getChildren();

```

and in your draw

```auto
shape(children[s], 0, 0, 100, 100);

```

---

<div class="post-metadata">

### Author: ![thesandrobrito](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/thesandrobrito/32/12634_2.png) [@thesandrobrito](https://discourse.processing.org/u/thesandrobrito)
#### Post date: [May 7, 2021, 10:44am UTC](https://discourse.processing.org/t/get-all-children-from-svg/29932/3 "2021-05-07T10:44:44Z")

</div>

How would it work if I am changing the original svg in the draw from a pool of svgs (which I didn’t specify as my requirement, but that’s the end goal)

---

<div class="post-metadata">

### Author: ![thesandrobrito](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/thesandrobrito/32/12634_2.png) [@thesandrobrito](https://discourse.processing.org/u/thesandrobrito)
#### Post date: [May 7, 2021, 10:47am UTC](https://discourse.processing.org/t/get-all-children-from-svg/29932/4 "2021-05-07T10:47:49Z")

</div>

> [@matheplica](#):
>
> ```auto
> sh = loadShape("bot1.svg");
> sh.disableStyle();
> children = sh.getChildren();
> 
> ```

Unfortunately didn’t work.

---

<div class="post-metadata">

### Author: ![matheplica](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/matheplica/32/21035_2.png) [@matheplica](https://discourse.processing.org/u/matheplica)
#### Post date: [May 7, 2021, 11:06am UTC](https://discourse.processing.org/t/get-all-children-from-svg/29932/5 "2021-05-07T11:06:05Z")

</div>

First question : put this code in a function than you use when you need  
Second question : it’s maybe the structure of your .svg that have too many node,  
if you can make it simplest as possible

---

<div class="post-metadata">

### Author: ![thesandrobrito](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/thesandrobrito/32/12634_2.png) [@thesandrobrito](https://discourse.processing.org/u/thesandrobrito)
#### Post date: [May 7, 2021, 11:15am UTC](https://discourse.processing.org/t/get-all-children-from-svg/29932/6 "2021-05-07T11:15:34Z")

</div>

Tried this simpler one [tram-01.svg - Google Drive](https://drive.google.com/file/d/10zI-01WYnTC5GJG4OFSXAhsNB-RgmXZG/view?usp=sharing) and still didn’t work.

---

<div class="post-metadata">

### Author: ![matheplica](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/matheplica/32/21035_2.png) [@matheplica](https://discourse.processing.org/u/matheplica)
#### Post date: [May 7, 2021, 11:23am UTC](https://discourse.processing.org/t/get-all-children-from-svg/29932/7 "2021-05-07T11:23:56Z")

</div>

This work for me :

```auto
PShape sh;
PShape[] children;
void setup() {
    size(256, 256);
    sh = loadShape("tram-01.svg");
    sh.disableStyle();
    children = sh.getChildren();
}
void draw() {
    for(int s=0; s<children.length; s++){
        shape(children[s], 0, 0);        
    }
}

```

---

<div class="post-metadata">

### Author: ![thesandrobrito](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/thesandrobrito/32/12634_2.png) [@thesandrobrito](https://discourse.processing.org/u/thesandrobrito)
#### Post date: [May 7, 2021, 11:33am UTC](https://discourse.processing.org/t/get-all-children-from-svg/29932/8 "2021-05-07T11:33:32Z")

</div>

> [@matheplica](#):
>
> ```auto
> PShape sh;
> PShape[] children;
> void setup() {
> size(256, 256);
> sh = loadShape("tram-01.svg");
> sh.disableStyle();
> children = sh.getChildren();
> }
> void draw() {
> for(int s=0; s<children.length; s++){
> shape(children[s], 0, 0);        
> }
> }
> 
> ```

I must’ve been doing something wrong. That works for me too!

---

<div class="post-metadata">

### Author: ![thesandrobrito](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/thesandrobrito/32/12634_2.png) [@thesandrobrito](https://discourse.processing.org/u/thesandrobrito)
#### Post date: [May 7, 2021, 11:36am UTC](https://discourse.processing.org/t/get-all-children-from-svg/29932/9 "2021-05-07T11:36:32Z")

</div>

I understand why it wasn’t working. This is a problem I’ve been having too. For some reason shape doesn’t allow size when drawing children.
