SVG-Bilder in p5.js: Laden, skalieren und Quelle behalten

Um ein SVG-Bild in p5.js 2.3.4 zu laden, verwende await loadImage('emblem.svg') innerhalb von async function setup() und zeichne das zurückgegebene Bild anschließend mit image(). Stelle Seite und SVG über HTTP bereit. Behalte die SVG-Datei als bearbeitbare Masterdatei. Dieser Bildladeweg zeichnet ein p5.Image auf Canvas und gibt dem Sketch keine bearbeitbaren SVG-Pfade. Die aktuelle loadImage-Referenz dokumentiert das Promise-basierte Lademuster.

Erfolgreiches Laden beantwortet nur die erste Frage. Prüfe, ob die Öffnung transparent bleibt, ob das Bild verzerrt wird und ob die geladenen Pixelabmessungen für die größte Darstellungsgröße ausreichen. Das folgende Beispiel verwendet eine selbst erstellte abgerundete Raute mit Loch und zeichnet sie mit 48, 120 und 240 Pixeln.

Wähle zwischen Bilddarstellung und Quellgeometrie

Dieser Leitfaden legt p5.js 2.3.4 und den Renderer P2D fest. Er verwendet die aktuelle asynchrone API, statt eine preload()-Vorlage aus einem 1.x-Tutorial zu kopieren. createCanvas erstellt das Canvas des Sketches und unterstützt eine ausdrückliche Rendererwahl.

In dieser Version zeichnet die Implementierung zum Laden von Bildern das geladene Browserbild in das zugrunde liegende Canvas eines p5.Image. Das erklärt, warum die Endung .svg beizubehalten und die Canvas-Darstellung zu vergrößern nicht ausreicht, um pfadbasierte Bearbeitung innerhalb des Sketches zu erhalten.

Speichere ein eigenes SVG mit einer echten Öffnung

Speichere diese Datei als emblem.svg. Sie hat einen Pfad, keine eingebettete Bitmap, eine angegebene Größe von 120 × 120 und eine passende viewBox. Die äußere abgerundete Raute und die innere Raute sind zwei Konturen innerhalb dieses Pfads. fill-rule="evenodd" lässt die Mitte ungefüllt. MDNs fill-rule-Referenz erklärt, wie diese Regel den gefüllten Bereich bestimmt.

<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>

Die Öffnung ist keine weiße Raute, die über die korallfarbene Form gelegt wurde. Dieser Unterschied ist wichtig, wenn sich der Sketchhintergrund ändert. Enthält eine vorhandene Datei ein <image>-Element, prüfe sie mit der Checkliste für eingebettete Rasterbilder, bevor du annimmst, ihre gesamte Grafik bestehe aus bearbeitbaren Pfaden.

Lade das Bild mit asynchronem setup

Speichere diese vollständige Seite als example.html neben emblem.svg und stelle den Ordner über einen lokalen HTTP-Server bereit. Führe beispielsweise im Ordner python3 -m http.server 8000 aus und öffne http://localhost:8000/example.html im Browser.

<!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>

Der Statusblock erscheint nach dem Laden und meldet die p5-Version, die geladenen Bildabmessungen und zwei Quellpixelproben. Die mittige Probe prüft Transparenz; die korallfarbene Probe prüft einen undurchsichtigen Teil des Rings. Die Zeichenaufrufe teilen sich ein geladenes Bild. Sie laden oder ändern das SVG nicht zwischen den Darstellungsgrößen.

Die image-Referenz unterscheidet Quellinhalt von Zielbreite und -höhe. Hier wird jede Zielhöhe aus art.height / art.width berechnet, sodass auch ein nicht quadratisches Ersatzbild seine Proportionen behält. Berücksichtige beide Abmessungen in dieser Rechnung, wenn du die Darstellungsbreite änderst.

Das Beispiel setzt pixelDensity(1), um den Canvas-Vergleich eindeutig zu machen. Notiere die Dichte deines tatsächlichen Sketches. Der Standard kann vom Display abhängen. Eine höhere Canvas-Dichte rekonstruiert keine Pfade, die bereits zu einem geladenen Bild geworden sind.

