Importare SVG in Konva: immagine o tracciati modificabili

Usa Konva.Image quando vuoi inserire un SVG completo su un canvas. Usa nodi Konva.Path separati quando l'applicazione deve ricolorare o manipolare singole forme di tracciato. Caricare un'immagine SVG non crea automaticamente un oggetto Konva per ogni elemento al suo interno. La guida SVG di Konva descrive questi approcci come diversi.

Per un selettore di loghi o uno strumento di composizione, un'immagine può bastare. Per un distintivo a due colori le cui regioni richiedono controlli separati, conta la struttura degli oggetti. Decidi cosa deve modificare l'utente prima di scegliere il caricatore e conserva la sorgente SVG accanto alla scena canvas.

Scegli la rappresentazione prima di importare

Il tutorial Path di Konva accetta dati di tracciato SVG attraverso data. È il valore dell'attributo d di un tracciato, non il documento SVG completo. Copiare soltanto i valori d non trasferisce la trasformazione del gruppo genitore, il colore ereditato o il comportamento del viewBox SVG.

Esiste anche una domanda separata sul file sorgente: l'SVG contiene davvero tracciati? Usa la guida all'ispezione del raster incorporato quando la grafica è una bitmap racchiusa in SVG. Un SVG valido basato su tracciati può comunque diventare un unico nodo immagine in Konva; questo non rende il file sorgente un falso vettore.

Un esempio a due colori con un test visibile del riempimento

Il simbolo originale qui sotto contiene due tracciati scritti a mano con riempimenti espliciti. Il canvas sinistro li carica entrambi come immagine unica. Quello destro costruisce due nodi Path dalla stessa geometria. Entrambi ricevono una richiesta di riempimento rosa e una scala di 1.3.

Il rettangolo rosa a sinistra è una prova utile: imageNode.fill() cambia lo sfondo della forma immagine, mentre le regioni opache verdi e gialle conservano i colori sorgente. A destra, paths[0].fill() cambia soltanto la prima regione. Questo test usa geometria originale, non un risultato di conversione PerfectVector.

Salva quanto segue come file HTML e servilo attraverso il tuo server di sviluppo locale. Fissa Konva 10.6.0, crea due stage di 320 × 240 e attende la decodifica dell'immagine SVG prima di disegnare. Il codice è lo stesso confronto eseguito per la cattura.

