Importare SVG in Excalidraw: cosa diventa modificabile?

Trascinare un SVG in Excalidraw può darti un'immagine nitida e ridimensionabile senza consentirti di modificarne i singoli tracciati. Se devi ricolorare o spostare una parte, ti serve una scena Excalidraw composta da elementi nativi. Un convertitore da SVG a Excalidraw può creare quegli elementi, ma il risultato richiede comunque un controllo visivo. La discussione Excalidraw sull'importazione SVG descrive proprio questo problema dell'oggetto singolo rispetto alle parti modificabili.

Abbiamo testato una piccola icona a due colori con un foro trasparente. Un convertitore a versione fissata ha prodotto tre elementi Excalidraw selezionabili, ma ha riempito il foro che era aperto nell'SVG. È un promemoria utile: modificabilità e fedeltà richiedono controlli separati.

Tre significati possibili di un "SVG in Excalidraw"

Il terzo caso procede nella direzione opposta. Uno strumento può inserire dati sorgente Excalidraw in un'esportazione SVG così da poter riaprire il proprio disegno per modificarlo. L'estensione Excalidraw per VS Code, per esempio, documenta file .excalidraw.svg con dati di scena incorporati. Questo non significa che un'illustrazione SVG qualsiasi contenga già forme Excalidraw.

Se una grafica importata non si separa, identifica prima la struttura dell'oggetto selezionato. La nostra guida alla separazione degli SVG distingue oggetti immagine, tracciati composti e gruppi reali; Excalidraw aggiunge il proprio formato di scena a questa domanda sul file sorgente.

Se devi soltanto modificare i tracciati dell'SVG, segui i controlli di ricalco o importazione in Boxy SVG e conserva un originale SVG. Converti in una scena Excalidraw quando ti servono elementi nativi della scena.

Un piccolo test di conversione: forme conservate, foro perso

La nostra sorgente era un SVG scritto a mano: un anello verde petrolio formato da un tracciato composto even-odd, più un cerchio dorato. Il centro dell'anello era realmente trasparente nell'originale, non dipinto di bianco. Lo abbiamo passato attraverso il repository ufficiale svg-to-excalidraw usando la versione 0.0.2 del pacchetto npm, salvato la scena restituita come file .excalidraw, aperto quel file in Excalidraw ed esportato un PNG trasparente per il confronto.

Sorgente originale e scena convertita

La conversione non ha segnalato errori e ha creato tre elementi nativi: due elementi di disegno verde petrolio e un'ellisse dorata. L'accento dorato era selezionabile separatamente. Il centro trasparente, però, non ha superato il controllo dell'aspetto. Nel rendering originale il suo pixel centrale era trasparente; nell'esportazione PNG trasparente di Excalidraw, il pixel corrispondente era verde petrolio opaco. Una risposta di conversione senza errori non garantiva un'immagine corrispondente.

Questo è un test volutamente circoscritto, non un'affermazione su ogni SVG o ogni percorso di conversione. Anche il distinto esperimento SVG Chop considera le strutture SVG complesse una difficoltà di conversione. Un'occhiata rapida al numero di oggetti non basta. Fori, maschere, ritaglio, gradienti, testo e gruppi annidati meritano test specifici quando il disegno li usa.

Come controllare il tuo SVG

1. Conserva l'SVG originale. Salva una copia prima di importare o convertire. Verifica se la zona che vuoi cambiare è già un tracciato o una forma separata. Un singolo tracciato composto può avere un foro senza avere parti selezionabili separatamente.
2. Decidi cosa significa "modificabile" per questo disegno. Se devi soltanto ridimensionare e posizionare l'illustrazione, un'immagine può bastare. Se devi spostare o ricolorare una parte, quella parte deve esistere come elemento nativo della scena.
3. Prova il percorso di conversione su una copia. Il progetto open source SVG-to-Excalidraw converte la geometria SVG in contenuto di scena Excalidraw. Controlla la configurazione attuale e annota la versione del pacchetto usata. Importa o apri la scena risultante anziché supporre che un normale inserimento di immagine esponga i tracciati.
4. Conta e seleziona le parti. Puoi selezionare l'accento senza il corpo? Puoi ricolorarlo lasciando invariato l'altro colore? Riapri la scena salvata e ripeti la modifica.
5. Confronta l'immagine, non soltanto gli oggetti. Metti l'originale e l'esportazione Excalidraw su sfondi contrastanti. Esamina fori, sovrapposizioni, bordi, testo e gli effetti necessari. Il nostro test avrebbe superato un controllo di "tre elementi", ma non questo.

Se la conversione divide una parte prevista in molti elementi di disegno, raggrupparli può facilitarne lo spostamento, ma non ripristina la struttura originale dei tracciati. Se un foro scompare, modifica la sorgente o usa un altro editor per quella grafica. Conserva l'originale modificabile nell'editor vettoriale quando Excalidraw non può preservare una caratteristica necessaria.

Dove è utile PerfectVector

PerfectVector aiuta prima nel procedimento soltanto quando la sorgente è grafica raster, per esempio un'icona PNG piatta che non ha ancora tracciati SVG. Converti la clipart in SVG, verifica se le regioni colorate e lo spazio negativo sono stati conservati e pulisci la geometria prima di tentare una conversione Excalidraw. La guida alla preparazione di piccole icone descrive chiarezza e coerenza della sorgente. La vettorializzazione da sola non può trasformare un'immagine inserita in Excalidraw in elementi nativi della scena, e un SVG appena ricalcato richiede comunque il controllo nell'applicazione di destinazione descritto sopra.

Per un SVG che contiene già forme vettoriali adatte, evita di ricalcarlo di nuovo. Confronta invece l'originale con la scena convertita. La guida alle forme SVG personalizzate in draw.io fa una distinzione simile tra immagine e forma nativa per un diverso editor di diagrammi.

FAQ

Posso separare un'immagine SVG inserita in forme Excalidraw? Una selezione a livello di immagine non espone le parti originali SVG come elementi nativi Excalidraw. Usa un procedimento di conversione quando ti servono forme separate della scena, poi esamina il risultato.

La conversione SVG-to-Excalidraw conserva ogni foro? Non darlo per scontato. Nel nostro test con la versione 0.0.2, un anello even-odd è diventato elementi di disegno modificabili, ma il suo centro trasparente è stato riempito. Confronta la tua sorgente e la scena salvata, soprattutto dove lo spazio vuoto conta.

Dovrei vettorializzare un SVG prima di importarlo? No. Se l'SVG ha già le forme necessarie, controlla la sua struttura e la conversione Excalidraw. La vettorializzazione è pertinente quando l'immagine iniziale è grafica raster, come PNG o JPG.

Fonti

1. Discussione Excalidraw #6082 — Domanda di un utente su un SVG importato che si comporta come un blocco unico anziché come parti modificabili.
2. Excalidraw — svg-to-excalidraw — Percorso ufficiale di conversione open source usato per il test dell'icona originale con versione fissata.
3. Estensione Excalidraw Editor per VS Code — Documenta file di scena Excalidraw ed esportazioni SVG/PNG con dati di scena incorporati.
4. Minixcali — SVG Chop — Esperimento indipendente di conversione di parti SVG in elementi Excalidraw, con limiti relativi alla geometria.

Se parti da un'icona PNG, crea un candidato SVG con PerfectVector, controlla regioni separate e fori, poi testa la scena Excalidraw salvata prima di usarla in un disegno.