Importare SVG in PixiJS: Graphics o una texture

PixiJS può usare un SVG in due modi diversi: Graphics.svg() analizza la geometria di disegno supportata, mentre caricare l'SVG come texture dà a uno Sprite pixel da mostrare. Scegli la geometria quando la grafica richiede un ridimensionamento sostanziale e una texture quando un raster adatto alla dimensione di visualizzazione prevista soddisfa le esigenze della risorsa. PixiJS descrive entrambe le strade nella sua guida SVG.

Prova lo stesso file attraverso entrambe le strade prima di scegliere. Il nostro piccolo emblema manteneva apertura e colori in entrambe, ma la strada geometrica perdeva la traslazione del gruppo. La texture corrispondeva al posizionamento nel browser e diventava meno nitida quando ingrandita. Sono problemi separati con correzioni diverse.

Decidi cosa serve alla scena

Un oggetto Graphics è contenuto di disegno Pixi, non un albero DOM SVG con gli ID originali degli elementi. Il suo contesto può essere condiviso tra istanze, come spiega la guida Graphics. Mantieni l'SVG originale quando devi modificare singoli tracciati sorgente o esportare un altro SVG in futuro. Entrambe le strade disegnano infine pixel sullo schermo.

Prova una curva, un foro e una trasformazione

Questo esempio usa PixiJS 8.21.0, un SVG di 96 × 96, risoluzione del renderer 1 e una texture SVG caricata a risoluzione 1. La versione piccola viene disegnata alla dimensione nativa; quella grande usa scala 3. L'emblema originale ha due tracciati colorati e un gruppo traslato di otto unità SVG in ciascuna direzione. Il contorno interno percorre il verso opposto a quello esterno per formare l'apertura.

Lo stesso SVG originale attraverso tre renderer

La scacchiera si vede attraverso l'apertura in tutte e tre le colonne. È uno sfondo dietro la grafica, non una forma bianca disegnata nel foro. Lo spostamento della colonna centrale è visibile a entrambe le dimensioni: otto unità alla scala nativa diventano 24 pixel visualizzati a scala 3.

Queste osservazioni si applicano a questa sorgente e versione. Non stabiliscono che ogni foro, trasformazione, sfumatura o SVG esportato funzionerà allo stesso modo.

Salva la sorgente SVG

Salva questo come emblem.svg accanto alla pagina. È grafica originale disegnata per il confronto, non un risultato di vettorializzazione.

<svg xmlns="http://www.w3.org/2000/svg"
     width="96" height="96" viewBox="0 0 96 96">
  <g transform="translate(8 8)">
    <path fill="#145c61" d="M40 0
      C62 0 80 18 80 40 C80 62 62 80 40 80
      C18 80 0 62 0 40 C0 18 18 0 40 0 Z
      M40 20 C29 20 20 29 20 40 C20 51 29 60 40 60
      C51 60 60 51 60 40 C60 29 51 20 40 20 Z"/>
    <path fill="#e68546"
      d="M62 5 C74 9 80 21 78 34 L61 32
         C63 23 61 15 55 10 Z"/>
  </g>
</svg>

Esegui entrambe le strade

Inserisci questo script in una pagina HTML servita via HTTP accanto a emblem.svg. Importa la build Pixi nella versione fissata, recupera il tuo SVG attendibile e disegna versioni native e ingrandite in due colonne. La colonna sinistra usa la geometria; quella destra una texture.

<script type="module">
import { Application, Assets, Graphics, Sprite }
  from 'https://cdn.jsdelivr.net/npm/pixi.js@8.21.0/dist/pixi.mjs';
 
const app = new Application();
await app.init({
  width: 640, height: 420, resolution: 1,
  antialias: true, background: '#e7eeea', preference: 'webgl'
});
document.body.append(app.canvas);
 
const response = await fetch('emblem.svg');
if (!response.ok) throw new Error('SVG request failed');
const svgText = await response.text();
const texture = await Assets.load({
  src: 'emblem.svg', data: { resolution: 1 }
});
 
for (const [scale, y] of [[1, 12], [3, 120]]) {
  const geometry = new Graphics().svg(svgText);
  geometry.scale.set(scale);
  geometry.position.set(16, y);
  const sprite = new Sprite(texture);
  sprite.scale.set(scale);
  sprite.position.set(336, y);
  app.stage.addChild(geometry, sprite);
}
</script>

Apri anche l'SVG originale nel browser. Confronta contorno esterno, apertura, forma di accento e posizionamento, non soltanto se il file si è caricato senza errori.

Correggi la discrepanza che vedi davvero

La geometria si è spostata

In questo test, Graphics.svg() non applicava il translate(8 8) del gruppo contenitore. L'implementazione del parser SVG nella versione fissata è utile per controllare il comportamento della versione nel tuo progetto.

Per questo file specifico, sostituire la riga di posizionamento della geometria con la seguente compensa quella singola traslazione nota:

geometry.position.set(16 + 8 * scale, y + 8 * scale);

La correzione include scale perché la traslazione mancante appartiene al sistema di coordinate della sorgente. A scala 3, la correzione è di 24 pixel in ciascuna direzione. Non è una soluzione generale per applicare tutte le trasformazioni alla geometria. Un file con rotazioni annidate, inclinazioni o trasformazioni diverse su tracciati separati richiede un SVG di consegna preparato correttamente o un'altra strada di rendering. Confronta il file di consegna esportato con l'originale modificabile.