<div id="image-scene"></div>
<div id="path-scene"></div>
<script src="https://unpkg.com/konva@10.6.0/konva.min.js"></script>
<script type="module">
const parts = [
  { data: 'M20 80 C20 30 70 20 100 40 L100 140 C60 140 20 120 20 80 Z', fill: '#176b55' },
  { data: 'M100 40 C150 20 180 50 180 85 C180 120 145 140 100 140 Z', fill: '#e9b949' }
];
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="160" viewBox="0 0 200 160">${parts.map(p => `<path d="${p.data}" fill="${p.fill}"/>`).join('')}</svg>`;
const source = new Image();
source.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
await source.decode();
 
function makeStage(container) {
  const stage = new Konva.Stage({ container, width: 320, height: 240 });
  const layer = new Konva.Layer();
  stage.add(layer);
  return { stage, layer };
}
const imageScene = makeStage('image-scene');
const pathScene = makeStage('path-scene');
const imageNode = new Konva.Image({
  image: source, x: 30, y: 16, width: 200, height: 160
});
imageScene.layer.add(imageNode);
const group = new Konva.Group({ x: 30, y: 16 });
const paths = parts.map(p => new Konva.Path(p));
group.add(...paths);
pathScene.layer.add(group);
 
// Compare the same fill request on the two representations.
imageNode.fill('#db567d');
paths[0].fill('#db567d');
 
// Resize both without changing their source geometry.
imageNode.scale({ x: 1.3, y: 1.3 });
group.scale({ x: 1.3, y: 1.3 });
imageScene.layer.draw();
pathScene.layer.draw();
 
const png = pathScene.stage.toDataURL({ pixelRatio: 2 });
const exported = new Image();
exported.src = png;
await exported.decode();
</script>

In questo esempio volutamente piccolo, ogni tracciato ha i propri colori e usa le stesse coordinate. Il gruppo assegna ai due tracciati modificabili una sola posizione e scala. Cambiare la scala del gruppo lascia intatto il data di ciascun tracciato; cambia dove e quanto grande viene disegnato il gruppo.

Per un file SVG attendibile esistente che richiede soltanto l'inserimento come immagine intera, il tutorial Image mostra il normale procedimento di caricamento. Carica l'URL SVG come immagine, attendi il caricamento, poi passala a Konva.Image. Un componente React che renderizza markup SVG è un valore diverso dall'oggetto immagine atteso dal canvas.

Trasferisci più dei dati di tracciato quando la grafica è complessa

L'array parts dell'esempio è un modello esplicito per due forme note. Non è un importatore SVG. Prima di usare un approccio simile su grafica esportata, esamina cosa ne crea l'aspetto:

• Una trasformazione di gruppo può spostare, ruotare o scalare tutti i figli. Conserva quella relazione o incorpora deliberatamente la trasformazione nella geometria.
• Il colore può provenire da un antenato o da una regola CSS. Risolvi riempimento e contorno previsti anziché supporre che ogni tracciato li dichiari.
• Gradienti, ritagli, maschere e filtri hanno definizioni e riferimenti propri. Una stringa d copiata non ricostruisce quegli effetti.
• Testo e forme di base possono richiedere un trattamento separato. Non supporre che ogni oggetto visibile sia già un tracciato.

Tieni un rendering dell'originale accanto alla ricostruzione durante i test. Parti da una regione riconoscibile, confronta posizione e colore e soltanto dopo aggiungi le forme restanti. La guida alla modifica degli SVG descrive la pulizia della sorgente quando la struttura degli oggetti è difficile da usare.

Se i controlli dei singoli tracciati non sono necessari, caricare l'SVG completo come immagine può evitare quel lavoro di ricostruzione. Konva documenta anche il rendering SVG con una libreria esterna come canvg e il successivo inserimento del canvas risultante in un Konva.Image. Resta una rappresentazione come immagine; non dà all'utente nodi Konva separati per ogni tracciato sorgente. Consulta le opzioni documentate.

Per grafica che richiede soltanto un diverso colore sorgente, un altro approccio è aggiornare l'SVG stesso e ricaricare la sua immagine. Il manutentore di Konva descrive quel procedimento nell'issue 530 di react-konva. Usa una modifica strutturata adatta al tuo SVG noto, anziché sostituire indiscriminatamente ogni riempimento perdendo le differenze di colore volute.

Considera l'esportazione canvas come consegna raster

L'esempio chiama pathScene.stage.toDataURL({ pixelRatio: 2 }). Il suo stage di 320 × 240 produce un PNG decodificato di 640 × 480. Aumentare pixelRatio cambia le dimensioni in pixel esportate; non trasforma il PNG in SVG modificabile. La documentazione di esportazione di Konva spiega questa impostazione.

Mantieni separati questi tre file da consegnare:

1. L'SVG originale, per modifica vettoriale e confronto.
2. I dati di scena dell'applicazione, inclusi riferimenti ai tracciati o immagini e modifiche supportate dall'app.
3. Un PNG o altra esportazione raster, per usi che richiedono un'immagine renderizzata.

Riapri il PNG esportato ed esamina dimensioni e piccoli dettagli. Testa anche l'immagine SVG nei browser supportati dall'applicazione; la guida SVG di Konva osserva differenze di compatibilità del rendering. Questo esempio testa un SVG semplice e autonomo, quindi non dimostra supporto per ogni file o effetto esportato.

Evita di giudicare la qualità vettoriale dalla sola anteprima canvas. La guida agli SVG pixelati distingue geometria sorgente, anteprime raster e dimensioni di visualizzazione.

Quando PerfectVector aiuta con la sorgente

Se la risorsa iniziale è soltanto un motivo PNG o JPG, PerfectVector può aiutare a ricostruire geometria SVG modificabile prima di costruire la scena Konva. Converti l'immagine in vettore, apri il risultato in un editor ed esamina sagoma, fori e regioni di colore prima di mappare qualsiasi tracciato nell'app.

La vettorializzazione non crea un modello di scena Konva o un parser SVG arbitrario. Devi comunque scegliere la rappresentazione e trasferire le proprietà necessarie. Se hai già un originale SVG utilizzabile, lavora da quel file. Per fotografie o texture pittoriche che devono restare pixel, un nodo immagine è spesso la rappresentazione appropriata senza ricalco.

Controlla l'importazione con la tua grafica

Prima di aggiungere un SVG a un editor riutilizzabile:

1. Scegli un nodo per l'immagine intera o nodi di forma separati in base ai controlli necessari all'utente.
2. Cambia il colore di una regione e conferma che cambi soltanto l'oggetto previsto.
3. Ridimensiona il disegno completo e controlla spaziatura, aspetto dei contorni e ritaglio.
4. Esporta alle dimensioni in pixel richieste e riapri il file raster.
5. Riapri indipendentemente l'originale SVG salvato, così un'esportazione canvas non diventa mai la tua unica copia.

FAQ

Konva.Image rende modificabili i tracciati dentro un SVG? No. Visualizza l'SVG come un solo nodo immagine. Per controllare singole regioni di tracciato, crea nodi Path separati da dati di tracciato adatti oppure usa un procedimento di modifica SVG che conservi la struttura del documento.

Perché fill aggiunge un rettangolo invece di ricolorare il mio SVG? Su un nodo Image, il riempimento colora la forma immagine dietro il contenuto dell'immagine. Non riscrive i riempimenti dentro l'SVG. Modifica l'SVG sorgente e ricaricalo, oppure usa nodi Path separati quando l'app richiede controlli di colore individuali.

Aumentare pixelRatio esporta un file vettoriale? No. In questo esempio, pixelRatio 2 produce un PNG con larghezza e altezza doppie rispetto allo stage. Conserva separatamente la sorgente SVG per la modifica vettoriale.

Fonti

1. Konva — SVG su canvas — Spiega opzioni Image, Path e renderer esterni e limiti di compatibilità dei browser.
2. Konva — Tutorial Path — Documenta la costruzione di un Path da dati di tracciato SVG e proprietà di disegno esplicite.
3. Konva — Tutorial Image — Mostra caricamento di un'immagine e inserimento in una scena Konva.
4. Konva — Esportazione di immagini di alta qualità — Spiega esportazione raster ed effetto di pixelRatio sulle dimensioni di uscita.
5. Konva — Issue 530 di react-konva — Riporta l'approccio del manutentore per cambiare i colori delle immagini SVG modificando e ricaricando la sorgente.

Parti da un'icona soltanto raster? Trasforma l'immagine in tracciati SVG, esamina le regioni di colore recuperate e testa una regione in Konva prima di collegare il resto dell'editor.