Di Irene KimPubblicato il 6 ottobre 2026

SVG.js: importa grafica, modifica ed esporta SVG

Importa markup SVG attendibile in SVG.js, ricolora un tracciato denominato e controlla esportazioni con radice completa o soli figli. Conserva la geometria e verifica i file.

10 min di lettura

In questa pagina

Decidi se ti servono forme modificabili o un'immagine
Esegui una modifica al tracciato denominato e salva ogni forma
Esamina il risultato salvato, non soltanto l'anteprima attiva
Considera l'esportazione dei soli figli un frammento deliberato
Quando la sorgente non ha tracciati da modificare
Domande frequenti
Fonti

Per importare grafica in SVG.js e modificarne una parte, passa markup SVG attendibile a .svg(), trova l'elemento previsto tramite l'ID assegnato e cambia il riempimento di quell'elemento. Esporta la radice SVG completa della grafica per un file autonomo. Un'esportazione dei soli figli è un frammento: richiede una radice con dimensioni e viewBox previsti prima di essere consegnata come documento.

Questa guida usa un rombo forato originale e un triangolo separato. Il triangolo cambia da ocra a corallo mentre il rombo mantiene il riempimento verde petrolio e l'apertura. Abbiamo provato l'esempio completo qui sotto con SVG.js 3.2.6, fissato al rilascio ufficiale 3.2.6. Queste osservazioni riguardano due semplici tracciati originali, non ogni funzione che un altro SVG potrebbe contenere.

Decidi se ti servono forme modificabili o un'immagine

Un'istruzione di importazione JavaScript che produce un URL di risorsa risponde a una domanda di caricamento. Non inserisce da sola i tracciati del file nell'albero SVG attivo dell'editor. L'attuale documentazione di importazione/esportazione di SVG.js descrive l'importazione di markup e il recupero dell'elemento SVG esterno oppure dei suoi figli.

Rappresentazione	A che cosa consente di accedere l'esempio	Controllo di consegna
Markup attendibile importato in una radice SVG attiva	Il tracciato denominato `accent`	Esamina la radice modificata e riapri la sua esportazione
SVG caricato tramite un elemento immagine	L'elemento immagine nel suo insieme	Esamina separatamente il contenuto dell'immagine
Markup dei soli figli	Due elementi tracciato senza la radice originale	Fornisci deliberatamente radice, dimensioni e `viewBox`

Un SVG dentro un'immagine è ancora contenuto SVG. Nel nostro controllo con contenitore immagine, però, l'albero SVG contenitore ha un elemento immagine e nessun tracciato diretto; cercare accent in quell'albero non trova nulla. Non entra nel documento dell'immagine incorporata. MDN descrive il contesto immagine SVG separato e le sue restrizioni. Non dedurre il modello di modifica da un rendering nitido.

Per la decisione più ampia sull'incorporamento, leggi SVG inline o immagine. Se invece vuoi il modello di oggetti canvas di Fabric, la procedura di importazione Fabric.js tratta un parser e un'API di modifica diversi.

Esegui una modifica al tracciato denominato e salva ogni forma

Salva il codice completo qui sotto come starter.html in una cartella vuota. Servilo tramite HTTP, per esempio con python3 -m http.server 8000, poi apri http://localhost:8000/starter.html. Lo script carica il pacchetto con versione fissata dalla sua CDN, quindi questo esempio richiede una connessione di rete.