Was der Browsertest zeigte

Wir führten die ursprüngliche Datei und diese Vorlage in Chrome mit p5.js 2.3.4, P2D und Pixeldichte 1 aus. Das geladene Bild war 120 × 120 groß. Seine mittige Probe war [0, 0, 0, 0], eine innere korallfarbene Probe dagegen [235, 112, 90, 255]. Der helle Sketchhintergrund blieb bei allen drei Zielgrößen durch die Öffnung sichtbar.

Diese Beobachtungen beschreiben diese selbst erstellte Datei, diesen Browser, diese Version und diesen Renderer. Sie sind kein Kompatibilitätsergebnis für jedes exportierte SVG, jeden Filter, jede Schrift oder jede Drittanbieter-Laufzeit.

Bearbeitbare Quelle und Canvas-Darstellung

Die Pfaddaten der Quelle blieben während des gesamten Tests unverändert. Das Zeichnen mit 2× beeinflusste die Darstellung, nicht das d-Attribut in emblem.svg. Speichere diese Masterdatei mit deinem Projekt, damit du später ein anderes Ausgabebild vorbereiten kannst.

Behebe das beobachtete Symptom

Das Bild erscheint nie

Prüfe, ob sich die SVG-URL von der bereitgestellten Seite aus auflösen lässt und ob loadImage() abgeschlossen ist, bevor image() läuft. Das try/catch der Vorlage schreibt einen Ladefehler in den Statusblock. Auch ein entferntes Bild kann durch Sicherheitsbeschränkungen des Browsers scheitern, wie die loadImage-Dokumentation anmerkt. Beginne mit einer von dir kontrollierten Datei derselben Herkunft, um ein Ladeproblem von einem Grafikproblem zu trennen.

Öffne das SVG allein im Browser. Sieht es dort ebenfalls falsch aus, repariere zuerst die Quelle. Ein umbenanntes PNG wird nicht zum SVG-Dokument, und eine SVG-Hülle um eine Bitmap erzeugt keine fehlenden Konturen.

Das Bild wirkt verzerrt

Vergleiche das Zielverhältnis mit art.width / art.height. Wird beispielsweise ein quadratisches Bild in ein Ziel von 240 × 120 gezeichnet, wird es bewusst im Verhältnis zur Höhe doppelt so breit. Verwende die Verhältnisrechnung der Vorlage, wenn das nicht beabsichtigt ist. Hat die Quelle selbst zu viel Leerraum, prüfe Zeichenfläche und viewBox, bevor du zum Ausgleich die Darstellung vergrößerst.

Vergrößerte Kanten wirken weich

Prüfe die geladenen Bildabmessungen, nicht nur die Canvas-Größe. In unserem Test wurde ein 120 × 120 großes Bild in ein Ziel von 240 × 240 gezeichnet. Änderungen an diesen Zielargumenten verarbeiten die SVG-Kurven nicht durch einen neuen Ladevorgang erneut.

Bereite ein Ausgabe-SVG mit ausdrücklich angegebenen, zum Verwendungszweck passenden Abmessungen vor. Lade es erneut und prüfe das entstandene art.width und art.height, bevor du es akzeptierst. Behalte Koordinatensystem und Quellkonturen unverändert. Vergleiche danach die kleinste und größte Bildschirmgröße. Mehr geladene Pixel machen eine winzige Öffnung nicht erkennbar, wenn die endgültige Darstellung zu klein ist.

Braucht dein Sketch Geometrieoperationen statt Bilddarstellung, plane das separat. Der Leitfaden zu Canvas Path2D behandelt das Arbeiten mit Pfaddaten, während der PixiJS-SVG-Leitfaden die Geometrie- und Texturwege dieser Engine vergleicht. Ihre APIs sind nicht mit p5s loadImage() austauschbar.

Die Mitte ist weiß statt transparent

