Imágenes SVG en p5.js: carga, escala y conserva el origen

Para cargar una imagen SVG en p5.js 2.3.4, usa await loadImage('emblem.svg') dentro de async function setup() y dibuja después la imagen devuelta con image(). Sirve la página y el SVG mediante HTTP. Conserva el archivo SVG como maestro editable: esta vía de carga pinta un p5.Image sobre Canvas y no proporciona al sketch trazados SVG editables. La referencia actual de loadImage documenta el patrón de carga basado en promesas.

Que la carga funcione solo responde a la primera pregunta. Comprueba si la abertura sigue siendo transparente, si la imagen se estira y si sus dimensiones en píxeles cargadas son adecuadas para el mayor tamaño de visualización. El ejemplo siguiente usa un rombo redondeado original con un hueco y lo dibuja a 48, 120 y 240 píxeles.

Elige entre mostrar una imagen y usar geometría de origen

Esta guía fija p5.js 2.3.4 y el renderizador P2D. Usa la API asíncrona actual en lugar de copiar una plantilla con preload() de un tutorial de la versión 1.x. createCanvas crea el Canvas del sketch y permite elegir un renderizador explícitamente.

En esta versión, la implementación de carga de imágenes dibuja la imagen cargada por el navegador en el Canvas subyacente de un p5.Image. Eso explica por qué conservar la extensión .svg y ampliar la visualización de Canvas no basta para mantener la edición basada en trazados dentro del sketch.

Guarda un SVG original con una abertura real

Guarda este archivo como emblem.svg. Tiene un trazado, ningún mapa de bits incrustado, un tamaño declarado de 120 × 120 y un viewBox correspondiente. El rombo redondeado exterior y el rombo interior son dos contornos de ese mismo trazado. fill-rule="evenodd" deja el centro sin pintar; la referencia de fill-rule de MDN explica cómo esa regla determina el área rellena.

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

La abertura no es un rombo blanco colocado sobre la forma coral. Esta diferencia importa cuando cambia el fondo del sketch. Si un archivo existente incluye un elemento <image>, revísalo con la lista de comprobación de ráster incrustado antes de suponer que todo su diseño está formado por trazados editables.

Cárgalo con setup asíncrono

Guarda esta página completa como example.html junto a emblem.svg y sirve la carpeta con un servidor HTTP local. Por ejemplo, ejecuta python3 -m http.server 8000 en la carpeta y abre http://localhost:8000/example.html en el navegador.

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

El bloque de estado aparece después de la carga e informa de la versión de p5, las dimensiones de la imagen cargada y dos muestras de píxeles del origen. La muestra central comprueba la transparencia; la muestra coral comprueba una parte opaca del anillo. Las llamadas de dibujo comparten una sola imagen cargada. No vuelven a cargar ni modifican el SVG entre tamaños de visualización.

La referencia de image distingue el contenido de origen del ancho y alto de destino. Aquí cada altura de destino se calcula a partir de art.height / art.width, por lo que una imagen de sustitución no cuadrada también conserva sus proporciones. Mantén ambas dimensiones en ese cálculo cuando cambies el ancho de visualización.

El ejemplo establece pixelDensity(1) para que la comparación de Canvas sea explícita. Registra la densidad que usa tu sketch real; el valor predeterminado puede depender de la pantalla. Aumentar la densidad de Canvas no reconstruye trazados que ya se han convertido en una imagen cargada.

Qué mostró la prueba en el navegador

Ejecutamos el archivo original y esta plantilla en Chrome con p5.js 2.3.4, P2D y densidad de píxeles 1. La imagen cargada medía 120 × 120. Su muestra central era [0, 0, 0, 0], mientras que una muestra coral interior era [235, 112, 90, 255]. El fondo claro del sketch siguió visible a través de la abertura en los tres tamaños de destino.

Estas observaciones describen este archivo creado por nosotros, este navegador, esta versión y este renderizador. No son un resultado de compatibilidad para todos los SVG exportados, filtros, fuentes o entornos de ejecución de terceros.

Origen editable y visualización de Canvas

Los datos de los trazados de origen no cambiaron durante la prueba. Dibujar la imagen a 2× afectó a su visualización, no al atributo d de emblem.svg. Guarda ese maestro con tu proyecto para poder preparar otra imagen de entrega más adelante.

Corrige el síntoma que observas

La imagen nunca aparece

Comprueba que la URL del SVG se resuelva desde la página servida y que loadImage() haya terminado antes de ejecutar image(). El try/catch de la plantilla coloca los fallos de carga en el bloque de estado. Una imagen remota también puede fallar por restricciones de seguridad del navegador, como indica la documentación de loadImage. Empieza con un archivo del mismo origen que controles para separar un problema de carga de uno del diseño.

Abre el SVG por sí solo en el navegador. Si allí también se ve mal, corrige primero el origen. Un PNG renombrado no se convierte en un documento SVG, y un contenedor SVG alrededor de un mapa de bits no crea los contornos que faltan.

La imagen parece estirada