La pagina mostra la grafica originale, la copia modificata attiva e un controllo con contenitore immagine. I suoi link scaricano il master originale, le radici complete prima/dopo, il frammento di testo dei soli figli, una copia racchiusa in una nuova radice e il contenitore immagine. Il rapporto legge pixel da immagini SVG disegnate su un canvas; non esporta un PNG.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Original SVG.js artwork import and export</title>
<style>
  body { margin: 24px; font: 16px system-ui; background: #f6f2e8; }
  main { display: grid; grid-template-columns: repeat(3, 260px); gap: 20px; }
  figure { margin: 0; }
  svg, img { display: block; background: white; border: 1px solid #bbb; }
  pre { white-space: pre-wrap; font-size: 12px; }
</style>
<h1>Trusted artwork, one fill edit and two export forms</h1>
<main>
  <figure><img id="original" alt="Original artwork"><figcaption>Original SVG image</figcaption></figure>
  <figure><div id="live"></div><figcaption>Imported live SVG, accent edited</figcaption></figure>
  <figure><div id="wrapper"></div><figcaption>Image wrapper, original artwork</figcaption></figure>
</main>
<p id="downloads"></p>
<pre id="report"></pre>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.2.6/dist/svg.min.js"></script>
<script>
  const markup = '<svg xmlns="http://www.w3.org/2000/svg" id="original-artwork" width="240" height="160" viewBox="0 0 240 160">'
    + '<path id="body" d="M80 20 L140 80 L80 140 L20 80 Z M80 56 L104 80 L80 104 L56 80 Z" fill="#176b5b" fill-rule="evenodd"/>'
    + '<path id="accent" d="M172 48 L220 80 L172 112 Z" fill="#d4a53a"/></svg>';
  const url = text => 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(text);
  async function pixels(text) {
    const image = new Image();
    image.src = url(text);
    await image.decode();
    const canvas = document.createElement('canvas');
    canvas.width = 240;
    canvas.height = 160;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(image, 0, 0);
    const rgba = (x, y) => [...ctx.getImageData(x, y, 1, 1).data];
    return { naturalWidth: image.naturalWidth, naturalHeight: image.naturalHeight,
      opening: rgba(80, 80), body: rgba(80, 40), accent: rgba(188, 80), corner: rgba(0, 0) };
  }
  function inventory(text) {
    const node = new DOMParser().parseFromString(text, 'image/svg+xml').documentElement;
    return { root: node.localName, viewBox: node.getAttribute('viewBox'),
      paths: [...node.querySelectorAll('path')].map(p => ({ id: p.id, d: p.getAttribute('d'), fill: p.getAttribute('fill') })),
      imageCount: node.querySelectorAll('image').length };
  }
  async function run() {
    document.getElementById('original').src = url(markup);
    const host = SVG().addTo('#live').size(240, 160).viewbox(0, 0, 240, 160);
    host.svg(markup);
    const artwork = host.findOne('#original-artwork');
    const before = artwork.svg();
    const accent = artwork.findOne('#accent');
    const beforeD = accent.attr('d');
    accent.fill('#b95434');
    const full = artwork.svg();
    const children = artwork.svg(false);
    const rewrapped = SVG().size(240, 160).viewbox(0, 0, 240, 160);
    rewrapped.svg(children);
    const wrappedFull = rewrapped.svg();
    const imageWrapper = SVG().addTo('#wrapper').size(240, 160).viewbox(0, 0, 240, 160);
    imageWrapper.image(url(markup)).size(240, 160);
    const wrapperFull = imageWrapper.svg();
    const files = { 'master.svg': markup, 'before.svg': before, 'edited.svg': full,
      'children-only.txt': children, 'rewrapped.svg': wrappedFull, 'image-wrapper.svg': wrapperFull };
    for (const [name, text] of Object.entries(files)) {
      const a = document.createElement('a');
      a.href = name.endsWith('.txt') ? 'data:text/plain;charset=utf-8,' + encodeURIComponent(text) : url(text);
      a.download = name;
      a.textContent = name;
      a.style.marginRight = '12px';
      document.getElementById('downloads').append(a);
    }
    const results = {};
    for (const [name, text] of Object.entries(files)) {
      if (name.endsWith('.svg')) results[name] = { inventory: inventory(text), pixels: await pixels(text) };
    }
    document.getElementById('report').textContent = JSON.stringify({
      requestedPackageVersion: '3.2.6',
      scriptURL: document.querySelector('script[src]').src,
      selectedAccentFound: Boolean(accent), selectedAccentDUnchanged: beforeD === accent.attr('d'),
      allPathDUnchanged: JSON.stringify(inventory(before).paths.map(p => p.d)) === JSON.stringify(inventory(full).paths.map(p => p.d)),
      childrenHasOuterSVG: /<svg[\s>]/i.test(children),
      wrapperDirectPathCount: imageWrapper.find('path').length,
      wrapperAccentFound: Boolean(imageWrapper.findOne('#accent')), results
    }, null, 2);
  }
  run();
</script>
</html>

Il markup importato contiene una radice annidata denominata original-artwork. L'esempio seleziona quella radice prima dell'esportazione, quindi la copia di consegna ha il viewport originale 240 × 160 invece di dipendere da un contenitore genitore non pertinente. Poi seleziona accent dentro quella radice. SVG.js documenta riferimenti basati su selettori e metodi degli elementi; nomi espliciti delle parti evitano di dipendere dall'ordine dei tracciati.

Il codice è intenzionalmente limitato al proprio markup fisso. Non è uno strumento di sanitizzazione degli SVG caricati. Analizzare o inserire una stringa arbitraria non dimostra che sia sicura; la documentazione MDN di DOMParser distingue l'analisi dai rischi di inserire contenuti non attendibili. Progetta una politica separata di validazione e fiducia prima di adattare questa routine ai caricamenti.

Esamina il risultato salvato, non soltanto l'anteprima attiva

La nostra esecuzione effettiva nel browser ha prodotto questi controlli:

Rappresentazione salvata	Tracciati nel suo albero documentale	Immagini	Riempimento del triangolo
Master originale	2	0	`#d4a53a`
Radice completa prima della modifica	2	0	`#d4a53a`
Radice completa dopo la modifica	2	0	`#b95434`
Figli inseriti in una nuova radice completa	2	0	`#b95434`
Contenitore immagine	0	1	Ocra originale dentro il contenuto dell'immagine

Entrambe le stringhe d dei tracciati originali sono rimaste identiche nelle esportazioni prima/dopo. Il campione interno del triangolo è cambiato da RGBA (212, 165, 58, 255) a (185, 84, 52, 255). Il campione interno del rombo è rimasto (23, 107, 91, 255); l'apertura e l'angolo esterno sono rimasti ad alfa 0. Tutti e cinque i file SVG autonomi si sono riaperti come immagini con dimensioni naturali 240 × 160.

Confronto concettuale di grafica identica con rombo forato e un solo triangolo separato che cambia da oro a corallo — Illustrazione concettuale di una modifica cromatica a una parte. Limiti decorativi e frecce sono indicazioni del diagramma; esempio eseguito, inventario della sorgente salvata e controlli dei pixel nel browser forniscono le verifiche effettive.

Quei risultati stabiliscono la modifica prevista per questo campione. Non dimostrano conservazione XML identica byte per byte, supporto di tutti i filtri o CSS o adeguatezza a un flusso di fabbricazione. La serializzazione della libreria può cambiare il markup del documento lasciando intatte queste specifiche stringhe dei tracciati. Conserva il master originale insieme alla copia di consegna.

Per la tua grafica controlla le strutture effettivamente usate: nomi e gruppi, ritagli, gradienti, trasformazioni, tratti e testo. Riapri il file esportato nell'applicazione ricevente, poi ripeti la modifica prevista. La guida alla modifica degli SVG può aiutare a diagnosticare la struttura sorgente prima di cambiare il codice di importazione.

Considera l'esportazione dei soli figli un frammento deliberato

In questa esecuzione, artwork.svg(false) ha restituito due tracciati senza un tag svg esterno. Ha omesso il viewport della radice della grafica. La radice SVG separata rewrapped fornisce dimensioni 240 × 160 e lo stesso viewBox prima di accettare quei figli; il suo file esportato renderizza poi il triangolo corallo verificato.

Scegli tra documento completo e frammento in base alla destinazione. Per un download autonomo, mantieni la radice completa prevista. Per l'inserimento in un disegno esistente, decidi quale sistema di coordinate del genitore, stili ereditati e definizioni useranno quei figli. Questo semplice campione non ha risorse esterne o definizioni condivise, quindi non prova se un frammento contenente riferimenti trasporti ogni dipendenza necessaria.

La nostra esportazione del contenitore immagine ha conservato un SVG codificato i cui byte decodificati corrispondevano al master originale. Quel controllo mostra una differenza di rappresentazione, non una conversione raster. Se la sorgente è già geometria vettoriale utilizzabile, correggi la selezione dell'elemento o il confine dell'esportazione prima di ricalcarla di nuovo.

Quando la sorgente non ha tracciati da modificare

Se la tua illustrazione PNG o JPG piatta richiede regioni ricolorabili separatamente, prepara un SVG candidato con PerfectVector. Esamina contorni e aperture, poi assegna i nomi delle parti necessari all'applicazione. La vettorizzazione non sa che una regione debba chiamarsi accent e non garantisce che un documento importato sia adatto al modello di dati dell'editor.

Conserva un master SVG adatto quando quelle forme esistono già. Usa la panoramica sulla vettorizzazione per decidere se la preparazione da raster a vettoriale debba precedere il tuo codice.

Domande frequenti

SVG.js può importare una stringa SVG per modificarla? Sì. Questo esempio importa il proprio markup attendibile in un contenitore SVG attivo, seleziona un tracciato originale e ne cambia il riempimento. Caricamenti arbitrari richiedono una politica separata di fiducia e validazione; l'API del markup non è uno strumento di sanitizzazione.

Perché vedo la grafica ma non trovo il suo tracciato accent? Controlla se hai importato markup attivo o inserito un'immagine. Il nostro controllo con contenitore immagine mostra grafica SVG ma non espone alcun tracciato accent diretto nell'albero del contenitore. Controlla anche il genitore selezionato e gli ID effettivi della sorgente.

Un'esportazione dei soli figli è un file SVG completo? Non in questo campione. Contiene due tracciati senza il viewport SVG esterno. Usa la radice completa prevista per un file autonomo o fornisci esplicitamente radice di destinazione e sistema di coordinate quando inserisci un frammento.

Una modifica riuscita dimostra che l'esportazione conserva ogni funzione SVG? No. Abbiamo controllato due tracciati semplici, i valori dei loro riempimenti, i dati esatti dei tracciati e cinque file riaperti. Prova le funzioni specifiche e l'applicazione ricevente necessarie alla grafica e conserva il master originale.

Fonti

SVG.js — Importazione / Esportazione, versione 3.2 — Importazione del markup e serializzazione della radice completa o dei soli figli.
SVG.js — Riferimento / Creazione di elementi, versione 3.2 — Ricerca di elementi denominati e modifica delle loro proprietà.
SVG.js — Rilascio 3.2.6 — Il rilascio ufficiale fissato nell'esempio eseguito.
MDN — SVG come immagine — Contesto di incorporamento delle immagini e relative restrizioni.
MDN — DOMParser.parseFromString — Analisi del markup e gestione separata degli ingressi non attendibili.

Se l'illustrazione esiste solo come pixel raster e richiede modifiche delle singole parti, prepara un candidato vettoriale dalla tua grafica. Controlla contorno e aperture, conserva il master, poi verifica la modifica denominata e l'SVG salvato nel flusso ricevente.

Altro dal blog

Icone SVG in MapLibre: controlla pixel e dimensioni

Decodifica un SVG per un livello simboli MapLibre, controlla densità e dimensione dell'icona e conserva un master modificabile. Verifica forma e apertura visualizzate.

5 ottobre 2026

Pattern SVG: ruota il riempimento, conserva il contorno

Ruota o sposta il motivo SVG ripetuto in un emblema fisso con patternTransform. Confronta la rotazione dell'oggetto intero e verifica sorgente, geometria e pixel.