Forme SVG in draw.io: immagini o stencil?

Per una forma SVG personalizzata in draw.io, decidi cosa devi cambiare dopo l'inserimento. Un'immagine SVG incorporata è utile quando vuoi l'aspetto della grafica. Uno stencil XML nativo è il metodo per definire geometria del diagramma, stili e punti di connessione specifici. Una libreria personalizzata può conservare entrambi i tipi di elementi per riusarli.

Queste scelte risolvono problemi diversi. Salvare un SVG in una libreria non trasforma, da solo, i suoi tracciati in una forma nativa del diagramma. Il riferimento alle forme personalizzate di draw.io distingue le immagini incorporate dalle forme definite nel suo formato XML.

Se i diagrammi sono scritti in Mermaid, usa la procedura con pacchetti di icone SVG personalizzate per registrare la grafica mantenendo etichette e connettori nel sorgente del diagramma.

Scegli il comportamento prima di convertire la grafica

Immagina un piccolo simbolo di dispositivo: un corpo rettangolare con un indicatore circolare. Vuoi riusarlo in alcuni diagrammi di processo.

In un diagramma da presentazione, il dispositivo potrebbe richiedere soltanto un aspetto coerente. In un diagramma di connessioni, potresti volere che le linee si colleghino al punto medio dei bordi sinistro e destro. Scrivi questo requisito prima di preparare un altro file.

Inserisci un SVG quando basta il suo aspetto

La guida ufficiale all'inserimento SVG documenta il trascinamento di un file SVG dal computer sulla tela. Puoi anche usare Arrange → Insert → Image. Scegli Actual Size quando richiesto, poi ridimensiona la grafica inserita secondo necessità.

Per l'esempio del dispositivo, usa una copia di lavoro e controlla il piccolo indicatore circolare dopo il ridimensionamento. Una forma leggibile a dimensioni piene può perdere dettagli utili in un diagramma compatto.

Conserva separatamente il sorgente grafico modificabile. Se devi spostare il cerchio dentro il dispositivo, apporta la modifica nell'editor sorgente e sostituisci l'immagine da consegnare. Non perdere tempo cercando un comando Ungroup soltanto perché l'SVG contiene diverse parti visibili. La nostra guida agli oggetti SVG e alla separazione dei gruppi spiega come la struttura del file influisca su quell'aspettativa.

Anche un normale disegno SVG di un intero diagramma richiede attenzione. La guida all'inserimento di draw.io spiega che un SVG ordinario non contiene le informazioni sui connettori necessarie a ricostruire un diagramma modificabile. Conserva il file originale del diagramma quando lo possiedi.

Ricolorare un SVG incorporato ha requisiti propri

Draw.io fornisce un collegamento limitato fra grafica SVG incorporata e controlli dei colori. La guida ai colori SVG incorporati usa regole CSS dentro l'SVG e un'impostazione editableCssRules nello stile dell'oggetto inserito. Questa funzionalità riguarda le immagini incorporate, non quelle incluse tramite link.

Per un SVG già strutturato con regole CSS, seleziona l'immagine inserita, scegli Edit Style e aggiungi:

editableCssRules=.*;

Il modello documentato seleziona tutte le regole idonee. Va nello stile dell'oggetto draw.io, non come riga incollata nel markup del disegno SVG.

Ispeziona i controlli risultanti prima di costruirci intorno una libreria. Se non appaiono controlli utili dei colori, confronta il sorgente con l'esempio di classi CSS della guida ufficiale. Non presumere che l'impostazione riorganizzi attributi SVG arbitrari dei colori, separi l'indicatore del dispositivo o crei punti di connessione.

Per grafica che richiede soltanto un cambiamento permanente di colore, modificare il sorgente SVG può essere più semplice. Salva una copia e verifica di nuovo l'aspetto importato.

Usa uno stencil nativo per una forma definita deliberatamente

Uno stencil nativo descrive la forma nella sintassi XML di draw.io. Non è il file SVG rinominato in .xml. Il tutorial sulle forme personalizzate usa Arrange → Insert → Shape per aprire l'editor delle forme e Preview per ispezionare la definizione.

Ecco un piccolo punto di partenza originale per il simbolo del dispositivo:

<shape name="two-port-device" w="100" h="60" aspect="fixed" strokewidth="inherit">
  <connections>
    <constraint x="0" y="0.5" perimeter="0" name="left"/>
    <constraint x="1" y="0.5" perimeter="0" name="right"/>
  </connections>
  <background>
    <rect x="0" y="0" w="100" h="60"/>
  </background>
  <foreground>
    <fillstroke/>
    <ellipse x="40" y="20" w="20" h="20"/>
    <stroke/>
  </foreground>
</shape>

Il rettangolo esterno e il cerchio centrale sono intenzionalmente semplici. I valori delle coordinate definiscono lo spazio di disegno di questa illustrazione; non sono misure fisiche del dispositivo.

Il riferimento XML specifica coordinate relative delle connessioni. Con perimeter="0", questi due vincoli collocano punti ai punti medi sinistro e destro. Richiede inoltre l'operazione di disegno della geometria di sfondo all'inizio del primo piano, motivo per cui fillstroke appare lì.