Compara la proporción de destino con art.width / art.height. Por ejemplo, dibujar una imagen cuadrada en un destino de 240 × 120 la hace deliberadamente el doble de ancha en relación con su altura. Usa el cálculo de proporciones de la plantilla si no quieres estirarla. Si el propio origen tiene demasiado espacio vacío, revisa su mesa de trabajo y su viewBox antes de ampliar la visualización para compensarlo.

Los bordes ampliados se ven suaves

Revisa las dimensiones de la imagen cargada, no solo el tamaño del Canvas. En nuestra prueba, una imagen de 120 × 120 se dibujó en un destino de 240 × 240. Cambiar esos argumentos de destino no vuelve a procesar las curvas del SVG mediante una nueva carga de imagen.

Prepara un SVG de entrega con dimensiones explícitas adecuadas para el uso previsto, vuelve a cargarlo e inspecciona los art.width y art.height resultantes antes de aceptarlo. Mantén intactos su sistema de coordenadas y sus contornos de origen. Después compara los tamaños en pantalla más pequeño y más grande: más píxeles cargados no pueden hacer legible una abertura diminuta si la visualización final es demasiado pequeña.

Si tu sketch necesita operaciones geométricas en lugar de pintar imágenes, planifícalo por separado. La guía de Canvas Path2D cubre el trabajo con datos de trazados, mientras que la guía de SVG en PixiJS compara las vías de geometría y textura de ese motor. Sus API no son intercambiables con loadImage() de p5.

El centro es blanco en lugar de transparente

Revisa el SVG original en busca de un fondo pintado o una forma interior blanca. En este origen, el contorno evenodd deja un hueco y el alfa central cargado era cero. Repite la comprobación sobre un fondo de sketch contrastante con tu archivo; una página de vista previa blanca puede ocultar la diferencia.

Separa la exportación de Canvas del maestro SVG

La referencia estándar de saveCanvas enumera la salida de imágenes PNG, WebP y JPG. Guardar el Canvas pintado mediante esa API no recupera los trazados SVG originales. Conserva emblem.svg por separado cuando necesites futuras ediciones del contorno o un archivo de entrega basado en trazados. Una captura de un Canvas que parece suave no puede demostrar un flujo de exportación SVG editable.

PerfectVector encaja en la fase previa cuando tu ilustración solo existe como un PNG o JPG plano y necesitas contornos de origen para editar. Convierte la imagen a SVG, revisa su contorno y su espacio negativo en un editor SVG, y repite después las comprobaciones reales de carga y tamaño en p5. Usa directamente un SVG limpio existente. El calco no cambia la API de imágenes de p5 ni convierte su salida de Canvas en un documento de trazados SVG. La guía general de vectorización explica esa etapa de preparación del origen.

Conserva el maestro, registra la versión de p5 y las dimensiones cargadas, y acepta el recurso solo después de que su abertura y sus bordes funcionen a los tamaños que usa tu sketch.

Preguntas frecuentes

¿Puede p5.js cargar un SVG con loadImage? Sí. Este ejemplo de p5.js 2.3.4 con P2D carga un SVG original mediante await loadImage dentro de setup asíncrono. Prueba la apariencia y las dimensiones cargadas de tu archivo en lugar de considerar una carga correcta como compatibilidad SVG completa.

¿Una imagen SVG cargada en p5 sigue siendo editable como trazados? La vía de carga de imágenes devuelve un p5.Image y lo pinta sobre Canvas. Conserva el SVG original por separado para editar sus trazados de origen. Mostrar imágenes en Canvas no proporciona un DOM SVG editable del diseño cargado.

¿Por qué mi SVG en p5 se ve borroso al ampliarlo? Compara las dimensiones de la imagen cargada con las de destino. Nuestra imagen cargada de 120 × 120 se veía más suave a 240 × 240. Prepara un origen de entrega del tamaño adecuado, vuelve a cargarlo y revisa el resultado real.

¿saveCanvas exporta el SVG original? La API estándar de saveCanvas documenta salidas PNG, WebP y JPG. Conserva el maestro SVG original o verifica un flujo separado de renderizado y exportación SVG para obtener una salida basada en trazados.

Fuentes

1. p5.js loadImage — Documenta la carga de imágenes basada en promesas y las restricciones del navegador.
2. Versión p5.js 2.3.4 — Identifica la versión fija y el script CDN oficial.
3. p5.js createCanvas — Documenta la creación de Canvas y la selección del renderizador.
4. Código de carga de imágenes de p5.js 2.3.4 — Muestra cómo se dibuja la imagen cargada en el Canvas subyacente de p5.Image.
5. MDN fill-rule — Explica cómo evenodd determina el área rellena de un trazado compuesto.
6. p5.js image — Define la colocación de imágenes y el tamaño de destino.
7. p5.js pixelDensity — Documenta la densidad de píxeles del sketch y su valor predeterminado dependiente de la pantalla.
8. p5.js saveCanvas — Enumera los formatos estándar de exportación de imágenes de Canvas.