Prüfe das ursprüngliche SVG auf einen gemalten Hintergrund oder eine weiße innere Form. In dieser Quelle lässt die evenodd-Kontur ein Loch, und das geladene Alpha in der Mitte war null. Wiederhole die Prüfung mit deiner Datei auf einem kontrastierenden Sketchhintergrund. Eine weiße Vorschauseite kann den Unterschied verbergen.

Halte Canvas-Export und SVG-Masterdatei getrennt

Die standardmäßige saveCanvas-Referenz nennt PNG, WebP und JPG als Bildausgaben. Das Speichern des bemalten Canvas über diese API stellt die ursprünglichen SVG-Pfade nicht wieder her. Behalte emblem.svg separat, wenn du später Konturen bearbeiten oder eine pfadbasierte Datei liefern musst. Ein Screenshot eines glatt aussehenden Canvas belegt keinen bearbeitbaren SVG-Exportablauf.

PerfectVector passt als vorgelagerter Schritt, wenn deine Illustration nur als flaches PNG oder JPG existiert und du Quellkonturen zum Bearbeiten brauchst. Konvertiere das Bild in SVG, prüfe Umriss und Negativraum in einem SVG-Editor und wiederhole dann die tatsächlichen Lade- und Größenprüfungen in p5. Verwende ein vorhandenes sauberes SVG direkt. Nachzeichnen ändert weder p5s Bild-API noch verwandelt es dessen Canvas-Ausgabe in ein SVG-Pfaddokument. Der umfassendere Vektorisierungsleitfaden erklärt diesen Schritt der Quellvorbereitung.

Behalte die Masterdatei, notiere p5-Version und geladene Abmessungen und akzeptiere das Asset erst, wenn Öffnung und Kanten in den vom Sketch verwendeten Größen funktionieren.

Häufige Fragen

Kann p5.js ein SVG mit loadImage laden? Ja. Dieses p5.js-2.3.4-P2D-Beispiel lädt ein selbst erstelltes SVG mit await loadImage innerhalb von asynchronem setup. Prüfe Aussehen und geladene Abmessungen deiner eigenen Datei, statt einen erfolgreichen Ladevorgang als vollständige SVG-Kompatibilität zu betrachten.

Bleibt ein geladenes p5-SVG-Bild als Pfade bearbeitbar? Der Bildladeweg gibt ein p5.Image zurück und zeichnet es auf Canvas. Bewahre das ursprüngliche SVG separat zur Bearbeitung der Quellpfade auf. Die Canvas-Bilddarstellung stellt kein bearbeitbares SVG-DOM für die geladene Grafik bereit.

Warum sieht mein p5-SVG beim Vergrößern unscharf aus? Vergleiche die geladenen Bildabmessungen mit den Zielabmessungen. Unser geladenes Bild von 120 × 120 sah bei 240 × 240 weicher aus. Bereite eine passend dimensionierte Ausgabequelle vor, lade sie erneut und prüfe das tatsächliche Ergebnis.

Exportiert saveCanvas das ursprüngliche SVG? Die standardmäßige saveCanvas-API dokumentiert PNG-, WebP- und JPG-Ausgabe. Bewahre die ursprüngliche SVG-Masterdatei auf oder prüfe für eine pfadbasierte Ausgabe einen separaten SVG-Rendering- und Exportablauf.

Quellen

1. p5.js loadImage – Dokumentiert Promise-basiertes Laden und Browserbeschränkungen.
2. p5.js-Release 2.3.4 – Benennt die festgelegte Version und das offizielle CDN-Skript.
3. p5.js createCanvas – Dokumentiert Canvas-Erstellung und Rendererwahl.
4. p5.js-2.3.4-Quellcode zum Laden von Bildern – Zeigt, wie das geladene Bild in das zugrunde liegende Canvas von p5.Image gezeichnet wird.
5. MDN fill-rule – Erklärt, wie evenodd den gefüllten Bereich eines zusammengesetzten Pfads bestimmt.
6. p5.js image – Definiert Bildplatzierung und Zielgrößen.
7. p5.js pixelDensity – Dokumentiert die Pixeldichte des Sketches und ihren displayabhängigen Standard.
8. p5.js saveCanvas – Listet die Standardformate für den Canvas-Bildexport auf.