Importare SVG
Portare dentro disegno vettoriale da Illustrator, Affinity Designer, Inkscape o Figma come livelli Forma modificabili, e le funzioni SVG che non sopravvivono.
Qui un SVG diventa geometria vera: i tracciati si trasformano in livelli Forma con vertici e maniglie che puoi modificare con lo strumento Nodo, non in un'immagine di un disegno. I gruppi presenti nel file diventano gruppi nel pannello Livelli.
Ci sono quattro strade d'ingresso, e tutte usano lo stesso lettore:
- File ▸ Importa ▸ SVG… importa nel progetto che hai aperto
- File ▸ Apri… con un SVG selezionato costruisce attorno a lui un nuovo progetto senza titolo
- Rilasciare il file sulla tela lo importa; rilasciarlo altrove lo apre come nuovo progetto
- Ctrl+V incolla markup SVG copiato da un'altra applicazione
Importato da un file, il gruppo contenitore prende il nome del file. Incollato dagli appunti, si chiama SVG.
Che cosa diventa che cosa
| Nell'SVG | In Celas Studio |
|---|---|
| g, a e un svg annidato | Un livello Gruppo |
| path, rect, circle, ellipse, polygon, polyline, line | Un livello Forma ciascuno |
| image | Un livello Immagine |
| linearGradient, radialGradient | Un riempimento o una traccia a sfumatura sulla forma che lo usa |
| text | Un livello segnaposto vuoto con il nome dei primi caratteri |
Ogni comando di tracciato viene compreso, archi ellittici compresi, e tutto quanto viene convertito in Bézier cubiche. Un tracciato composto (una lettera O, una ciambella, qualsiasi cosa con un buco) resta un solo livello Forma con i suoi contorni interni intatti, così il buco funziona ancora e l'insieme resta modificabile come un unico oggetto.
Riempimenti, regola di riempimento, tracce, spessore della traccia, estremità e giunzioni, opacità e sfumature arrivano tutti, e lo spessore della traccia viene scalato insieme al disegno così il peso della linea risulta giusto. Tutto ciò che nel file è marcato come nascosto arriva nascosto.
I colori vengono letti in ogni forma CSS che il modello di disegno usa: colori con nome, #RGB, #RGBA, #RRGGBB, #RRGGBBAA, rgb() e rgba(), con le percentuali accettate nelle forme numeriche. Le forme esadecimali a quattro e a otto cifre portano attraverso il loro canale alfa.
Un rect arrotondato con rx diverso da ry si importa con angoli davvero ellittici. Quando rx e ry coincidono resta invece un rettangolo semplice che porta un raggio d'angolo, così la maniglia del raggio d'angolo dello strumento Nodo continua a funzionarci sopra.
Un <image> collegato viene risolto rispetto alla cartella dell'SVG stesso, quindi il disegno che fa riferimento a un file vicino si carica. Un URI data: incorporato viene decodificato direttamente.
I gruppi non portano trasformazioni
Le trasformazioni presenti nel file vengono incorporate nel disegno stesso, quindi i gruppi che ottieni sono pura struttura senza rotazione né scala proprie. Il disegno atterra esattamente dove il file dice che deve stare, e dopo sei libero di ruotare o scalare il gruppo senza che nulla si sposti sotto.
Che cosa non è supportato
Il lettore copre il modello di disegno, non l'intera specifica SVG. Tutto ciò che segue viene saltato senza messaggio.
- Blocchi style CSS e attributi class: vedi l'avviso più sotto
- use e symbol: fogli di sprite e istanze ripetute si importano vuoti
- clipPath e mask: il ritaglio non viene applicato, quindi il disegno che era ritagliato via può ricomparire
- Riempimenti a pattern, che ripiegano su un grigio piatto
- Effetti filter: sfocature, ombre esterne e il resto
- marker: punte di freccia ed estremità di linea
- stroke-dasharray e stroke-dashoffset, quindi le tracce tratteggiate si importano continue
- switch, foreignObject e le animazioni SMIL
- Testo: carattere, dimensione e posizione vanno persi e resta solo un livello segnaposto con un nome
- Unità percentuali e relative, e le trasformazioni scritte dentro un attributo style
Preparare un file che si importi pulito
- Converti il testo in contorni prima di esportare; il testo arriva solo come segnaposto.
- Espandi contorni, tratteggi, pattern e ogni effetto filtro che vuoi conservare.
- Rilascia le maschere di ritaglio, oppure ritaglia il disegno a ciò che deve essere visibile.
- Espandi simboli e istanze ripetute così nulla dipende da use.
- Esporta con gli attributi di presentazione invece che con il CSS, e dai al documento un viewBox.
Dimensione e posizionamento
Larghezza e altezza del documento vengono lette in pixel, punti, pica, pollici, millimetri o centimetri, e combinate con il viewBox per scalare il disegno in modo sensato. Un file dimensionato in percentuali (il classico logo web con "width=100%") viene importato alla dimensione del suo viewBox invece di essere stirato. Il disegno viene poi centrato sulla tua tela.