SVG width and height

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

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();
  }
}


1 Like

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

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

1 Like

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

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!

<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

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

1 Like

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.

# 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

1 Like