Una guida pratica agli strumenti SVG e di progettazione

Una buona comprensione di SVG è un'abilità rara. Sorprendentemente spesso, SVG viene trattato solo come un altro formato di immagine. Usiamo SVG a causa della sua scalabilità e delle dimensioni del file più piccole, ma in realtà SVG è molto di più!

In questo articolo, farò luce su tre degli strumenti di progettazione più popolari: Adobe Illustrator, Sketch e Figma. Sono disponibili anche altri strumenti che supportano SVG che possono avere altre funzionalità e implementare altre soluzioni.

Nota : se non diversamente indicato, il contenuto di questo articolo si riferisce a SVG 1.1 2a edizione. Alcuni dei punti discussi di seguito non si applicherebbero a SVG 2, tuttavia, non ha ancora raggiunto lo stato di raccomandazione, lasciando SVG 1.1 come la specifica più aggiornata.

Perché preoccuparsi degli strumenti di progettazione?

SVG è un linguaggio di markup basato su XML e, come qualsiasi altro linguaggio di programmazione, può essere scritto e modificato in un editor di testo. Quindi in teoria, a differenza dei file JPG o PNG, non abbiamo bisogno di alcun software GUI per creare SVG. Tuttavia, nella stragrande maggioranza dei casi, l'utilizzo di applicazioni di progettazione grafica è inevitabile.

Lavorare con forme e grafica complicate in un formato basato su testo è assolutamente possibile, ma di solito sarebbe molto complicato e noioso. Pertanto, è pratica comune utilizzare applicazioni come Adobe Illustrator, Sketch o Figma per progettare graficamente graficamente, quindi esportarli in un formato SVG.

Quindi, non importa se sei un designer che codifica o uno sviluppatore attento al design, una buona competenza nel lavorare con SVG richiede un po' di conoscenza da entrambe le parti: gli strumenti di progettazione e il linguaggio SVG stesso. Per comprendere meglio la relazione tra i due, diamo un'occhiata più da vicino a ciò che le app di progettazione grafica hanno da offrire e come le loro funzionalità si traducono in SVG.

Forme di base

Molti elementi grafici vettoriali sono costituiti da poche forme di base: raggruppate, trasformate e combinate tra loro. La tabella seguente rappresenta quali strumenti di forma sono disponibili in Illustrator, Sketch e Figma e quali elementi SVG vengono esportati come.

Ellissi e cerchi

Una delle forme di base in ogni strumento di progettazione è un'ellisse. In SVG, troveremo un elemento <ellipse /> corrispondente, definito dalle coordinate del centro dell'ellisse ( cx e cy ) e da due raggi ( rx e ry ).

Ecco come appare un'ellisse in SVG:

 <ellipse cx="400" cy="300" rx="250" ry="150"/>

Il tipo molto speciale di ellisse è un cerchio. Un cerchio è un'ellisse con raggi rx e ry uguali tra loro. SVG ha il suo elemento <circle /> che prende un attributo in meno poiché c'è un solo raggio da prendere in considerazione:

 <circle cx="400" cy="300" r="250"/>

In caso di ellissi e cerchi, tutti gli strumenti di progettazione funzionano allo stesso modo: lo strumento Ellisse in Illustrator, lo strumento Ovale in Schizzo e lo strumento Ellisse in Figma genereranno tutti l'elemento <ellipse /> a meno che i raggi non siano uguali: in questi casi ci ritroveremo con un elemento <circle /> .

Rettangoli E Rettangoli Arrotondati

Un'altra forma di base comune a tutti gli strumenti di progettazione è un rettangolo. Nel caso di tutti gli strumenti di progettazione, l'utilizzo di uno strumento rettangolo genera un elemento <rect /> in SVG. Un <rect /> di base è definito da 4 attributi: le sue coordinate x , insieme alla sua larghezza y altezza:

 <rect x="150" y="100" width="500" height="400"/>

Si noti che mentre la posizione di <ellipse /> e <circle /> è definita dai loro centri geometrici, la posizione di un <rect /> è definita dalle coordinate del suo angolo in alto a sinistra.

Oltre ai rettangoli di base, utilizziamo spesso rettangoli con angoli arrotondati. In tutti e tre gli strumenti di progettazione, puoi trasformare un rettangolo in un rettangolo arrotondato applicandogli un raggio del bordo nella finestra Impostazioni o nel pannello Proprietà .

Inoltre, in Sketch e Illustrator, sono disponibili strumenti dedicati alla creazione di rettangoli arrotondati ( Strumento Rettangolo arrotondato in Illustrator e Strumento arrotondato in Sketch). Tuttavia, non c'è differenza tra un rettangolo regolare con un raggio applicato e un rettangolo arrotondato disegnato con uno strumento Rettangolo arrotondato .

Pertanto, indipendentemente da come creato, un rettangolo arrotondato verrà esportato utilizzando la seguente sintassi:

 <rect x="150" y="100" width="500" height="400" rx="30"/>

In questo caso, rx è un attributo responsabile del raggio degli angoli arrotondati:

Rettangoli arrotondati con angoli ellittici

Una differenza significativa tra gli strumenti di progettazione e SVG è il modo in cui vengono definiti i raggi. In tutti gli strumenti di progettazione che consideriamo, il raggio del bordo è definito da una singola variabile. Possiamo pensare ai raggi di confine come piccoli cerchi usati per mascherare gli angoli dei nostri rettangoli:

