Images SVG dans p5.js : charger, redimensionner, conserver

Pour charger une image SVG dans p5.js 2.3.4, utilise await loadImage('emblem.svg') dans async function setup(), puis dessine l’image renvoyée avec image(). Sers la page et le SVG en HTTP. Garde le fichier SVG comme maître modifiable : cette méthode de chargement peint une p5.Image sur Canvas et ne fournit pas au sketch des chemins SVG modifiables. La référence actuelle de loadImage documente le modèle de chargement fondé sur les promesses.

Un chargement réussi ne répond qu’à la première question. Vérifie si l’ouverture reste transparente, si l’image est étirée et si ses dimensions chargées en pixels conviennent à la plus grande taille d’affichage. L’exemple ci-dessous utilise un losange arrondi original avec un trou et le dessine à 48, 120 et 240 pixels.

Choisis entre affichage d’image et géométrie source

Ce guide fixe p5.js 2.3.4 et le moteur de rendu P2D. Il utilise l’API asynchrone actuelle au lieu de copier une base avec preload() issue d’un tutoriel 1.x. createCanvas crée le Canvas du sketch et permet de choisir explicitement un moteur de rendu.

Dans cette version, l’implémentation du chargement d’images dessine l’image chargée par le navigateur dans le Canvas sous-jacent d’une p5.Image. Cela explique pourquoi garder l’extension .svg et agrandir l’affichage Canvas ne suffit pas à conserver une modification à base de chemins dans le sketch.

Enregistre un SVG original avec une vraie ouverture

Enregistre ce fichier sous emblem.svg. Il possède un chemin, aucun bitmap intégré, une taille déclarée de 120 × 120 et un viewBox correspondant. Le losange arrondi extérieur et le losange intérieur sont deux contours au sein de ce chemin. fill-rule="evenodd" laisse le centre non peint ; la référence de fill-rule de MDN explique comment cette règle détermine la zone remplie.

<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
  <path fill="#eb705a" fill-rule="evenodd" d="M60 8 Q66 8 72 14 L106 48 Q118 60 106 72 L72 106 Q60 118 48 106 L14 72 Q2 60 14 48 L48 14 Q54 8 60 8 Z M60 40 L80 60 L60 80 L40 60 Z"/>
</svg>

L’ouverture n’est pas un losange blanc placé sur la forme corail. Cette distinction compte lorsque le fond du sketch change. Si un fichier existant inclut un élément <image>, examine-le avec la liste de vérification des images matricielles intégrées avant de supposer que tout son dessin est composé de chemins modifiables.

Charge-le avec un setup asynchrone

Enregistre cette page complète sous example.html à côté d’emblem.svg, puis sers ce dossier avec un serveur HTTP local. Par exemple, lance python3 -m http.server 8000 dans le dossier et ouvre http://localhost:8000/example.html dans ton navigateur.

<!doctype html>
<html lang="en"><meta charset="utf-8"><title>p5.js SVG image size check</title>
<p>Original 120 × 120 SVG; Canvas destinations 48, 120 and 240 pixels.</p>
<pre id="status">Loading original SVG…</pre>
<script src="https://cdn.jsdelivr.net/npm/p5@2.3.4/lib/p5.js"></script>
<script>async function setup() {
  createCanvas(650, 300, P2D);
  pixelDensity(1);
  noLoop();
  background('#e7eeea');
  try {
    const art = await loadImage('emblem.svg');
    for (const [x, size] of [[20, 48], [110, 120], [280, 240]]) {
      image(art, x, 20, size, size * art.height / art.width);
    }
    const center = art.get(60, 60);
    const solid = art.get(60, 25);
    document.querySelector('#status').textContent = JSON.stringify({
      version: p5.VERSION, imageWidth: art.width, imageHeight: art.height,
      sourceCenterRGBA: center, sourceSolidRGBA: solid,
      canvasWidth: width, canvasHeight: height, pixelDensity: pixelDensity(),
      destinationSizes: [48, 120, 240]
    }, null, 2);
  } catch (error) {
    document.querySelector('#status').textContent = 'Image load failed: ' + error.message;
  }
}</script></html>

