Aller au contenu
Code B1

Charger un fichier SVG

Un fichier SVG (un tracé vectoriel) se charge comme une image, avec loadImage(). On le charge dans setup() avec await, pour être sûr qu’il est arrivé avant de le dessiner. Cette page suit la syntaxe de p5.js 2.0 (voir Travailler avec des images pour async et await).

let monSvg;


async function setup() {
  monSvg = await loadImage("belgique.svg");
  createCanvas(windowWidth, windowHeight);
  imageMode(CENTER);   // on le place à partir de son centre
}


function draw() {
  background(255, 10);
  // largeur et hauteur (100, 70) : facultatives
  image(monSvg, mouseX, mouseY, 100, 70);
}

await attend que le fichier soit chargé. Quand draw() commence, monSvg contient bien le dessin, et image() peut l’afficher.

Le fond est presque transparent (background(255, 10)) : les anciennes positions s’effacent peu à peu, et le dessin laisse une traîne derrière la souris.

Et preload() ?

Section intitulée « Et preload() ? »

L’ancienne version de cette page chargeait le SVG dans preload(). C’était la méthode de p5.js 1.x, supprimée dans p5.js 2.0.

Avant — p5.js 1.x
function preload() {
  monSvg = loadImage("belgique.svg");
}


function setup() {
  createCanvas(windowWidth, windowHeight);
}
Maintenant — p5.js 2.0
async function setup() {
  monSvg = await loadImage("belgique.svg");
  createCanvas(windowWidth, windowHeight);
}

On déplace les lignes de preload() dans setup(), on ajoute await devant chaque loadImage(), et async devant function setup().