Guida SVG di JetPunk - Versione Italiana - #3 SVG Avanzati

In questa sezione della Guida parleremo più approfonditamente degli SVG e daremo alcune nozioni base di CSS per far interagire JetPunk con le tue mappe. Inoltre vedremo alcune funzioni avanzate di Inkscape che puoi usare per creare SVG migliori.

Sei subito avvisato: abusare del CSS su JetPunk influenzando contenuti al di fuori dei tuoi SVG o quiz non è tollerato. (In pratica, non fare nulla di stupido.)

Passiamo al CSS! CSS è un acronimo che sta per Cascading Style Sheets, "Fogli di Stile a Cascata"; la traduzione ufficiale del termine potrebbe non dirti nulla, ma in poche parole il CSS è uno strumento per modellare le pagine web. La parte che interesserà questa guida è che possiamo usare il CSS per modificare gli SVG come vogliamo. In una pagina web scriviamo il nostro codice CSS fra tag style di questo tipo: <style>. Questi tag permettono al CSS di funzionare senza che il testo al loro interno venga renderizzato e mostrato all'utente, che invece vede solo i suoi effetti.

Tuffiamoci subito in un esempio. Mettiamo caso di volere che le risposte corrette in un quiz di testo con un SVG si colorino di blu al posto del solito verde. Per fare ciò, dovremmo usare il seguente codice:

Vediamo cosa significa:

Quindi, in generale, potresti aver già capito che ci sono due cose principali da considerare nel CSS, i selettori (selectors) e gli stili (styles). Ogni stile ha un nome ed un valore, e possono essere concatenati in questo modo:

Vediamo insieme i punti salienti dei selettori:

Parlando di stili di uso frequente su JetPunk, ecco alcuni "nomi" degli stili più comuni:

Questi sono gli stili più comuni per gli SVG e più o meno tutto ciò che devi ricordare. Ricorda che i colori possono essere espressi da una parola chiave oppure da un codice esadecimale preceduto da un cancelletto #. Ricordati anche che, per la maggior parte degli stili riguardanti i colori, avrai bisogno dell'attributo "!important" dopo il valore per essere sicuro di star sovrascrivendo lo stile già presente.

Infine, non dimenticare che tutti gli stili CSS devono essere compresi fra un tag <style> ed un tag di chiusura </style>. Senza di essi non potrai modificare un bel niente.

Ci sono anche delle classi che controllano funzionalità particolari su JetPunk, che potrebbero esserti utili per modificare il look o le caratteristiche dei tuoi quiz:

Sperando tu abbia letto i primi paragrafi di questa sezione, dovresti essere in grado di cominciare a sfruttare il CSS. Ma, in caso dovessi ancora avere difficoltà, vediamo alcuni esempi.

Innanzitutto un po' di informazioni generali. Quando vuoi selezionare una classe in un quiz testuale con SVG, devi sempre includere ".svg-holder" all'inizio, separato dalle altre classi da uno spazio, per essere sicuro di star sovrascrivendo correttamente gli stili. Senza questo selettore è probabile che il tuo styling non funzioni. Allo stesso modo, nei quiz Click Map devi usare ".map-holder".

Potresti anche non essere sicuro di come usare tutti questi stili e classi di cui abbiamo parlato. Puoi scrivere il tuo codice CSS ovunque nel quiz, personalmente ti consiglio di scriverlo nelle istruzioni; l'importante è, come già detto, racchiudere il tutto in un tag <style>.

Passiamo ora agli esempi. Nota che useremo #HEX per indicare un valore colore in generale. Per provare questi esempi non devi far altro che copiarli ed incollarli nel tuo quiz, sostituendo #HEX con un colore.

Questi sono gli scenari più comuni, e si ritrovano in numerosi quiz. Eccone degli altri che potresti voler usare in qualche quiz più particolare:

Noterai che l'ultimo esempio sfrutta una proprietà particolare, ma questo deriva da come JetPunk utilizza la classe .svg-hidden. Il valore opposto a "visible" (visibile) è "hidden" (nascosto).

Questi erano gli esempi offerti nella SVG Guide originale. Secondo me fanno un lavoro accettabile nello spiegare come risolvere alcune situazioni specifiche, ma vorrei aggiungerne due più avanzati per spiegare meglio l'utilizzo di CSS su JetPunk e mostrare le incredibili potenzialità di questi strumenti. Sono due esempi presi da due miei quiz, quindi di utilizzo in un certo senso "reale" di quanto vorrebbe insegnare questa Guida.