Le bloc d’état apparaît après le chargement et indique la version de p5, les dimensions de l’image chargée et deux échantillons de pixels sources. L’échantillon central vérifie la transparence ; l’échantillon corail vérifie une partie opaque de l’anneau. Les appels de dessin partagent une seule image chargée. Ils ne rechargent ni ne modifient le SVG entre les tailles d’affichage.

La référence d’image distingue le contenu source de la largeur et de la hauteur de destination. Ici, chaque hauteur de destination est calculée à partir d’art.height / art.width : une image de remplacement non carrée conserve donc aussi ses proportions. Garde les deux dimensions dans ce calcul lorsque tu changes la largeur d’affichage.

L’exemple définit pixelDensity(1) pour rendre sa comparaison Canvas explicite. Note la densité utilisée par ton sketch réel ; la valeur par défaut peut suivre celle de l’écran. Augmenter la densité du Canvas ne reconstruit pas des chemins déjà devenus une image chargée.

Ce qu’a montré le test dans le navigateur

Nous avons exécuté le fichier original et cette base dans Chrome avec p5.js 2.3.4, P2D et une densité de pixels de 1. L’image chargée mesurait 120 × 120. Son échantillon central était [0, 0, 0, 0], tandis qu’un échantillon corail intérieur était [235, 112, 90, 255]. Le fond clair du sketch restait visible à travers l’ouverture aux trois tailles de destination.

Ces observations décrivent ce fichier créé par nos soins, ce navigateur, cette version et ce moteur de rendu. Ce n’est pas un résultat de compatibilité pour tous les SVG exportés, filtres, polices ou environnements d’exécution tiers.

Source modifiable et affichage Canvas

Les données de chemin de la source sont restées intactes pendant tout le test. Dessiner l’image à 2× a changé son affichage, pas l’attribut d d’emblem.svg. Enregistre ce maître avec ton projet pour pouvoir préparer une autre image de livraison plus tard.

Corrige le symptôme observé

L’image n’apparaît jamais

Vérifie que l’URL du SVG se résout depuis la page servie et que loadImage() est terminé avant l’exécution d’image(). Le try/catch de la base place un échec de chargement dans le bloc d’état. Une image distante peut aussi échouer à cause des restrictions de sécurité du navigateur, comme le note la documentation de loadImage. Commence avec un fichier de même origine que tu contrôles, afin de distinguer un problème de chargement d’un problème de dessin.

Ouvre le SVG seul dans le navigateur. Si son aspect est aussi incorrect là, corrige d’abord la source. Un PNG renommé ne devient pas un document SVG, et une enveloppe SVG autour d’un bitmap ne crée pas les contours manquants.

L’image semble étirée

Compare les proportions de destination à art.width / art.height. Par exemple, dessiner une image carrée dans une destination de 240 × 120 la rend volontairement deux fois plus large par rapport à sa hauteur. Utilise le calcul de proportions de la base si l’étirement n’est pas voulu. Si la source elle-même contient trop d’espace vide, examine son plan de travail et son viewBox avant d’agrandir l’affichage pour compenser.

Les bords agrandis paraissent doux

Vérifie les dimensions de l’image chargée, pas seulement la taille du Canvas. Dans notre test, une image de 120 × 120 a été dessinée dans une destination de 240 × 240. Modifier ces arguments de destination ne relance pas un nouveau chargement des courbes du SVG.

Prépare un SVG de livraison avec des dimensions explicites adaptées à l’usage prévu, recharge-le et examine les valeurs art.width et art.height obtenues avant de l’accepter. Garde son système de coordonnées et ses contours sources intacts. Compare ensuite les plus petites et plus grandes tailles à l’écran : davantage de pixels chargés ne rendront pas une minuscule ouverture lisible si l’affichage final est trop petit.