La texture ingrandita è poco nitida

La texture SVG nella figura contiene 96 × 96 pixel. Scalare il suo sprite a 288 × 288 non rilegge le curve sorgente. Per preparare più pixel, carica una texture separata con una risoluzione maggiore:

const largeTexture = await Assets.load({
  src: 'emblem.svg?resolution=3',
  data: { resolution: 3 }
});

Nella build provata, questo produceva una sorgente di 288 × 288 pixel con una dimensione logica della texture di 96 × 96 e risoluzione sorgente 3. Usa largeTexture quando crei lo sprite. La stringa di query dà a questo esperimento una chiave di cache distinta; il server deve servire lo stesso SVG per quell'URL. La guida Assets di Pixi spiega la cache basata su URL e la guida alle texture distingue una texture dalla sua sorgente.

Seleziona la risoluzione per il maggiore uso richiesto sullo schermo, includendo la risoluzione del renderer che distribuisci davvero. Aumentare soltanto la risoluzione del renderer non aggiunge dettagli a una texture a bassa risoluzione già caricata. Controlla anche la dimensione più piccola dell'icona: una sorgente più grande non può rendere leggibile un'apertura minuscola se la visualizzazione finale è troppo piccola.

Manca un dettaglio

Controlla la sorgente originale in un browser, poi prova una copia più semplice in Pixi. Riduci l'SVG alle forme interessate e reinserisci gruppi, colori ed effetti uno alla volta. La documentazione Graphics di Pixi descrive il supporto SVG come un sottoinsieme; un caricamento riuscito non è un controllo completo di compatibilità.

Mantieni una copia raster di consegna quando conserva in modo affidabile la grafica a dimensioni note. Per un simbolo geometrico semplice, disegnare le forme direttamente in Pixi può essere più facile da mantenere. Non scegliere una strada basandoti su un'affermazione non misurata secondo cui sarà sempre più veloce o userà meno memoria. Prova la scena e i dispositivi di destinazione.

Prepara la sorgente prima dell'importazione

Se un SVG contiene un PNG inserito, cambiarne il nome del file o importarlo come geometria non ricostruisce i contorni vettoriali mancanti. Usa la lista di controllo del raster incorporato per esaminare prima la sorgente. La guida generale alla vettorializzazione delle immagini spiega quando il ricalco è utile.

PerfectVector è adatto quando rimane soltanto un PNG o JPG piatto e ti servono forme sorgente modificabili per l'icona. Converti l'immagine in SVG, poi esamina contorno, colori separati e piccole aperture in un editor SVG prima di ripetere il test Pixi. Usa direttamente un originale vettoriale pulito esistente. Il ricalco non corregge la gestione delle trasformazioni di Pixi e non configura la risoluzione della texture.

Altri motori fanno proprie scelte di importazione. La guida all'importazione SVG in Godot spiega il comportamento di texture e sovracampionamento in quel motore; la guida SVG in Unity tratta quel flusso separato. Non trasferire le impostazioni di un motore a un altro basandoti soltanto sull'estensione SVG.

Controlla l'icona consegnata

Prima di accettare la risorsa, confrontala con la sorgente renderizzata nel browser alle dimensioni minima e massima previste. Controlla l'apertura su sfondi contrastanti, il posizionamento del gruppo e gli eventuali effetti richiesti. Registra versione Pixi, risoluzione del renderer, dimensioni in pixel della sorgente della texture e scala della scena. Mantieni l'originale SVG nel progetto per poter provare futuri cambiamenti di layout o importatore rispetto alla stessa sorgente.

Hai soltanto grafica raster? Prepara un SVG modificabile con PerfectVector, esamina contorno e spazio negativo, poi prova la strada effettiva di importazione Pixi alle dimensioni usate dall'interfaccia.

FAQ

Importare un SVG in PixiJS lo mantiene come geometria vettoriale? Dipende dalla strada. Graphics.svg analizza la geometria di disegno supportata. Caricare un SVG come texture dà a uno Sprite una sorgente raster. Mantieni separatamente l'SVG originale per modificare la sorgente ed esportare in futuro.

Perché uno sprite SVG PixiJS può sembrare sfocato? Uno sprite può mostrare la sua texture a dimensioni superiori alle dimensioni in pixel della texture. Controlla la risoluzione sorgente e la maggiore dimensione di visualizzazione prevista. Carica una texture di dimensioni adatte o prova la strada geometrica per la grafica supportata.

Graphics.svg conserva ogni funzionalità SVG? No. Supporta un sottoinsieme di SVG. In questo esempio PixiJS 8.21.0, il foro e i due colori sopravvivevano, ma la traslazione del gruppo no. Prova il tuo file esportato rispetto a un riferimento nel browser.

Fonti

1. Guida SVG di PixiJS — Descrive le strade di importazione come texture e geometria e la risoluzione della texture.
2. Guida Graphics di PixiJS — Spiega la condivisione di GraphicsContext e il limite del supporto SVG.
3. Guida Assets di PixiJS — Documenta caricamento delle risorse e cache basata su URL.
4. Guida alle texture di PixiJS — Descrive la relazione tra texture e sorgenti.
5. Parser SVG di PixiJS 8.21.0 — Fornisce l'implementazione nella versione fissata per indagare le differenze di importazione.