Il primo esempio proviene dal mio quiz Città della Regione Pokémon di Galar nella Mappa. È un quiz Click Map dove l'utente deve associare alle città del videogioco Pokémon Spada e Scudo la loro posizione nella mappa. Ecco il codice:

Analizziamo cosa sta facendo questo CSS. Una delle cose che volevo in questo quiz era che le città non cambiassero colore quando evidenziate, ma apparisse solamente un cursore sopra di esse, come nel gioco. Nella prima riga selezioniamo ".map-holder" e poi ".map-highlight" per cambiare il colore assegnato ai path quando vengono evidenziati; quindi richiamiamo il colore di riempimento tramite la parola chiave "fill", e le assegniamo il colore #FCFE00, che è il colore che avevo dato alle città in Inkscape; tramite la combinazione "!important" alla fine sovrascrivo la classe "map-highlight".

Passiamo alla riga successiva. Per emulare quanto più possibile lo stile dei giochi, ogni cursore è diviso in due parti, l'interno rosso ed una sagoma bianca. I cursori sono divisi in questo modo poichè un path può contenere solo un colore di riempimento ed uno di contorno, e l'interno rosso ha un piccolo contorno più scuro. Queste due parti hanno rispettivamente le classi "cursor1" e "cursor2".

Selezioniamo prima di tutto "map-holder", quindi agiamo su "cursor1"; le modifiche apportate sono al colore del fill e dello stroke, nonchè allo spessore stesso dello stroke, per mantenerli fissi durante lo svolgimento del quiz. Come vedi, siccome stiamo modificando più stili per la stessa categoria di path, possiamo includerli tutti fra le graffe, separandoli con un punto e virgola.

Infine nell'ultima riga agiamo sulla classe "cursor2" per mantenere fisso il colore della sagoma bianca.

Passiamo al secondo esempio, atto a mostrare le capacità di CSS. Questo è preso dal mio quiz in inglese Countries of the World in a (better) Spinning Globe, dove uso il CSS per far ruotare un globo. In realtà vedremo che il globo non è che proprio "ruoti", infatti quel quiz sfrutta le transizioni di CSS.

Saltiamo tutti i passaggi per creare l'SVG, ti basti sapere che il documento è organizzato in modo che ci siano trentasei "fotografie" della Terra, una ogni 10° di longitudine. Queste "fotografie" saranno i frame della nostra animazione. Ad ogni path viene assegnata la classe "fN", dove N è il numero del frame a cui appartiene. Nel quiz è poi presente questo codice:

Come puoi vedere dai selettori delle classi f0 e f1, questo è lo spezzone di codice per il frame 0 e per il frame 1. Lo stesso tipo di CSS viene applicato a tutti gli altri trentaquattro frame; l'unica differenza è il terzo attributo assegnato ad "animation".

Non spiego il codice nella sua interezza per non allungare troppo la guida, sappi solo che questo codice esegue una transizione CSS impostata per durare trentasei secondi (uno per frame) secondo l'animazione chiamata "anima". Ecco il codice di "anima":

Ancora una volta non scendiamo troppo nei dettagli, ma in pratica "anima" codifica una transizione in cui, dall'inizio fino circa il 97% del tempo totale a disposizione, la proprietà di stile visibility è impostata a hidden, ossia il path è nascosto. Subito dopo il path diventa visibile fino alla fine della transizione. Potresti esserti accorto che la percentuale non è a caso, ma è fatta apposta affinchè il path sia mostrato nell'ultimo trentaseiesimo della transizione.

In pratica, siccome abbiamo settato ad ogni frame una durata di trentasei secondi per la transizione, quello che sta facendo questo codice nel quiz è nascondere l'intero frame per trentacinque secondi, e poi renderlo visibile per un secondo.