Visualizza l'anteprima della forma, aggiungila a un diagramma di prova e prova il comportamento effettivamente necessario:

1. Cambia colore del riempimento e della linea.
2. Collega un connettore a ogni punto medio previsto.
3. Sposta il dispositivo e ispeziona entrambi i collegamenti.
4. Ridimensionalo e controlla cerchio, contorno e posizioni dei connettori.

È una piccola definizione da adattare, non un convertitore generale da SVG a stencil. Se il dispositivo illustrato include molti dettagli decorativi, decidi quali appartengono al simbolo del diagramma. Ridisegnare poche primitive essenziali può essere più facile da mantenere che trasferire ogni contorno in uno stencil.

Salva una libreria dopo che l'elemento supera i controlli

La libreria è il passaggio di riuso. La guida alle librerie personalizzate documenta File → New Library, la scelta della posizione di memorizzazione e l'aggiunta di immagini o il trascinamento di forme dalla tela. Le librerie personalizzate usano l'estensione .xml.

Salva il dispositivo con un nome che indichi cosa contiene, come «Grafica del dispositivo» o «Dispositivo con due porte». Mantienili come voci separate se entrambi sono utili.

Apri poi un nuovo diagramma e inserisci l'elemento salvato. Ripeti una modifica significativa: ricolora la grafica se era configurata così, oppure collega un connettore allo stencil nativo. Questo individua una libreria contenente una versione precedente del simbolo.

Il solo nome di file .xml non indica se l'elemento sia geometria nativa. Sia una libreria sia la definizione di uno stencil coinvolgono XML, ma una libreria può contenere immagini, gruppi, forme personalizzate o interi diagrammi. Ispeziona il comportamento dell'elemento inserito.

Recupera grafica raster soltanto quando serve un originale vettoriale

Se l'illustrazione originale del dispositivo esiste ormai soltanto come PNG o scansione, la procedura da clipart a SVG di PerfectVector può aiutare a preparare un candidato grafico. Ritaglia una copia sul motivo, visualizza l'anteprima del risultato vettoriale e ispeziona contorno esterno, dettaglio circolare, spazi vuoti e sfondo indesiderato. Scarica l'SVG e provalo con il metodo di inserimento immagine.

Questo fornisce un sorgente di cui verificare l'aspetto. Non definisce le porte sinistra e destra del dispositivo, il significato dei connettori o l'XML dello stencil nativo. Creali deliberatamente se il diagramma li richiede.

Un simbolo molto semplice con rettangolo e cerchio può essere più rapido da disegnare direttamente. Il ricalco è più utile quando l'illustrazione rimasta contiene curve caratteristiche da conservare. Per motivi disegnati a mano, la guida di preparazione delle illustrazioni di mappe tratta la pulizia della grafica disegnata prima del ricalco.

Se l'SVG diventa ancora pixelato quando viene ingrandito, controlla se contiene una bitmap incorporata con la diagnosi delle immagini raster SVG. La panoramica sulla vettorializzazione delle immagini spiega la differenza più ampia fra conservare pixel e recuperare forme.

FAQ

Importare un SVG lo rende uno stencil draw.io nativo? No. La procedura di inserimento immagine incorpora grafica. Uno stencil personalizzato nativo usa la definizione XML delle forme di draw.io per geometria, stili e punti di connessione.

Posso cambiare i colori in un SVG incorporato? Draw.io documenta la modifica dei colori tramite regole CSS SVG adatte e l'impostazione editableCssRules nello stile dell'oggetto inserito. Controlla la struttura sorgente e i controlli esposti dopo l'inserimento.

Una libreria personalizzata converte i tracciati SVG in forme native? Una libreria conserva elementi riutilizzabili, incluse immagini e forme personalizzate native. Salvare un'immagine in una libreria non aggiunge da solo geometria nativa o semantica dei connettori.

Vettorializzare un PNG crea punti di connessione per il diagramma? No. La vettorializzazione può recuperare contorni grafici. Definisci separatamente punti di connessione e comportamento nativo del diagramma quando sono necessari.

Fonti

1. draw.io — Inserire immagini SVG in un diagramma — Inserimento delle immagini, dimensionamento e limiti della ricostruzione dei connettori del diagramma da SVG.
2. draw.io — Creare e modificare forme personalizzate complesse — Geometria XML nativa, vincoli delle connessioni e operazioni di disegno.
3. draw.io — Modificare i colori nelle immagini SVG incorporate — Modifica delle regole CSS e requisiti delle immagini incorporate rispetto a quelle collegate.
4. draw.io — Creare forme personalizzate — Editor degli stencil, procedura di anteprima e stili predefiniti.
5. draw.io — Lavorare con librerie di forme personalizzate — Creazione, salvataggio e riuso di elementi misti di libreria.

Scegli il comportamento necessario, prepara un simbolo di dispositivo e provalo in un nuovo diagramma. Se rimane soltanto grafica raster, prepara un candidato SVG, ispeziona i contorni e controlla l'immagine inserita prima di salvarla nella libreria.