> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# Immagini SVG in p5.js: caricale e conserva la sorgente

> Carica un SVG in p5.js 2.3.4 con setup asincrono, controlla l’apertura trasparente a tre dimensioni Canvas e separa i tracciati modificabili dall’immagine visualizzata.

Source: https://perfectvector.com/it/blog/p5js-svg-artwork

Language: it
Author: Irene Kim
Published: 2026-10-02T08:00:00+09:00
Updated: 2026-10-02T08:00:00+09:00

Per caricare un’immagine SVG in p5.js 2.3.4, usa `await loadImage('emblem.svg')` dentro `async function setup()`, poi disegna l’immagine restituita con `image()`. Servi pagina e SVG tramite HTTP. Conserva il file SVG come master modificabile: questo percorso di caricamento dipinge una `p5.Image` sul Canvas e non fornisce allo sketch tracciati SVG modificabili. L’attuale [riferimento loadImage](https://p5js.org/reference/p5/loadImage/) documenta il modello di caricamento basato su Promise.

Un caricamento riuscito risponde solo alla prima domanda. Controlla se l’apertura resta trasparente, se l’immagine è deformata e se le dimensioni in pixel caricate sono adatte alla dimensione di visualizzazione più grande. L’esempio seguente usa un nostro rombo arrotondato con un foro e lo disegna a 48, 120 e 240 pixel.

## Scegli tra visualizzazione dell’immagine e geometria sorgente

| Cosa ti serve                                             | Cosa conservare o controllare                                           |
| --------------------------------------------------------- | ----------------------------------------------------------------------- |
| Dipingere un’illustrazione SVG esistente in uno sketch p5 | Caricala come immagine ed esamina il risultato Canvas                   |
| Cambiare i contorni sorgente dell’illustrazione           | Conserva e modifica separatamente l’SVG originale                       |
| Disegnare l’immagine a nuove dimensioni                   | Mantieni le proporzioni e controlla le dimensioni caricate              |
| Esportare un SVG basato su tracciati                      | Scegli e verifica un procedimento separato di geometria o rendering SVG |

Questa guida fissa [p5.js 2.3.4](https://github.com/processing/p5.js/releases/tag/v2.3.4) e il renderer `P2D`. Usa l’API asincrona attuale invece di copiare un esempio iniziale con `preload()` da un tutorial 1.x. [createCanvas](https://p5js.org/reference/p5/createCanvas/) crea il Canvas dello sketch e consente una scelta esplicita del renderer.

In questa versione, l’[implementazione del caricamento immagini](https://github.com/processing/p5.js/blob/v2.3.4/src/image/loading_displaying.js) disegna l’immagine caricata dal browser nel Canvas interno di una `p5.Image`. Questo spiega perché conservare l’estensione `.svg` e ingrandire la visualizzazione Canvas non basta a mantenere la modifica dei tracciati dentro lo sketch.

## Salva un SVG originale con una vera apertura

Salva questo file come `emblem.svg`. Ha un tracciato, nessuna bitmap incorporata, dimensioni dichiarate di 120 × 120 e un `viewBox` corrispondente. Il rombo esterno arrotondato e quello interno sono due contorni nello stesso tracciato. `fill-rule="evenodd"` lascia il centro non dipinto; il [riferimento MDN su fill-rule](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) spiega come questa regola determina l’area riempita.

```svg
<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’apertura non è un rombo bianco appoggiato sulla forma corallo. Questa distinzione conta quando cambia lo sfondo dello sketch. Se un file esistente include un elemento `<image>`, esaminalo con la [lista di controllo per raster incorporati](https://perfectvector.com/it/blog/svg-contains-raster-image) prima di presumere che tutta la grafica sia composta da tracciati modificabili.

## Caricalo con setup asincrono

Salva questa pagina completa come `example.html` accanto a `emblem.svg`, poi servi la cartella con un server HTTP locale. Per esempio, esegui `python3 -m http.server 8000` nella cartella e apri `http://localhost:8000/example.html` nel browser.

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

Il blocco di stato appare dopo il caricamento e riporta versione p5, dimensioni dell’immagine caricata e due campioni di pixel sorgente. Il campione centrale controlla la trasparenza; quello corallo controlla una parte opaca dell’anello. Le chiamate di disegno condividono una sola immagine caricata. Non ricaricano o modificano l’SVG tra le dimensioni di visualizzazione.

Il [riferimento image](https://p5js.org/reference/p5/image/) distingue il contenuto sorgente da larghezza e altezza di destinazione. Qui ogni altezza di destinazione è calcolata da `art.height / art.width`, quindi anche un’immagine sostitutiva non quadrata mantiene le proporzioni. Conserva entrambe le dimensioni nel calcolo quando cambi la larghezza di visualizzazione.

L’esempio imposta [pixelDensity(1)](https://p5js.org/reference/p5/pixelDensity/) per rendere esplicito il confronto Canvas. Registra la densità usata dallo sketch reale; il valore predefinito può seguire il display. Aumentare la densità Canvas non ricostruisce tracciati già diventati un’immagine caricata.

## Cosa ha mostrato il test nel browser

Abbiamo eseguito il file originale e questo esempio iniziale in Chrome con p5.js 2.3.4, `P2D` e densità di pixel `1`. L’immagine caricata era 120 × 120. Il campione centrale era `[0, 0, 0, 0]`, mentre quello corallo interno era `[235, 112, 90, 255]`. Lo sfondo chiaro dello sketch restava visibile attraverso l’apertura a tutte e tre le dimensioni di destinazione.

| Destinazione Canvas | Rapporto con l’immagine caricata | Risultato osservato                                                       |
| ------------------- | -------------------------------- | ------------------------------------------------------------------------- |
| 48 × 48             | 0.4×                             | Piccolo anello con apertura visibile                                      |
| 120 × 120           | 1×                               | Anello completo alle dimensioni caricate                                  |
| 240 × 240           | 2×                               | Anello e apertura completi, con bordi ingranditi visibilmente più morbidi |

Queste osservazioni descrivono questo file creato, browser, versione e renderer. Non sono un risultato di compatibilità per ogni SVG esportato, filtro, font o runtime di terze parti.

**Sorgente modificabile e visualizzazione Canvas**

![Illustrazione concettuale di un anello corallo modificabile con contorno e tre visualizzazioni crescenti dell’immagine sopra una scacchiera visibile attraverso le aperture.](https://perfectvector.com/blog/p5js-svg-artwork/canvas-and-master.webp)

*Illustrazione: i contorni sorgente e l’immagine visualizzata hanno compiti separati. Questo diagramma non è una schermata p5.js, un confronto di nitidezza o un risultato di conversione.*

I dati dei tracciati sorgente sono rimasti invariati durante tutto il test. Disegnare l’immagine a 2× ha influenzato la visualizzazione, non l’attributo `d` in `emblem.svg`. Salva il master con il progetto per preparare in seguito una diversa immagine da consegnare.

## Correggi il sintomo che osservi

### L’immagine non compare mai

Controlla che l’URL SVG sia raggiungibile dalla pagina servita e che `loadImage()` sia terminato prima dell’esecuzione di `image()`. Il `try/catch` dell’esempio inserisce l’errore di caricamento nel blocco di stato. Anche un’immagine remota può fallire per restrizioni di sicurezza del browser, come osserva la documentazione loadImage. Parti da un file della stessa origine che controlli, per separare un problema di caricamento da uno della grafica.

Apri l’SVG da solo nel browser. Se appare errato anche lì, correggi prima la sorgente. Un PNG rinominato non diventa un documento SVG e un involucro SVG attorno a una bitmap non crea i contorni mancanti.

### L’immagine appare deformata nelle proporzioni

Confronta il rapporto di destinazione con `art.width / art.height`. Per esempio, disegnare un’immagine quadrata in una destinazione 240 × 120 la rende deliberatamente larga il doppio rispetto all’altezza. Usa il calcolo delle proporzioni dell’esempio quando non vuoi deformarla. Se la sorgente stessa ha troppo spazio vuoto, controlla tavola e `viewBox` prima di ingrandire la visualizzazione per compensare.

### I bordi ingranditi appaiono morbidi

Controlla le dimensioni dell’immagine caricata, non solo quelle del Canvas. Nel nostro test, un’immagine 120 × 120 era disegnata in una destinazione 240 × 240. Cambiare questi argomenti di destinazione non elabora di nuovo le curve SVG tramite un nuovo caricamento dell’immagine.

Prepara un SVG da consegnare con dimensioni esplicite adatte all’uso previsto, caricalo nuovamente ed esamina `art.width` e `art.height` risultanti prima di accettarlo. Mantieni intatti sistema di coordinate e contorni sorgente. Poi confronta dimensioni a schermo minime e massime: più pixel caricati non rendono leggibile una minuscola apertura quando la visualizzazione finale è troppo piccola.

Se lo sketch richiede operazioni geometriche invece di immagini dipinte, pianificale separatamente. La [guida a Canvas Path2D](https://perfectvector.com/it/blog/canvas-path2d-svg) tratta il lavoro con dati dei tracciati, mentre la [guida SVG di PixiJS](https://perfectvector.com/it/blog/pixijs-svg-import) confronta i percorsi di geometria e texture di quel motore. Le loro API non sono intercambiabili con `loadImage()` di p5.

### Il centro è bianco anziché trasparente

Controlla nell’SVG originale la presenza di uno sfondo dipinto o di una forma interna bianca. In questa sorgente, il contorno `evenodd` lascia un foro e l’alfa centrale caricato era zero. Ripeti il controllo con il tuo file su uno sfondo dello sketch contrastante; una pagina bianca di anteprima può nascondere la differenza.

## Separa l’esportazione Canvas dal master SVG

Il [riferimento standard saveCanvas](https://p5js.org/reference/p5/saveCanvas/) elenca output immagine PNG, WebP e JPG. Salvare il Canvas dipinto tramite quell’API non recupera i tracciati SVG originali. Conserva `emblem.svg` separatamente quando servono future modifiche ai contorni o un file di consegna basato su tracciati. Una schermata di un Canvas dall’aspetto liscio non dimostra un procedimento di esportazione SVG modificabile.

PerfectVector interviene a monte quando l’illustrazione esiste solo come PNG o JPG piatto e ti servono contorni sorgente da modificare. [Converti l’immagine in SVG](https://perfectvector.com/it/image-to-vector), controlla contorno e spazio negativo in un editor SVG, poi ripeti i controlli reali di caricamento e dimensione in p5. Usa direttamente un SVG pulito esistente. Il ricalco non cambia l’API immagini di p5 e non trasforma l’output Canvas in un documento di tracciati SVG. La [guida generale alla vettorializzazione](https://perfectvector.com/it/blog/what-is-image-vectorization) spiega quel passaggio di preparazione della sorgente.

Conserva il master, registra versione p5 e dimensioni caricate e accetta la risorsa solo dopo aver verificato apertura e bordi alle dimensioni usate dallo sketch.

## Domande frequenti

**p5.js può caricare un SVG con loadImage?**
Sì. Questo esempio p5.js 2.3.4 P2D carica un SVG originale con await loadImage dentro setup asincrono. Prova aspetto e dimensioni caricate del tuo file invece di considerare un caricamento riuscito come compatibilità SVG completa.

**Un’immagine SVG caricata in p5 resta modificabile come tracciati?**
Il percorso di caricamento restituisce una p5.Image e la dipinge sul Canvas. Conserva l’SVG originale separatamente per modificare i tracciati sorgente. La visualizzazione Canvas di un’immagine non fornisce un DOM SVG modificabile per la grafica caricata.

**Perché il mio SVG in p5 appare sfocato quando lo ingrandisco?**
Controlla le dimensioni dell’immagine caricata rispetto a quelle di destinazione. La nostra immagine caricata 120 × 120 appariva più morbida a 240 × 240. Prepara una sorgente di consegna adeguatamente dimensionata, ricaricala ed esamina il risultato effettivo.

**saveCanvas esporta l’SVG originale?**
L’API standard saveCanvas documenta output PNG, WebP e JPG. Conserva il master SVG originale o verifica un procedimento separato di rendering ed esportazione SVG per un output basato su tracciati.

## Fonti

1. [p5.js loadImage](https://p5js.org/reference/p5/loadImage/) — Documenta caricamento immagini basato su Promise e restrizioni del browser.
2. [Rilascio p5.js 2.3.4](https://github.com/processing/p5.js/releases/tag/v2.3.4) — Identifica la versione fissata e lo script CDN ufficiale.
3. [p5.js createCanvas](https://p5js.org/reference/p5/createCanvas/) — Documenta creazione del Canvas e selezione del renderer.
4. [Sorgente di caricamento immagini p5.js 2.3.4](https://github.com/processing/p5.js/blob/v2.3.4/src/image/loading_displaying.js) — Mostra l’immagine caricata disegnata nel Canvas interno di p5.Image.
5. [MDN fill-rule](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/fill-rule) — Spiega come evenodd determina l’area riempita di un tracciato composto.
6. [p5.js image](https://p5js.org/reference/p5/image/) — Definisce posizione dell’immagine e dimensioni di destinazione.
7. [p5.js pixelDensity](https://p5js.org/reference/p5/pixelDensity/) — Documenta la densità di pixel dello sketch e il valore predefinito dipendente dal display.
8. [p5.js saveCanvas](https://p5js.org/reference/p5/saveCanvas/) — Elenca i formati standard di esportazione delle immagini Canvas.

## Explore

- [Read the HTML article](https://perfectvector.com/it/blog/p5js-svg-artwork)
- [Da SVG a Canvas: carica la grafica prima di esportare PNG](https://perfectvector.com/it/blog/svg-canvas-image-export.md)
- [Icone SVG in MapLibre: controlla pixel e dimensioni](https://perfectvector.com/it/blog/maplibre-svg-symbol-image.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)