# SVG width and height

**URL:** <https://discourse.processing.org/t/svg-width-and-height/45199>\
**Category:** Coding Questions\
**Created:** [October 18, 2024, 5:09pm UTC](https://discourse.processing.org/t/svg-width-and-height/45199 "2024-10-18T17:09:57Z")\
**Posts on this page:** 4\
**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:** [October 18, 2024, 5:09pm UTC](https://discourse.processing.org/t/svg-width-and-height/45199/1 "2024-10-18T17:09:57Z")

</div>

Hello i’m currently playing with few svg loading in a an array.  
The svgs have different height but when i use it, they have all the same size! the bigger are scaled to have the same height as the smaller!

is it a bug?  
there is no scale instruction

```auto
PShape[] feuilles; // tableau pour stocker les SVGs
int nombreFeuilles = 5; // nombre de fichiers SVG à charger
PVector[] positions; // tableau pour stocker les positions

void setup() {
  size(800, 600);
  
  // Initialisation des tableaux
  feuilles = new PShape[nombreFeuilles];
  positions = new PVector[nombreFeuilles];
  
  // Chargement des fichiers SVG
  for (int i = 0; i < nombreFeuilles; i++) {
    String filename = "feuille_2_" + i + ".svg";
    feuilles[i] = loadShape(filename);
    
    // Génération de positions aléatoires dans la fenêtre
    float x = random(width);
    float y = random(height);
    positions[i] = new PVector(x, y);
  }
}

void draw() {
  background(255);
  
  // Affichage de chaque feuille
  for (int i = 0; i < nombreFeuilles; i++) {
    pushMatrix();
    translate(positions[i].x, positions[i].y);
    shape(feuilles[i], 0, 0);
    popMatrix();
  }
}

```

 ![feuilles](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/4/747b3b57d3316308860f1df583a60609856269c4.png)  
 ![Capture d’écran 2024-10-18 à 19.08.23](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/9/0/90007e95dd9169e911a9db4662849026e4864dc6.png)

---

<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:** [October 18, 2024, 5:18pm UTC](https://discourse.processing.org/t/svg-width-and-height/45199/2 "2024-10-18T17:18:26Z")

</div>

OK i found a way, by using resetMatrix at loadingTime.  
nevermind for me it’s a strange behavior.  
It should not scale at load!

```auto
feuilles[i] = loadShape(filename);
feuilles[i].resetMatrix();

```

 ![Capture d’écran 2024-10-18 à 19.16.11](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/9/1/915ec670d64b042764caaf692deaa2f2c41f6506.jpeg)

---

<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:** [October 18, 2024, 6:41pm UTC](https://discourse.processing.org/t/svg-width-and-height/45199/3 "2024-10-18T18:41:26Z")

</div>

But there is a pb.  
all svgs are 100 high!

```auto
for (int i=0; i<svgShape.length; i++) {
    svgShape[i] = loadShape("feuille_2_"+i+".svg");
    svgShape[i].resetMatrix();
    println(svgShape[i].height); // all are 100 high (but they are not
  }

```

when editing the svg file there is this!

```auto
<svg width="100%" height="100%" viewBox="0 0 228 381" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">

```

Damned! the `height` and `width` are 100% not 100px!!!  
if i edit my file, size are good and behavior is as expected

 ![drawing_20241018203839](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/7/a756e27e8af37c498dc442adeaaf15547948ac05.jpeg)

i do not see any advice about the height and width in the reference… perhaps it should!

---

<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:** [October 19, 2024, 10:05am UTC](https://discourse.processing.org/t/svg-width-and-height/45199/4 "2024-10-19T10:05:04Z")

</div>

i ai.write a small bash script to check and modify the svg to have width and height in px and not %

and emebd in an Automator app to drag and drop svg file (a droplet) on the app.

```auto
# Créer un fichier temporaire pour stocker les résultats
temp_file=$(mktemp)

for f in "$@"
do
	filename="${f##*/}"
    echo "##########################" >> "$temp_file"
    echo "-> $filename" >> "$temp_file"
    echo "##########################" >> "$temp_file"

    # Vérifie si width ou height sont différents de 100%
    width=$(grep -o 'width="[^"]*"' "$f" | cut -d'"' -f2)
    height=$(grep -o 'height="[^"]*"' "$f" | cut -d'"' -f2)

    # Vérifie si les valeurs se terminent par px
    if [["$width" == *"px"]] && [["$height" == *"px"]]; then
        echo "Les valeurs de width et height sont en px, je n'ai rien modifié" >> "$temp_file"
    else
        if ["$width" == "100%"] && ["$height" == "100%"]; then
            # Si c'est le cas, extraire les 3e et 4e valeurs du viewBox
            viewbox=$(grep -o 'viewBox="[^"]*"' "$f" | cut -d'"' -f2)
            if [! -z "$viewbox"]; then
                # Sépare les valeurs du viewBox
                IFS=' ' read -r -a values <<< "$viewbox"
                if [${#values[@]} -ge 4 ]; then
					echo "--------------------" >> "$temp_file"
                    echo "Valeurs actuelles :" >> "$temp_file"
					echo "--------------------" >> "$temp_file"
                    echo "| width: $width" >> "$temp_file"
                    echo "| height: $height" >> "$temp_file"
                    
                    # Création d'une copie de sauvegarde
                    cp "$f" "${f}.backup"
                    
                    # Remplacer les valeurs de width et height avec les valeurs du viewBox + px
                    sed -i '' "s/width=\"[^\"]*\"/width=\"${values[2]}px\"/g" "$f"
                    sed -i '' "s/height=\"[^\"]*\"/height=\"${values[3]}px\"/g" "$f"
                    
					echo "--------------------" >> "$temp_file"
                    echo "Nouvelles valeurs appliquées :" >> "$temp_file"
					echo "--------------------" >> "$temp_file"
                    echo "| width: ${values[2]}px" >> "$temp_file"
                    echo "| height: ${values[3]}px" >> "$temp_file"
					echo "--------------------" >> "$temp_file"
                    echo "Une copie de sauvegarde a été créée : ${filename}.backup" >> "$temp_file"
                else
                    echo "Le viewBox ne contient pas assez de valeurs" >> "$temp_file"
                fi
            else
                echo "Aucun viewBox trouvé dans le fichier" >> "$temp_file"
            fi
        else
            echo "width et/ou height ne sont pas à 100%" >> "$temp_file"
        fi
    fi
    echo "" >> "$temp_file"
done

# Lire le contenu du fichier temporaire
results=$(cat "$temp_file")

# Supprimer le fichier temporaire
rm "$temp_file"

# Afficher les résultats dans une boîte de dialogue
osascript <<EOF
tell application "System Events"
    activate
    display dialog "$results" buttons {"OK"} default button "OK" with title "Résultats de l'analyse SVG"
end tell
EOF

```

Hope it will help