L'impressione di movimento è data solamente dal tempismo con cui questa transizione avviene per ogni frame. Questo tempismo deriva dal numero che, più sopra, abbiamo visto cambiava per ogni frame. Questo numero è il delay, ossia il ritardo, della transizione; impostando al primo frame un ritardo di "-35 secondi" lo animiamo in modo che parta dal secondo di transizione in cui è visibile. A seguire, gli altri frame hanno un delay ognuno maggiore di un secondo rispetto al precedente, in modo da creare un'animazione più o meno fluida, in cui quando un frame diventa invisibile un altro è al punto della transizione tale da prendere subito il suo posto.

Questi erano gli esempi aggiuntivi che tenevo ad aggiungere alla guida; spero ti abbiano, se non spiegato meglio CSS, almeno dato un'idea delle sue potenzialità, e ti abbiano magari ispirato a creare SVG e quiz innovativi.

In questa parte della guida parleremo brevemente dello strumento "Da oggetto a tracciato" che trovi sotto "Tracciato" nella barra menù di Inkscape. La funzione principale di questo strumento è di convertire qualcosa che non è propriamente un path in un path vero e proprio. Ecco due esempi:

La prima delle due opzioni potrebbe confonderti; una cosa che abbiamo volontariamente tralasciato nelle sezioni precedenti della Guida è la differenza un po' ambigua tra Oggetto e path. Infatti le figure create tramite strumenti come rettangoli o cerchi sono Oggetti, e vengono salvati nel file SVG come tali; un path invece è un termine più generico. Salvando un cerchio come path questo continuerà ad avere la forma di un cerchio, ma l'SVG in sè (e di conseguenza JetPunk) non avrà alcun modo di sapere che appare come un cerchio. È per questo che potresti aver notato una dicitura un po' strana, "sotto forma di oggetto", in alcuni passaggi nel resto della Guida.

Lo strumento in sé è molto semplice da usare, devi solo selezionare l'oggetto che vuoi convertire e poi cliccare "Da oggetto a tracciato" sotto "Tracciato". Nota che, specie se stai convertendo del testo, i path convertiti potrebbero essere messi in un gruppo. Per separarli basta fare tasto destro sul gruppo e cliccare "Dividi".

L'altro strumento che potrebbe esserti d'aiuto è "Da contorno a tracciato", che converte le linee create tramite la Penna (gli strokes) e i contorni di altri path. Potrebbe risultarti utile se non ti interessa modificare la larghezza del contorno o se desideri più libertà creativa sui bordi di una figura. Un esempio sono i vari quiz con mappe di sistemi di metropolitana, dove puoi tracciare facilmente le varie linee con la Penna e successivamente trasformarle in path per farle colorare nei quiz.

Per convertire uno stroke, selezionalo (nel caso di un bordo seleziona il path) e clicca "Da contorno a tracciato", sempre sotto "Tracciato". Convertire il bordo di un path dividerà (ovviamente) il contorno dal riempimento. Se non ti interessa il riempimento, puoi direttamente eliminarlo dal path cliccando sulla "X" nei pattern, nella schermata "Riempimento e contorni".

Le due feature che descriveremo qui sono gli strumenti "Unione" e "Combina". Questi strumenti sono leggermente diversi, ed hanno usi differenti a seconda di cosa vuoi creare. Cominciamo con "Combina".

Lo strumento "Combina" si trova sempre sotto "Tracciato" nella barra menù, oppure puoi sfruttare la shortcut Ctrl+K su Windows e ⌘+K su Mac. Questo strumento non fa altro che "combinare" assieme tutti i path selezionati.

Ciò significa che se due path si sovrappongono, continueranno a sovrapporsi anche dopo essere stati combinati. L'unica differenza possibile è il loro colore: dal momento che un path può contenere al massimo un colore per il riempimento e uno per il contorno, il path combinato assumerà i colori di uno dei path.

Invece lo strumento "Unione", sempre sotto "Tracciato" nella barra menù, fa molto più che combinare i path. Questo strumento tenterà di fondere completamente i path selezionati, rimuovendo anche i nodi sovrapposti. Un effetto secondario è che, facendo l'unione di due path che hanno solo il contorno, Inkscape cercherà di collegarli se non sono chiusi. Alla fine "l'obiettivo" di questo strumento è, partendo da più figure, averne poi una sola, senza parti che si sovrappongono, cioè ricavarne un singolo path pulito e pronto per l'uso.

Come "Combina", anche "Unione" ha la sua shortcut: devi premere Ctrl e "+" su Windows, oppure ⌘ e "+" se usi un Mac.