Nel frattempo, in SVG i raggi di confine possono essere definiti da due attributi: rx (come nell'esempio sopra) e ry . Ci permettono di creare rettangoli con angoli ellittici. Puoi pensare a angoli arrotondati come ellissi usate come maschere invece di cerchi:

 <rect x="150" y="100" width="500" height="400" rx="40" ry="30"/>

Quindi, in questo caso, SVG ti offre più possibilità rispetto agli strumenti di progettazione.

Nota : anche se non è esattamente correlato all'argomento di questo articolo, vale la pena notare che la differenza sopra descritta si applica sia a SVG che a HTML/CSS. La proprietà CSS border-radius , utilizzata per definire lo stile di nodi come div e span, consente anche di creare angoli ellittici. Puoi vedere un esempio qui sotto.

 border-radius: 10px 5% / 20px 25em 30px 35em;

I valori prima della barra ( / ) sono raggi orizzontali (equivalenti a rx ) e i valori dopo la barra sono valori verticali (equivalenti a ry ).

Rettangoli arrotondati con raggi multipli

Negli strumenti di progettazione, come nei CSS, ciascuno degli angoli di un rettangolo può essere controllato separatamente. In altre parole, ogni angolo può avere il proprio raggio (o nessun raggio del tutto). Tale operazione non è possibile su un elemento <rect /> in SVG. Ogni elemento <rect /> ha solo un attributo rx e un ry . Se crei un rettangolo con più raggi applicati ai suoi angoli, lo strumento di progettazione genererà un elemento <path /> invece di un elemento <rect /> . Parleremo più di un elemento <path /> nella prossima sezione.

Angoli lisci

Una delle caratteristiche interessanti introdotte da Sketch e Figma non molto tempo fa sono gli angoli smussati. In breve, gli angoli lisci utilizzano un raggio di confine irregolare per ottenere un risultato che sembra più naturale e, beh, liscio. L'applicazione più comune di angoli smussati sono le icone delle app e altri elementi arrotondati su iOS. Apple ha utilizzato angoli arrotondati "normali" sulla sua piattaforma mobile fino a iOS6, per poi passare a quelli che oggi chiamiamo angoli "lisci" come parte della grande riprogettazione introdotta nel 2013 (iOS7).

In Schizzo, puoi ottenere l'effetto angoli smussati passando da Angoli arrotondati e Angoli smussati in Impostazioni . Figma ti offre un controllo ancora maggiore sugli angoli poiché puoi manipolare il livello di levigatezza nel menu Smussatura angoli .

Sfortunatamente, nessuno di questi può essere facilmente tradotto in SVG poiché SVG non conosce affatto il concetto di angoli smussati. C'è anche un'importante differenza tra ciò che fanno Sketch e Figma se si tenta di esportare un rettangolo con angoli smussati in SVG.

Figma ignora gli angoli smussati ed esporta un rettangolo come un normale elemento <rect /> con angoli arrotondati. Sketch, d'altra parte, esporta un rettangolo con angoli smussati come un <path /> che tenta di replicare la vera forma degli angoli smussati. Quindi Figma ci offre una precisione peggiore per mantenere un rettangolo un rettangolo, mentre Sketch punta alla massima precisione possibile a scapito della semantica e di dimensioni del file maggiori. Se desideri capire meglio cosa significa questa differenza, approfondiremo i pro e i contro della conservazione delle forme di base un po' più tardi.

Linee

Il prossimo tipo base di elemento è una linea. In questo caso, ci riferiamo a una linea come a una singola linea retta che va dal punto A al punto B. Illustrator, Sketch e Figma offrono tutti i propri strumenti di linea dedicati al disegno delle linee. In SVG, abbiamo un elemento <line /> . Sono richiesti quattro dei suoi attributi: le coordinate del suo punto iniziale e le coordinate del suo punto finale:

 <line x1="100" y1="100" x2="200" y2="200"/>

Quando si tratta di esportare, Illustrator e Figma esporteranno le linee come elementi <line /> ove possibile, mentre Sketch calcolerà sempre le linee in elementi <path /> .

Polilinee

Ora diamo un'occhiata alle polilinee. La polilinea è una serie connessa di linee rette. Le polilinee non dispongono di strumenti dedicati negli strumenti di progettazione. Possono essere disegnati con uno strumento Penna (in Illustrator e Figma) o con uno strumento Vettore (in Schizzo).

In SVG, le polilinee sono definite con un elemento <polyline /> . <polyline /> viene disegnato utilizzando un attributo points che è un elenco di coordinate che definiscono tutti i punti che creano una polilinea. Diamo un'occhiata a un esempio di polilinea composta da tre segmenti e quattro punti:

 <polyline points="10,20 10,20 30,10 40,20" />

Illustrator e Sketch traducono le polilinee in elementi <polyline/> , mentre Figma esporta le polilinee come <path /> s.

Frecce

In tutti e tre gli strumenti, puoi controllare le estremità delle linee per trasformarle in frecce e simili. E tutti e tre gli strumenti esporteranno tali linee come <path /> s, anche se senza i tappi applicati le stesse forme verrebbero tradotte in <line /> s o <polyline /> s. È perché SVG non supporta le frecce? Non esattamente.

In realtà, la specifica SVG include estremità di linea personalizzabili note come marker. Tuttavia, nessuno degli strumenti di progettazione menzionati utilizza marcatori nell'SVG che genera.

<marker> è un elemento SVG separato che può essere definito all'interno di <defs> SVG e quindi utilizzato su elementi <line> , <polyline> e <path> con attributi marker: marker , marker-start , marker-mid e marker-end . Se desideri saperne di più su questi attributi, ti consiglio di controllare la documentazione ufficiale del W3C.

Poligoni E Stelle

L'ultima forma di base a cui daremo un'occhiata è un poligono. Il poligono è una forma chiusa composta da linee rette, ad esempio una stella o un esagono. Puoi anche pensarlo come una polilinea chiusa. La sintassi di un elemento <polygon /> in SVG è in realtà la stessa di un <polyline /> . L'unica differenza tra i due è che nel <polygon /> l'ultimo punto dell'elenco è sempre connesso al primo punto per rendere un <polygon /> una forma chiusa.

Alcuni poligoni sono poligoni regolari. La particolarità dei poligoni regolari è che tutti i loro lati e angoli sono uguali. Per disegnare poligoni regolari, come un esagono o un pentagono, puoi utilizzare uno strumento Poligono , lo stesso in Illustrator, Sketch e Figma. Gli strumenti Poligono in Illustrator e Sketch genereranno elementi <polygon /> in SVG. In Figma, invece, tutte le forme realizzate con uno strumento Poligono risultano in elementi <path /> .

Tutti e tre gli strumenti di progettazione hanno anche strumenti Star dedicati per disegnare stelle. Tuttavia, quando si tratta di esportare, le forme create con gli strumenti Stella si comportano esattamente come quelle create con gli strumenti Poligono . In SVG, le stelle sono solo poligoni, NESSUN elemento ~~<star />~~ .

È importante ricordare che gli strumenti Stella e Poligono vengono utilizzati per creare stelle e poligoni regolari, mentre l'elemento <polygon /> in SVG può essere utilizzato per qualsiasi poligono, regolare o irregolare.

Tutte le strade portano a <path />

Come abbiamo già appreso, in SVG ci sono tre forme base dedicate al disegno di forme fatte di linee rette: <line /> , <polyline /> e <polygon /> . Ma cosa succede se vorremmo che le nostre linee fossero curve? È giunto il momento di parlare dell'elemento <path /> .

L'elemento <path />

<path /> è l'elemento SVG più versatile. Può essere utilizzato per disegnare qualsiasi linea e forma possibile, incluse, ma non limitate a, tutte le forme di base sopra elencate. Infatti, ogni forma di base ( <circle/> , <ellipse /> , <rect /> , <line /> , <polyline /> , <polygon /> ) può essere descritta come un elemento <path /> . Inoltre, ci sono molte forme che possono essere create con <path /> ma non è possibile creare con nessun altro elemento SVG. Per saperne di più su <path /> e la sua sintassi, ti consiglio di leggere questo eccellente articolo di Chris Coyier.

Ora, come creiamo elementi <path /> negli strumenti di progettazione? Prima di tutto, come abbiamo appreso sopra, alcuni dei livelli creati con gli strumenti di forma calcolano in elementi <path /> anche se teoricamente potrebbero essere altri elementi (ad es. Figma esporta tutti i poligoni come <path /> s anche se avrebbero potuto essere definito come <polygon /> s. Quindi, ogni altra forma irregolare che disegniamo con uno strumento Penna o uno strumento Vettore deve essere esportata come <path /> poiché non c'è nessun altro elemento SVG che possa definirli. Infine, in Sketch e Figma, possiamo convertire qualsiasi forma di base in un livello che calcola in un <path /> . In Sketch, possiamo farlo scegliendo Livello > Combina > Appiattisci , mentre Figma possiamo trovare questa funzione in Oggetto > Appiattisci selezione ( ⌘ + E su macOS, Ctrl + E su Windows).

Operazioni booleane

Le operazioni booleane sono funzioni eseguite sulle forme per combinarle in modi diversi. In Illustrator, Sketch e Figma, ci sono 4 operazioni booleane standard:

• Unione (Unire)
  Una somma delle forme
• Sottrai (anteriore meno)
  Forma inferiore sottratta dall'area comune tra le forme
• Interseca
  L'area comune tra le forme
• Differenza (Escludi)
  Una somma delle forme sottratte dall'area comune tra le forme.

In Illustrator, tutte queste funzioni generano un'unica forma (contorno). È un'azione che non può essere annullata, a parte l'utilizzo di Annulla ( ⌘ + Z su macOS, Ctrl + Z su Windows). In Sketch e Figma, d'altra parte, le operazioni booleane creano gruppi di livelli che possono essere separati in seguito senza alcun danno alle forme all'interno. Tuttavia, puoi unire questi gruppi in un'unica forma per ottenere un risultato simile a quello di Illustrator usando le funzioni Appiattisci menzionate nel paragrafo precedente.

La domanda è: SVG supporta le operazioni booleane? No, non è così. Vengono semplicemente fusi. Pertanto, ogni forma combinata che crei con operazioni booleane in Figma o Sketch verrà esportata come un singolo elemento <path /> .

Sembra lo stesso, quindi perché è importante?

In termini di come possono essere definite forme diverse in SVG, la sua sintassi è estremamente versatile. Consideriamo un rettangolo di base:

Tale forma può essere definita in SVG in diversi modi. Può essere un elemento <rect /> , un elemento <polygon /> . Sicuramente può essere un elemento <path /> (poiché tutto può essere un elemento <path /> ). Può anche essere un elemento <line /> (o un elemento <polyline /> ) se decidiamo di crearlo utilizzando i tratti anziché i riempimenti.

Ciascuno di questi elementi rende un rettangolo che sembra esattamente lo stesso:

Ma se il risultato finale (la grafica resa da un programma utente in un browser) sembra lo stesso, è davvero importante quale approccio scegliamo? Bene, lo fa. Come regola generale, consiglierei sempre di utilizzare forme di base ove possibile.

Ultimo ma non meno importante, usa le forme più ovvie per il caso dato. Ad esempio, non creare rettangoli con linee o cerchi con rettangoli se non hai una buona ragione. Ci sono almeno alcune argomentazioni dietro:

1. Semantica/leggibilità
   Gli strumenti di compressione, come SVGO, ti danno la possibilità di calcolare tutte le forme di base per gli elementi del tracciato. Può farti risparmiare qualche morso ma ridurrà sicuramente la leggibilità del tuo codice. La sintassi di <path /> è estremamente non intuitiva, quindi se il tuo SVG sta per essere modificato in un editor di codice piuttosto che in uno strumento di progettazione, sarà molto più facile capirlo se mantieni le forme di base come forme di base.
2. Dimensione del file
   La compressione delle forme sui percorsi può aiutarti a minimizzare i file, ma non è sempre così! Ad esempio, un rettangolo arrotondato occupa molto più spazio come <path /> che come <rect /> .
3. Animazioni
   Hai mai provato ad animare SVG? È molto divertente, purché operi su SVG semantico e pulito. Con le forme di base, puoi facilmente manipolare parametri come raggio, larghezza, altezza o posizione del punto. Se unisci le tue forme in percorsi, la maggior parte di queste operazioni sarà molto più difficile da realizzare o semplicemente impossibile.
4. Varianti/reattività
   Ricorda che SVG non è un'immagine statica come JPG. Puoi modellarlo, tematizzarlo, renderlo reattivo e così via. Come per le animazioni, mantenere il tuo file ben strutturato e semantico ti aiuterà sicuramente con qualsiasi di queste attività.

Come per ogni regola, puoi trovare delle eccezioni. Ma, in generale, è buona norma mantenere il tuo SVG il più leggibile, flessibile e strutturato possibile.

Ora, diamo un'occhiata ad altri attributi e funzionalità come viewBox, gruppi, trasformazioni ed effetti visivi.

width , height e viewBox

Se hai già una certa esperienza con SVG, probabilmente avrai notato che il tag di apertura <svg> ha spesso i seguenti attributi: width , height e viewBox . Negli strumenti di progettazione abbiamo le dimensioni delle tavole da disegno (o delle cornici nel caso di Figma). Quindi, in che modo esattamente questi valori sono correlati tra loro?

Iniziamo con la spiegazione degli attributi <svg> appena menzionati. Puoi pensare a un viewBox come a una tela virtuale sotto forma di un sistema di coordinate. Il centro di questo sistema di coordinate è posizionato nell'angolo superiore sinistro dell'area designata. Tutti gli elementi all'interno del <svg viewBox="…"> vengono posizionati in base a questo sistema di coordinate e anche ritagliati da esso: tutto ciò che eccede il viewBox non verrà visualizzato. viewBox accetta 4 numeri come valore:

 <svg viewBox="0 0 12 8"> … </svg>

Poiché SVG sta per Scalable Vector Graphics, non sono necessarie unità su questi numeri. Immaginalo come un sistema di coordinate astratto che può essere scalato su e giù a qualsiasi dimensione. Non preoccuparti troppo dei primi due numeri, molto probabilmente non ne avrai bisogno. Gli ultimi due sono ciò che di solito conta. Queste sono le dimensioni effettive della nostra tela SVG.

viewBox non determina la dimensione di SVG. Specifica solo le coordinate dell'area in cui è disegnato il nostro SVG. Pertanto, se utilizzato sul Web, <svg> con un viewBox specificato occuperà sempre tutto lo spazio disponibile e manterrà il rapporto impostato dal viewBox , a meno che non lo impediamo con CSS o impostiamo gli attributi di width e/o height .

width e height sono gli attributi <svg> che impostano la larghezza e l'altezza effettive dell'elemento SVG. Al contrario di viewBox , dovrebbero utilizzare unità specificate come pixel, ems o rem. Ciò significa che possiamo anche trasformare l'SVG con loro — se il rapporto tra la width e l' height è diverso dal rapporto tra i valori di viewBox , SVG distorcerà la grafica specificata all'interno di viewBox in base ai valori di width e height :

Ora, cosa succede quando esportiamo SVG dagli strumenti di progettazione? In Sketch e Figma, tutte le risorse (non importa se sono livelli singoli, gruppi o tavole da disegno) riceveranno sempre un viewBox uguale alle dimensioni dell'elemento esportato e width e height impostate in pixel, pari agli ultimi due valori del viewBox . In Illustrator, tutte le risorse hanno un viewBox , specificato allo stesso modo di Sketch e Figma, ma nessuna width e height applicate.

Gruppi

I gruppi sono il mezzo di base per organizzare i livelli negli strumenti di progettazione. Oltre all'impostazione della gerarchia, i gruppi vengono utilizzati per applicare operazioni in blocco, come le trasformazioni, a più elementi. Non c'è alcuna differenza significativa nel modo in cui i gruppi funzionano in Illustrator, Sketch e Figma e, fortunatamente, la funzionalità di base dei gruppi SVG ( <g>…</g> ) è praticamente la stessa.

Trasforma

In SVG, ci sono cinque trasformazioni di base che possiamo applicare a un elemento:

1. translate : sposta l'elemento lungo l'asse verticale e/o orizzontale;
2. scale : scala l'elemento lungo l'asse verticale e/o orizzontale:
3. rotate : crea una rotazione bidimensionale di un dato angolo specificato in gradi attorno a un dato punto;
4. skew ( skewX o skewY ): inclina l'elemento di un dato angolo specificato in gradi lungo l'asse verticale o orizzontale;
5. matrix : la più complessa e versatile delle funzioni di trasformazione disponibili. Dato che per spiegare come funzionano le trasformazioni matriciali, occorrerebbe molto parlare di algebra, va ben oltre lo scopo di questo articolo. Riconosciamo solo che matrix ti consente di eseguire molte trasformazioni complicate come allungamento, compressione, taglio e così via.

Nota : Nota che anche se alcune delle trasformazioni SVG sembrano molto simili alle trasformazioni CSS, non sono le stesse. Ad esempio, CSS offre funzioni di rotazione 2D e 3D mentre SVG ha solo una funzione di rotazione 2D. Inoltre, mentre CSS accetta varie unità angolari come gradi o radianti, le rotazioni SVG sono sempre impostate in gradi, quindi un'unità può essere omessa (es rotate(45) , NOT ~~rotate(45deg)~~ ).

Tutte queste trasformazioni possono essere applicate a qualsiasi elemento SVG, come forme o gruppi, e non sono distruttive, ovvero non influiscono sulla geometria originale dell'elemento. Applichiamo le trasformazioni tramite un attributo di transform :

 <g transform="scale(3) rotate(90) translate(50,100)"> … </g>

Diamo un'occhiata agli strumenti di progettazione ora! Quindi, la maggior parte delle trasformazioni che applichiamo negli strumenti di progettazione interagiscono direttamente con la geometria degli oggetti e la loro posizione sulla tela. Non sono indipendenti dalle forme e non verranno esportati come funzioni di trasformazione SVG.

Le rotazioni sono qui l'eccezione, con i loro valori memorizzati nell'Inspector separatamente dalla geometria dell'elemento e vengono esportati come una funzione transform="rotate(…)" .

È interessante notare che la stessa regola si applica ai capovolgimenti (riflessi) in Sketch e Figma (non in Illustrator!). Ognuno di loro ha il suo approccio però. Sketch utilizza una combinazione di ridimensionamento negativo e traduzione per ottenere un effetto capovolgimento, mentre Figma esegue un capovolgimento all'interno di una singola funzione di matrice.

Raggio di confine

Abbiamo già parlato di rettangoli arrotondati, ma per quanto riguarda l'arrotondamento di altre forme? Infatti, in tutti gli strumenti di progettazione di cui discutiamo, puoi arrotondare gli angoli di qualsiasi forma, non solo un rettangolo.

Ma che dire di SVG? Gli elementi <polygon /> e <path /> hanno anche gli attributi rx e ry ? Sfortunatamente no. Qualsiasi forma diversa da un rettangolo, una volta arrotondato uno qualsiasi dei suoi angoli, verrà sempre esportata come elemento <path /> trattando gli angoli arrotondati come parte integrante della geometria della forma.

Riempimenti E Tratti

Illustrator, Sketch e Figma supportano tutti riempimenti e tratti come proprietà di base di qualsiasi forma, e così accade in SVG. Pertanto, i riempimenti specificati negli strumenti di progettazione vengono esportati all'interno di un attributo di fill e i tratti vengono esportati all'interno di un attributo di stroke . Non pensare che sia tutto così semplice però. Il diavolo è nei dettagli.

Riempimento colore

Il riempimento colore è il più semplice dei riempimenti disponibili ed è specificato con un unico colore semplice (ad es #3fd8e2 ). In SVG, questo valore viene inserito direttamente nell'attributo fill (ad es. fill="#3fd8e2" ).

Gli strumenti di progettazione esportano i riempimenti colore con valori esadecimali (ad es #0000ff ), sebbene, in SVG, sia possibile utilizzare anche tutti gli altri schemi di denominazione noti ai CSS, come i nomi dei colori (ad es. blue ), i valori RGB (ad es rgb(0,0,255) ) o anche valori HSL (ad es hsl(240,100%,50%) ).

Riempi l'opacità

Quando si tratta di riempire l'opacità, SVG accetta colori semitrasparenti (es. valori RGBA), sebbene fornisca anche un attributo fill-opacity . A causa di problemi di compatibilità, l'utilizzo fill-opacity è un approccio consigliato ed è anche quello utilizzato da Figma e Sketch. (Non sto menzionando Illustrator qui, poiché Illustrator non ti consente di controllare l'opacità del riempimento.) Quindi, se vuoi creare un quadrato SVG riempito con un colore rosso semitrasparente, puoi fare quanto segue:

 <rect width="100" height="100" fill="rgba(255,0,0,0.5)" />

ma un approccio più consigliato (usato da Sketch e Figma) sarebbe:

 <rect width="100" height="100" fill="#ff0000" fill-opacity="0.5" />

Riempimento sfumato

Se hai familiarità con i CSS, potresti sapere che quando si tratta di sfondi, il passaggio tra sfondi colorati e sfumati è relativamente semplice. La stessa proprietà background-color (o background ) può essere utilizzata in entrambi i casi. Poiché i gradienti in SVG sono molto più vecchi dei gradienti CSS, anche la loro sintassi è abbastanza diversa.

Per usare un gradiente è SVG, devi prima definirlo all'interno dei <defs>…</defs> e poi fare riferimento ad esso in un attributo di fill , ad esempio:

 <defs> <linearGradient> <stop stop-color="red" offset="0%"></stop> <stop stop-color="blue" offset="100%"></stop> </linearGradient> </defs> <rect fill="url(#myGradient)" />

Quindi, ciò che accade durante l'esportazione SVG quando si utilizza un riempimento sfumato è che viene aggiunto un gradiente a <defs> e viene fatto riferimento nel codice seguente.

Una cosa importante da ricordare è che SVG supporta solo gradienti lineari e radiali. Gli effetti come il gradiente angolare o la mesh del gradiente non verranno esportati in SVG.

Riempimento motivo/immagine

Sketch e Figma offrono anche un riempimento immagine in cui una grafica raster viene utilizzata per riempire l'intero elemento o come motivo ripetuto.

Quando si tratta di esportare riempimenti immagine in SVG, in realtà è abbastanza simile ai gradienti. Le immagini vengono definite in <defs> con un elemento <pattern>…</pattern> e quindi referenziate all'interno di un attributo di fill :

 <defs> <pattern patternUnits="objectBoundingBox"> <use xlink:href="#picture"></use> </pattern> </defs> <rect fill="url(#myPattern)" />

Per farlo funzionare, l'immagine #picture di riferimento deve essere definita da qualche parte . Gli strumenti di progettazione li incorporeranno direttamente in SVG come elementi <image/> , sebbene non sia un approccio consigliato quando si tratta di prestazioni. Se hai davvero bisogno di utilizzare immagini raster nel tuo SVG, suggerirei di rimuovere il tag immagine dall'SVG e utilizzarlo invece come file autonomo:

 <defs> <pattern patternUnits="objectBoundingBox"> <use xlink:href="#picture"></use> </pattern> <image xlink:href="image.png"/> </defs> <rect fill="url(#myPattern)" />

Colpi

stroke in SVG, come l'attributo fill accetta colori in vari formati, ad esempio esadecimale, RGB o HSL. E allo stesso modo di fill , puoi controllare l'opacità del tratto con stroke-opacity . Inoltre, come con fill , i tratti possono utilizzare i gradienti come valore. Tutti questi effetti possono essere ottenuti negli strumenti di progettazione ed esportati con successo in SVG.

Cappucci e giunti di corsa

Tuttavia, ci sono anche alcuni attributi specifici del tratto. Innanzitutto, puoi controllare la larghezza del tratto. Gli strumenti di progettazione lo supportano ed è esportato come attributo stroke-width . Puoi anche controllare le estremità e le giunzioni dei tratti. SVG ti consente di definirli tramite stroke-linecap e stroke-linejoin . Ci sono tre possibili tappi: tappo di butt , tappo round e tappo square e tre possibili giunzioni: miter obliqua, giuntura round e bevel . Sia i cap che i join possono essere controllati in Illustrator, Figma e Sketch e i cap e i join disponibili corrispondono a quelli disponibili in SVG.

Tratti tratteggiati e punteggiati

Un altro effetto che possiamo ottenere con i tratti sono i tratti tratteggiati. In Illustrator e Figma, puoi impostare più trattini e spazi vuoti, mentre in Sketch è possibile solo una singola sequenza di trattini e spazi vuoti.

SVG ti consente di creare linee tratteggiate con un attributo stroke-dasharray . stroke-dasharray consente di passare una sequenza di più trattini e spazi vuoti come valore che corrisponde alle caratteristiche di Figma e Illustrator. Significa anche che Sketch non ti consente di utilizzare tutte le possibilità di SVG in questo caso.

Un caso limite interessante è una linea tratteggiata. Lo otteniamo impostando il stroke-linecap su round e la lunghezza di un trattino su zero, ad esempio:

 <line … stroke="black" stroke-dasharray="0 2" stroke-linecap="round"/>

Nota : Attualmente, gli utenti di Figma riscontrano un bug che non consente loro di creare linee tratteggiate. Ad esempio, l'utilizzo di 0, 10 o 10, 0 come trattini viene interpretato allo stesso modo di 10, 10 e fornisce una linea tratteggiata regolare anziché una linea tratteggiata. Fortunatamente, c'è un modo per aggirarlo. Invece di utilizzare zero, utilizzare un valore molto piccolo, ad esempio 0.0001, 10 — questo dovrebbe risultare in una linea perfettamente tratteggiata, come previsto.

Allineamento della corsa

C'è un'altra differenza molto più significativa tra gli strumenti di progettazione e SVG: l'allineamento del tratto. Illustrator, Sketch e Figma ti consentono tutti di controllare l'allineamento del tratto e di impostarlo all'interno, all'esterno o allinearlo al centro. Ma indovinate un po? SVG 1.1 non supporta l'allineamento del tratto. In SVG, tutti i tratti sono allineati al centro. Nessun colpo interno o colpo esterno. Ecco perché accadono cose molto strane quando esporti i tuoi tratti allineati all'esterno e all'interno in SVG.

Illustrator, in tal caso, esporta la forma e il relativo tratto come due forme separate. Quindi, se applichi un tratto interno o esterno a un rettangolo in Illustrator, in SVG risulterà in un rettangolo e un elemento <path /> separato che rappresenta il tratto del rettangolo, ad esempio:

 <rect x="10" y="10" width="120" height="120"/> <path d="M120,20V120H20V20H120M140,0H0V140H140V0Z"/>

Questo comportamento ha delle ripercussioni molto importanti. Ad esempio, non è più possibile modificare la larghezza del tratto o renderlo tratteggiato. Inoltre, non verrà ridimensionato allo stesso modo dei tratti "reali". Inoltre, Illustrator cambia le dimensioni della forma originale, ad esempio un quadrato 100×100 con un tratto interno in grassetto di 20 unità verrà effettivamente esportato come un quadrato 120×120 per evitare problemi di rendering. Alla fine, non è solo un ictus. È solo un'altra forma con un riempimento.

Figma e Sketch hanno però un approccio diverso. Esportano fedelmente tutti i tratti come tratti ma ricalcolano le dimensioni della forma. Quindi, se hai un cerchio con un raggio pari a 5 e un tratto interno pari a 2, quello che troverai nel tuo SVG sarà un cerchio con un raggio pari a 4 (e un tratto sempre uguale a 2).

Questo approccio consente a Figma e Sketch di evitare la maggior parte dei problemi menzionati nel caso di Illustrator. Tuttavia, con alcune forme più complicate questa tecnica potrebbe risultare non precisa e il risultato finale un po' diverso dal previsto. Ecco perché l'approccio di Sketch e Figma non è necessariamente migliore: è decisamente più semantico, performante e flessibile, ma la soluzione di Illustrator è più accurata.

Nota: lo stesso problema con l'allineamento del tratto si applica anche ai CSS. La proprietà CSS border non supporta nemmeno l'allineamento interno o esterno. Tuttavia, se lo desideri, puoi modificare questo comportamento con le proprietà outline e box-shadow .

Più riempimenti e tratti

Negli strumenti di progettazione, puoi aggiungere più riempimenti e tratti per livello. Questo ha molto senso una volta combinato con attributi come l'opacità e le modalità di fusione. Sfortunatamente, SVG non supporta tale funzionalità. Se esporti un livello che ha riempimenti e/o tratti, verrà moltiplicato e ciascuno dei tratti e dei riempimenti verrà applicato al proprio livello.

Ombre, filtri e altri effetti

Parliamo ora di alcuni effetti meno popolari. SVG è un linguaggio molto potente, in effetti molto più potente di come viene solitamente utilizzato sul web. Una delle caratteristiche più interessanti di SVG è un'ampia gamma di effetti visivi avanzati, noti come filtri SVG.

L'intero ambito delle possibilità del filtro SVG è troppo ampio per essere descritto in questo articolo. Se vuoi saperne di più su di loro, ti consiglio vivamente di dare un'occhiata ad alcuni discorsi e articoli su questo argomento di Sarah Soueidan.

Filters, same as patterns or gradients, need to be defined to apply them later to a layer. Every filter is defined as a <filter>…</filter> element that can contain numerous effects, known as filter primitives , each standing for a separate visual effect.

Filter primitives can be combined together to create filters. For example, this is what a basic blur effect applied to a rectangle looks like:

 <defs> <filter> <feGaussianBlur stdDeviation="10"/> </filter> </defs> <rect filter="url(#GaussianBlur)" width="200" height="300"/>

…but you can also create a more complex filter that consists of more than one filter primitive:

 <defs> <filter> <feGaussianBlur stdDeviation="10"/> <feMorphology operator="dilate" in="SourceGraphic" radius="3" /> </filter> </defs> <rect filter="url(#GaussianBlur)" width="200" height="300"/>

Out of the three design tools we discuss, only Illustrator lets you play with SVG filters. You can find them in the app's menu, under Effect > SVG Filters . Sketch and Figma are a completely different story. Any effects these applications offer are mostly focused on CSS and native implementations, eg Background Blur effect was implemented primarily for designing iOS apps and Drop/Inner Shadow effects parameters are matching CSS properties ( box-shadow and text-shadow ).

It doesn't mean we can't export these effects to SVG. We can. However, translating these effects to SVG is utterly not as straightforward as to CSS. Let's consider a square with a drop shadow applied.

This is how our square could look like, once exported to HTML/CSS:

 <style> .square { width: 100px; height: 100px; background: red; box-shadow: 10px 10px 24px 0 rgba(0,0,0,0.5); } </style> <div class="square"></div>

A similar square exported from Sketch to SVG gives us a significantly more complex piece of code:

 <defs> <rect x="14" y="14" width="100" height="100"></rect> <filter x="-31.0%" y="-31.0%" width="182.0%" height="182.0%" filterUnits="objectBoundingBox"> <feOffset dx="10" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> <feGaussianBlur stdDeviation="12" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix> </filter> </defs> <g> <use fill="black" filter="url(#filter-2)" xlink:href="#square"></use> <use fill="#FF0000" fill-rule="evenodd" xlink:href="#square"></use> </g>

What happens here is that Sketch duplicates the square, so we have two identical squares, one above another, and turns the duplicate into a shadow.

To accomplish this, it applies a filter to a duplicated square that consists of three different filter primitives:

• one to offset the square;
• one to set its color to semi-transparent black;
• one to blur it.

In other design tools, we would encounter a similar situation.

It doesn't mean that we should never, by all means, use shadows in SVG. It's handy to keep in mind though that as long as SVG gives you a very powerful toolkit to modify your graphics, some seemingly simple effects are not that simple to achieve at all.

Modalità di fusione

I metodi di fusione (come Scurisci , Moltiplica o Sovrapponi ) consentono di fondere due o più elementi combinando i loro valori in modi diversi. Ben noti ai grafici (e alle applicazioni come Adobe Photoshop), i metodi di fusione funzionano anche in Sketch, Figma e Illustrator.

In SVG, le modalità di fusione esistono come uno dei filtri. Hanno la loro primitiva di filtro <feBlend /> . Tuttavia, poiché la sintassi di <feBlend /> è piuttosto complicata, Sketch, Figma e Illustrator usano invece i CSS:

 .rectangle { mix-blend-mode: overlay; }

Con il supporto del browser mix-blend-mode che è abbastanza buono al giorno d'oggi, non dovrebbe essere un grosso problema. Tuttavia, se è importante per te garantire il supporto del browser a prova di proiettile che include Microsoft Edge e IE, dovrai sostituire manualmente le modalità di fusione CSS con i filtri SVG.

Come con più riempimenti e tratti, SVG non supporta i metodi di fusione applicati direttamente sugli attributi di riempimento e tratto (piuttosto che su interi livelli). Se si tenta di esportare riempimento e tracce con i propri metodi di fusione da uno strumento di progettazione a SVG, il livello verrà moltiplicato e i metodi di fusione applicati alle rispettive copie del livello.

Simboli e componenti

In alcuni degli esempi di codice sopra, potresti aver notato un elemento che non abbiamo ancora discusso: un elemento <use>…</use> . <use> ci consente di definire e riutilizzare elementi in SVG, un po' simili ai simboli in Illustrator e Sketch o Components in Figma. Ricordi la definizione di modelli, gradienti e filtri all'interno dei <defs>…</defs> in modo che possano essere utilizzati in qualche altra parte del codice SVG? In effetti, qualsiasi elemento SVG può essere definito e riutilizzato in questo modo. Una volta definita una forma o un gruppo, puoi farvi riferimento nel resto del documento tutte le volte che vuoi, ad esempio:

 <defs> <circle cx="100" cy="100" r="20"/> </defs> <use fill="red" xlink:href="#circle"> </use> <use fill="green" xlink:href="#circle"> </use> <use fill="blue" xlink:href="#circle"> </use> …

Puoi anche riutilizzare strutture molto più complesse usando un <symbol>…</symbol> . Il simbolo agisce come un corpo separato all'interno del nostro SVG e può avere il proprio attributo viewBox (vedi Larghezza, altezza e viewBox per riferimento).

Significa che i simboli e i componenti dei nostri strumenti di progettazione verranno esportati in simboli SVG? In Illustrator — sì, lo fa. In Sketch e Figma — no, non è così. Come mai? In primo luogo, perché i simboli di Illustrator sono abbastanza semplici e possono essere facilmente tradotti in SVG mentre i simboli di Sketch e i componenti di Figma non sono affatto così semplici ed esportare alcune delle sue funzionalità (come le sostituzioni nidificate) sarebbe molto complicato o addirittura impossibile.

Testo

Non sarebbe una guida completa se non menzionassimo la tipografia. Tutti gli strumenti di progettazione offrono un'ampia varietà di strumenti relativi al testo. SVG, anche se solitamente utilizzato per la grafica, supporta anche elementi di testo.

Illustrator, Sketch e Figma supportano tutti l'esportazione di testo in SVG e calcolano i livelli di testo in elementi <text>…</text> in SVG. Gli elementi di testo SVG vengono visualizzati come qualsiasi altro elemento grafico, forme ecc. con l'unica differenza che sono testo.

Come nei CSS, possiamo controllare tutti i parametri di base del testo, come lo spessore, l'altezza della linea o l'allineamento. Infatti, se sai come dare uno stile al testo in CSS, sai già come farlo in SVG. Tuttavia, potrebbe sembrare un po' vecchio stile. In primo luogo, tutti i parametri devono essere impostati in attributi inline, in modo simile ai golden standard di HTML 3.2. In secondo luogo, non ci sono scorciatoie. Ad esempio, non troverai nulla che assomigli a una proprietà CSS del font . Questo perché gli attributi del testo SVG sono in realtà basati sulle specifiche CSS 2 che ci riportano agli anni '90 e sono molto più vecchi dei CSS che conosciamo oggi.

Tuttavia, tutti questi attributi vengono esportati perfettamente dagli strumenti di progettazione ogni volta che vogliamo che un livello di testo diventi codice SVG.

Caratteri personalizzati

Sfortunatamente, le cose si complicano quando si tratta di caratteri personalizzati. Ai tempi, quando veniva creato lo standard SVG 1, i caratteri tipografici personalizzati non erano una cosa comune sul web. Tutti usavano font standard, come Tahoma, Verdana o Courier. Diventare fantasiosi e utilizzare caratteri che le persone non avevano sulle loro macchine per impostazione predefinita, di solito significava rasterizzarli spietatamente e usarli come immagini. Tuttavia, SVG ha implementato il proprio formato di caratteri, denominato caratteri SVG. Oggi, 18 anni dopo la pubblicazione di SVG 1.0, i font SVG non sono più supportati nella maggior parte dei principali browser.

Fortunatamente per noi, SVG funziona molto bene con CSS, il che significa che possiamo utilizzare i caratteri Web invece dei caratteri SVG, ad esempio:

 <style> @import url("https://fonts.googleapis.com/css?family=Roboto"); </style> <text x="20" y="50" font-family="Roboto">Text</text>

Non vorrei entrare nel dettaglio dell'implementazione dei caratteri web qui a parte una nota cruciale: non dimenticartene. In altre parole, se usi font personalizzati nel tuo SVG, devi ricordarti di fornire questi font al client, come in HTML/CSS.

Caratteri di contorno

Si potrebbe obiettare che molto più facile che combattere per i caratteri e tutto il resto, sarebbe delineare tutti i livelli di testo e non preoccuparsene per sempre. Tuttavia, ci sono almeno alcuni buoni motivi per non modificare il testo in forme:

1. Non puoi modificare il testo delineato, né prima né dopo l'esportazione.
   Lavorando con il testo delineato, è necessario ricordare di conservare sempre una copia modificabile nel file Illustrator, Sketch o Figma. Altrimenti, non sarai in grado di modificare i tuoi livelli di testo, una volta che sono stati delineati. Ciò aggiunge complessità non necessaria al processo. Per non parlare della modifica del testo delineato dopo l'esportazione dell'SVG. Il testo in SVG può essere aggiornato in qualsiasi momento. Il testo delineato richiede l'apertura del file di origine ogni volta che si desidera apportare la più piccola modifica alla copia.
2. Il testo delineato non è accessibile .
   Il testo in SVG, come altri elementi di testo sul Web, può essere letto da lettori di schermo e altre tecnologie accessibili. Delineando i livelli di testo, impedisci alle persone di utilizzare tali tecnologie di accedere ai tuoi contenuti.
3. Le persone si aspettano che il testo sia testo .
   La maggior parte delle persone che utilizzano il Web non sanno assolutamente nulla di SVG, HTML o strumenti di progettazione. Se vedono il testo, si aspettano che sia proprio quello. Potrebbero voler selezionarlo, copiarlo o inserirlo in un motore di ricerca. Tutto questo è possibile con il testo in SVG, a meno che non lo si delinea.
4. Non dimenticare la SEO .
   Anche il testo in SVG è accessibile e utilizzato dai motori di ricerca. Delineando il testo, rendi i tuoi contenuti meno ricercabili e potenzialmente meno visibili al pubblico.

Sommario

Grazie mille per avermi accompagnato in un viaggio attraverso i dettagli del lavoro con SVG e gli strumenti di progettazione. Questo articolo sicuramente non copre l'intero spettro dell'argomento, anche se dovrebbe essere sufficiente per affrontare i casi d'uso più comuni. Se hai domande o domande su cose che non sono state menzionate qui, non esitare a pubblicarle nei commenti!