Si ton sketch nécessite des opérations géométriques plutôt que de peindre des images, prévois cela séparément. Le guide de Canvas Path2D traite du travail avec les données de chemin, tandis que le guide SVG de PixiJS compare les voies géométriques et texturées de ce moteur. Leurs API ne sont pas interchangeables avec loadImage() de p5.

Le centre est blanc au lieu d’être transparent

Examine le SVG original pour repérer un fond peint ou une forme intérieure blanche. Dans cette source, le contour evenodd laisse un trou, et l’alpha central chargé était nul. Recommence la vérification sur un fond de sketch contrasté avec ton propre fichier ; une page d’aperçu blanche peut cacher la différence.

Sépare l’export Canvas du maître SVG

La référence standard de saveCanvas répertorie les sorties d’image PNG, WebP et JPG. Enregistrer le Canvas peint via cette API ne récupère pas les chemins SVG originaux. Garde emblem.svg séparément si tu dois modifier les contours plus tard ou livrer un fichier à base de chemins. Une capture d’un Canvas d’apparence lisse ne démontre pas un processus d’export SVG modifiable.

PerfectVector intervient en amont lorsque ton illustration n’existe qu’en PNG ou JPG plat et que tu as besoin de contours sources à modifier. Convertis l’image en SVG, examine son contour et ses espaces négatifs dans un éditeur SVG, puis répète les vérifications réelles de chargement et de taille dans p5. Utilise directement un SVG propre existant. La vectorisation ne change pas l’API d’images de p5 et ne transforme pas sa sortie Canvas en document de chemins SVG. Le guide général de vectorisation explique cette étape de préparation de la source.

Garde le maître, note la version de p5 et les dimensions chargées, puis n’accepte la ressource qu’une fois son ouverture et ses bords adaptés aux tailles utilisées par ton sketch.

Questions fréquentes

p5.js peut-il charger un SVG avec loadImage ? Oui. Cet exemple p5.js 2.3.4 P2D charge un SVG original avec await loadImage dans un setup asynchrone. Teste l’apparence et les dimensions chargées de ton propre fichier au lieu de considérer un chargement réussi comme une compatibilité SVG complète.

Une image SVG chargée dans p5 reste-t-elle modifiable sous forme de chemins ? La méthode de chargement d’image renvoie une p5.Image et la peint sur Canvas. Garde le SVG original séparément pour modifier ses chemins sources. L’affichage d’image dans Canvas ne fournit pas de DOM SVG modifiable pour le dessin chargé.

Pourquoi mon SVG p5 paraît-il flou lorsqu’il est agrandi ? Compare les dimensions de l’image chargée à celles de destination. Notre image chargée de 120 × 120 paraissait plus douce à 240 × 240. Prépare une source de livraison à la bonne taille, recharge-la et examine le résultat réel.

saveCanvas exporte-t-il le SVG original ? L’API standard de saveCanvas documente des sorties PNG, WebP et JPG. Conserve le maître SVG original ou vérifie un processus distinct de rendu et d’export SVG pour une sortie à base de chemins.

Sources

1. p5.js loadImage — Documente le chargement d’images fondé sur les promesses et les restrictions des navigateurs.
2. Version p5.js 2.3.4 — Identifie la version fixe et le script CDN officiel.
3. p5.js createCanvas — Documente la création du Canvas et le choix du moteur de rendu.
4. Source du chargement d’images de p5.js 2.3.4 — Montre l’image chargée dessinée dans le Canvas sous-jacent de p5.Image.
5. MDN fill-rule — Explique comment evenodd détermine la zone remplie d’un chemin composé.
6. p5.js image — Définit le placement de l’image et les dimensions de destination.
7. p5.js pixelDensity — Documente la densité de pixels du sketch et sa valeur par défaut dépendante de l’écran.
8. p5.js saveCanvas — Répertorie les formats standard d’export d’image Canvas.