Ecco un esempio delle differenze fra i due. Supponiamo di avere due cerchi che si sovrappongono:

Facendo "Combina" otteniamo:

Invece con "Unione":

Come puoi vedere, i due strumenti producono risultati molto diversi. "Combina" è risultato in due path circolari, per quanto siano nello stesso tag path, e quindi Inkscape li tratti come un path unico. Invece "Unione" è risultato in un singolo path che ricorda vagamente un'arachide.

Una nota sull'unione dei path: facendo "Unione" su due nazioni confinanti su una mappa, se i confini non sono esattamente allineati potresti avere dei nodi residui in mezzo al path. Siccome questi nodi sono superflui, puoi eliminarli; il modo più facile per farlo è tramite lo strumento "Modifica nodi", che ha questa icona:

In questa parte affronteremo come tagliare i path. Se stai cercando di dividere in più parti un path, invece che tagliarne via un pezzo, potrebbe esserti più utile la prossima sottosezione.

In particolare gli strumenti di cui parleremo sono "Differenza" e "Intersezione", entrambi sotto "Tracciato" nella barra menù. Questi due strumenti hanno, in un certo senso, funzioni opposte: spieghiamo in che modo.

Da una parte, "Differenza" prende due path e "taglia via" l'intersezione dei due path dal path sotto. Può essere usato per esempio per creare un anello, facendo la "Differenza" di due cerchi concentrici.

Invece "Intersezione", presi due path, conserva solamente, per l'appunto, la loro intersezione.

Nota: "Differenza" e "Intersezione" accettano entrambi almeno due path. L'Intersezione di più path risulterà nella parte sovrapposta di tutti i path, mentre per la Differenza il discorso si complica: in quel caso importa anche la profondità dei path nello schermo e l'ordine in cui li selezioni. Per semplicità, puoi considerare "Differenza" come uno strumento che accetta solo due path alla volta.

Vediamo un esempio d'uso per "Differenza". Prima abbiamo detto che puoi usarlo per creare anelli. Per fare ciò, devi disegnare due cerchi concentrici. Innanzitutto puoi disegnare un cerchio con lo strumento "Cerchi e ellssi" tenendo premuto Ctrl; una volta disegnato devi copiarlo con tasto destro e Copia, oppure con Ctrl+C, e poi incollarlo sul posto tramite la combinazione Ctrl+Alt+V. Su Mac basta sostituire ⌘ a Ctrl. Puoi anche andare su "Modifica" nella barra menù e cliccare su "Incolla in origine" al posto di usare la shortcut, oppure ancora puoi usare "Duplica" cliccando con il tasto destro del mouse sul cerchio.

Una volta incollato il secondo cerchio, puoi rimpicciolirlo tenendo premuto Ctrl per mantenere le proporzioni e Shift per mantenerlo centrato. Se per esempio avessi colorato il primo cerchio di fucsia ed il secondo di blu potresti ritrovarti con un qualcosa del genere:

A questo punto seleziona entrambi i cerchi, assicurandoti che quello blu sia sopra a quello fucsia, e clicca "Tracciato" e poi "Differenza". Questo risulterà in un path uguale al cerchio fucsia senza la parte "tagliata" dal cerchio blu, lasciando un anello fucsia:

Questo è probabilmente l'uso più utile dello strumento "Differenza", specie per JetPunk.

Passiamo ora ad "Intersezione". Questo strumento si rivela utile quando vuoi modificare una mappa pre-esistente ed hai molti path che non ti servono. Vediamo un esempio. Poniamo caso tu abbia scaricato l'SVG Standard dell'Europa, e lo abbia ridimensionato con l'intenzione di fare una mappa della Francia e nazioni circostanti. In questo caso avresti molti path in eccesso. Nell'immagine di esempio qui sotto il bordo della pagina è colorato di rosso ed è mostrato sopra al resto del documento (non serve che tu lo faccia, ma puoi cambiare queste opzioni dalle "Proprietà del documento").

La prima cosa che devi fare è eliminare tutti i path che sono completamente esterni al quadrato, e che quindi non rientrerebbero nella mappa. Puoi farlo selezionandoli trascinando lo strumento Seleziona al di fuori del quadrato, se vuoi. Dopodichè dovrai ridimensionare "l'oceano" affinchè abbia esattamente le dimensioni della pagina. Puoi ridimensionarlo selezionandolo e cambiando i valori nella barra editor oggetti:

Idealmente dovresti avere X e Y impostati a 0.000, che posizionerà l'angolo in alto a sinistra del path oceano nell'angolo in alto a sinistra della pagina. "L" e "H" sono invece la Larghezza e l'Altezza del path oceano, quindi in questo caso dovresti settarle uguali alle dimensioni della pagina, che trovi nelle Proprietà del documento.

Fatti questi passaggi dovresti vedere qualcosa del genere:

Fatto questo, possiamo cominciare con l'Intersezione. Ciò che devi fare è copiare e incollare in origine (oppure Duplicare) il rettangolo oceano, che a questo punto copre l'intera pagina; quindi, interseca singolarmente ogni path che sborda dalla pagina con una copia del path oceano. È per questo motivo che era particolarmente importante che il path oceano fosse perfettamente allineato con la pagina.

Dal momento che ogni volta che intersechi un path con una copia dell'oceano questa copia sparisce, ti consiglio di incollare molte volte il path oceano fin dall'inizio. Inoltre ricorda che, affinchè Intersezione funzioni come vogliamo, le copie dell'oceano devono essere sopra agli altri path. Per esempio, ecco il Regno Unito e una delle copie, entrambi selezionati:

Facendo "Intersezione", otteniamo questo risultato:

Ora, dal momento che lo strumento "Intersezione" rimuove tutte le classi, e siccome JetPunk sfrutta le classi per colorare i path, potresti vedere che il path ritagliato è diventato nero come nell'immagine d'esempio. Ce ne occuperemo più tardi, per il momento ripetiamo questi passaggi per ogni nazione che sborda in parte dai confini della pagina. Il risultato sarà questo:

Nota che in questo caso avremmo dovuto ritagliare anche la Francia stessa, in particolare la Corsica. Per evitare confusione abbiamo ricolorato di giallo il path nell'esempio. Un'altra cosa a cui dovresti fare attenzione quando hai a che fare con path che includono isole o exclave, come la Francia con la Corsica, è che lo strumento "Intersezione" potrebbe automaticamente separare il path principale dall'isola o exclave; in questo caso puoi riunire i path come visto nella sottosezione precedente.

Finiamo l'esempio; per aggiustare i path diventati neri puoi modificare i colori direttamente dalla schermata "Riempimento e contorni", oppure aggiungendo le classi "country" e "border" ad ogni path se stai modificando un SVG Standard. Sempre se stai modificando un JetPunk Standard SVG, potresti voler aggiungere la classe "surrounding" al posto di "country" per dare una colorazione grigia alle altre nazioni.

Alla fine, il risultato sarà come questo:

L'ultima funzione di cui parleremo in questa sezione è la "Divisione", ancora una volta sotto "Tracciato" nella barra menù. Questo strumento ti permette di dividere un path in due, a partire da una linea che simboleggia il taglio. Puoi immaginarlo come prendere un coltello strano e tagliare una torta.

Questo strumento funziona esclusivamente con due path, uno dei quali deve essere uno stroke, ossia un path unidimensionale, come per esempio le linee create dalla Penna. In realtà tutto ciò che devi fare è disegnare con la Penna una linea dove vorresti che venga tagliato il path. Potresti avere tra le mani qualcosa del genere:

Ciò che vedi nell'esempio è un path, quello che vogliamo tagliare, e sopra di esso una linea aperta disegnata con la Penna. Selezionali entrambi, e poi clicca "Tracciato" e "Divisione"; il risultato sarà di questo tipo:

A questo punto il path è stato tagliato in due seguendo la linea disegnata sopra. Se il path originale non aveva Contorno, oppure aveva Contorno e Riempimento dello stesso colore, potresti non notare differenze. In questo caso seleziona solo uno dei due path risultanti (dopo una Divisione Inkscape mantiene entrambi i pezzi selezionati) e prova a muoverlo: vedrai subito la differenza!

La cosa che devi ricordarti quando usi questo strumento è che le estremità dello stroke che usi per indicare dove tagliare (mostrato in rosso negli esempi sopra) devono essere all'esterno del path che vuoi dividere. Se una delle due estremità è all'interno del path, la Divisione non funzionerà correttamente.