Nei documenti HTML possiamo mostrare, nascondere o riorganizzare parti della pagina in base alle condizioni del viewport. Se la finestra del browser è larga 480 pixel, per esempio, possiamo trasformare la navigazione da lista orizzontale a lista verticale e richiudibile. Con SVG e le media query possiamo fare qualcosa di simile.
Questo articolo è un estratto dal libro di Tiffany, CSS Master, 3ª edizione. Dagli un’occhiata se vuoi padroneggiare altre funzionalità avanzate dei CSS3 come Flexbox e Grid!
Oltre che con l’HTML, i CSS si possono usare anche con SVG, ossia Scalable Vector Graphics. SVG è un formato di markup per descrivere immagini piatte e bidimensionali. Essendo un linguaggio di markup, ha un document object model e si può usare con i CSS.
Con i CSS possiamo cambiare l’aspetto di un SVG in base all’interazione dell’utente. Possiamo anche usare lo stesso documento SVG in più punti, mostrandone o nascondendone alcune parti a seconda della larghezza del viewport.
Tutti i principali motori dei browser supportano da anni SVG 1.1. Il supporto delle funzionalità di SVG 2, invece, è ancora in corso di sviluppo. Al momento in cui scriviamo il supporto dei browser è limitato per alcuni degli argomenti trattati qui, e potrebbe essere cambiato quando leggerai queste righe. Tieni d’occhio la meta-issue di Chromium Implement SVG2 features, che segue i lavori nei browser basati su Chromium. Per Firefox guarda la meta-issue Support SVG 2 features, e per Safari la meta-issue WebKit Implement SVG 2. Muoversi negli issue tracker non è piacevole, ma per ora è il modo migliore per seguire il supporto di SVG 2.
Prima di andare avanti, però, vediamo che cos’è SVG e perché conviene usarlo.
Immagini vettoriali e immagini raster
La maggior parte delle immagini usate oggi sul web sono immagini raster, dette anche bitmap. Le immagini raster sono fatte di pixel su una griglia fissa, con un numero definito di pixel per pollice. JPEG, WebP, GIF e PNG sono tutti esempi di immagini raster.
Le immagini raster dipendono dalla risoluzione. Un’immagine PNG a 144 PPI (pixel per pollice) è impeccabile su un dispositivo con un display da 144 PPI. Su uno schermo a risoluzione più alta (400 PPI), però, la stessa immagine può risultare sfocata. Le immagini raster hanno inoltre dimensioni fisse e rendono al meglio alla loro dimensione originale. Portare un’immagine da 150 per 150 pixel a 300 per 300 pixel la deforma.
Invece di usare pixel su una griglia, i formati vettoriali descrivono le forme primitive – cerchi, rettangoli, linee o path – che compongono un’immagine, e la loro posizione nel sistema di coordinate del documento. Le immagini vettoriali sono quindi indipendenti dalla risoluzione e mantengono la loro qualità qualunque sia la risoluzione o la dimensione dello schermo.
L’indipendenza dalla risoluzione è il vantaggio più grande di SVG. Possiamo ingrandire o rimpicciolire le immagini senza perdita di qualità, e lo stesso file rende bene sui dispositivi ad alto e a basso PPI. Detto questo, SVG è poco adatto alla quantità di dati di colore che richiede una fotografia: si presta molto meglio a disegni e forme. Usalo al posto delle immagini PNG e GIF, e come sostituto più flessibile degli icon font.
Un altro vantaggio di SVG è che è stato pensato per lavorare con gli altri linguaggi del web. Possiamo creare, modificare e manipolare immagini SVG con JavaScript. Oppure, come vedremo più avanti, possiamo applicare stili e animazioni con i CSS.
Associare i CSS ai documenti SVG
Usare i CSS con SVG assomiglia molto a usarli con l’HTML. Possiamo applicare i CSS con l’attributo style di un elemento SVG, raggruppare i CSS del documento in un elemento <style> oppure collegare un foglio di stile esterno. Vantaggi e svantaggi di ciascun metodo sono gli stessi che con l’HTML.
Usare l’attributo style
Ecco un documento SVG semplice, il cui codice disegna un cerchio nero:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"
➥enable-background="new 0 0 200 200">
<circle cx="101.3" cy="96.8" r="79.6" />
</svg>
L’immagine qui sotto mostra come questo codice viene reso dal browser.
Diamo al nostro cerchio un riempimento rosa con i CSS, usando l’attributo style:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"
➥enable-background="new 0 0 200 200">
<circle cx="101.3" cy="96.8" r="79.6" style="fill: #f9f" />
</svg>
Il risultato è quello qui sotto.
Ecco una differenza tra usare i CSS con l’HTML e usarli con SVG: i nomi delle proprietà. Molte proprietà CSS che usiamo nei documenti HTML non funzionano con SVG, e viceversa. Ci torniamo più avanti nel capitolo.
Usare l’attributo style non è certo il modo migliore di lavorare con i CSS: limita il riutilizzo di quegli stili su più elementi o su più documenti. Meglio i CSS incorporati o collegati.
Incorporare i CSS nei documenti SVG
Invece dell’attributo style possiamo usare l’elemento <style>:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0
➥ 200 200" enable-background="new 0 0 200 200">
<style type="text/css">
circle {
fill: #0c0;
}
</style>
<circle cx="101.3" cy="96.8" r="79.6" />
</svg>
Incorporare i CSS in un documento SVG ci permette di riutilizzare quegli stili su più elementi dello stesso documento, ma impedisce di condividerli tra documenti diversi. Per loghi e icone va benissimo. Se invece stai costruendo qualcosa come una libreria di stili per i grafici, meglio un file CSS esterno.
Con un normale editor di testo puoi aggiungere CSS anche alle immagini SVG create con programmi come Sketch, Inkscape o Illustrator. Questo non ti impedisce di modificare l’immagine nell’applicazione di disegno, ma se salvi il file da un software di grafica l’applicazione può riscrivere o cancellare i tuoi CSS.
Collegare un SVG a un file CSS esterno
Come per l’HTML, collegare un file CSS esterno permette di condividere gli stili tra più documenti SVG. Per farlo, aggiungi <? xml-stylesheet ?> all’inizio del tuo file SVG:
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="https://www.gekkode.com/it/style.css" type="text/css"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0
➥ 200 200" enable-background="new 0 0 200 200">
<circle cx="101.3" cy="96.8" r="79.6" />
</svg>
Usare l’elemento <link>
Puoi anche usare l’elemento HTML <link>. Con questo metodo devi includere l’attributo xmlns, come qui sotto:
<link href="style.css" type="text/css" rel="stylesheet"
➥ xmlns="http://www.w3.org/1999/xhtml" />
Nota: alcuni browser più vecchi richiedono che l’elemento <link> sia racchiuso in tag <defs> o <g>.
<link> non è un elemento SVG: appartiene a HTML e XHTML. XHTML è una variante dell’HTML che viene analizzata secondo le regole del markup XML. Con quelle regole possiamo prendere in prestito elementi e comportamenti da altri dialetti XML, come XHTML. Per farlo, però, dobbiamo dire al browser a quale namespace appartiene l’elemento, con l’attributo xmlns.
Usare @import
Possiamo collegare un foglio di stile esterno anche con @import, all’interno dei tag <style> e </style>:
<style type="text/css">
@import("https://www.gekkode.com/style.css");
</style>
Questo metodo funziona come quello con <link>.
SVG e l’elemento <img>: i limiti
Collegare un file SVG a risorse esterne, file CSS compresi, non funziona con l’elemento <img>. È una limitazione di sicurezza dell’elemento <img>, integrata nei browser.
Se vuoi usare CSS collegati con le tue immagini SVG, devi fare una di queste due cose:
- usare un elemento
<style>nel documento SVG per mettere i CSS in linea, - usare un elemento
<iframe>o<object>(vedi la nota qui sotto).
In generale meglio <iframe> che <object>. L’elemento <object>, però, può essere figlio di un elemento <a>, mentre <iframe> no. Usare <iframe> o <object> rende inoltre l’albero del documento SVG accessibile a quello del documento genitore: vuol dire che possiamo interagirci con JavaScript (per esempio con document.querySelector('iframe').contentDocument).
SVG in linea e risorse esterne
Quando aggiungi SVG all’HTML, il browser non carica le risorse esterne referenziate dal documento SVG. Possiamo però collegare i CSS del nostro SVG dal <head> del documento HTML:
<head>
⋮
<link href="svg.css" type="text/css" rel="stylesheet" />
</head>
Gli elementi SVG nei documenti HTML fanno parte anche dell’albero del documento HTML. Con l’SVG in linea è del tutto possibile riunire le regole di stile HTML e SVG nello stesso foglio di stile.
Differenze tra SVG e HTML
Anche se SVG e HTML sono entrambi linguaggi di markup, tra i due ci sono due differenze importanti che cambiano il modo in cui lavorano con i CSS:
- SVG non segue il box model dei CSS.
- SVG non ha uno schema di posizionamento.
SVG non segue il box model dei CSS
Con l’HTML il layout CSS segue le regole del box model. SVG, invece, usa le coordinate per la disposizione degli elementi: segue quello che si capisce meglio come un «modello di forme».
Le forme SVG non si limitano a riquadri rettangolari. Di conseguenza la maggior parte delle proprietà legate al box model non si applica agli elementi SVG. Non puoi, per esempio, cambiare il padding o il margin di un elemento SVG. Non puoi nemmeno usare le proprietà box-sizing, box-shadow, outline o border-*. Anche il layout a griglia, i float e Flexbox restano fuori gioco.
Puoi però usare i CSS per definire o modificare una serie di proprietà e di valori di attributi SVG. L’elenco completo è nella specifica SVG 2, anche se nella maggior parte dei browser il supporto è incompleto. Alcune proprietà CSS, come filter, funzionano sia con SVG sia con HTML: ne vedremo qualcuna in questo capitolo, all’interno di tecniche specifiche.
SVG non ha uno schema di posizionamento
Quando i CSS sono usati con l’HTML, i box degli elementi possono:
- stare nel flusso normale,
- essere tolti dal flusso normale con la proprietà
float, - essere tolti dal flusso normale con la proprietà
position.
La specifica CSS li chiama schemi di posizionamento. In SVG gli schemi di posizionamento non esistono: la proprietà position non ha alcun effetto sugli elementi SVG, e nemmeno proprietà come top, left e bottom, che dipendono dal posizionamento. In un documento SVG non puoi neppure far flottare gli elementi.
SVG usa invece un sistema di coordinate per collocare gli elementi. Per disegnare un <circle>, per esempio, definisci le coordinate del suo centro con gli attributi cx e cy e la lunghezza del raggio con l’attributo r. Un poligono è una serie di coordinate di punti con i segmenti tracciati tra di essi. In altre parole, puoi decidere dove viene disegnato un elemento nel canvas SVG, ma non puoi «posizionarlo» nel senso CSS del termine.
Legato agli schemi di posizionamento, SVG non ha nemmeno la nozione di z-index né i contesti di impilamento.
Nota: la specifica SVG 2 definisce un comportamento per z-index e per i contesti di impilamento nei documenti SVG, ma la maggior parte dei browser non lo supporta ancora.
Gli elementi SVG si impilano seguendo l’ordine del sorgente: quelli che compaiono più avanti nel documento stanno più in alto nella pila. Per cambiare l’ordine di impilamento devi spostarli nel sorgente o riordinarli nell’albero del DOM con JavaScript.
In pratica la maggior parte delle proprietà CSS 2.1 non si applica ai documenti SVG. Fanno eccezione le animazioni e le trasformazioni, display, overflow, visibility, filter e qualche proprietà legata al font e al testo. Al loro posto dovrai usare le proprietà di stile specifiche dei documenti SVG. La maggior parte di esse si può esprimere anche come attributo di un elemento SVG.
Applicare stili agli elementi SVG
Ecco un esempio semplice di come dare uno stile agli elementi SVG con i CSS. Partiamo dal nostro documento SVG, un file autonomo:
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="https://www.gekkode.com/it/styles.css" type="text/css" ?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink=
➥"http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 497
➥ 184" enable-background="new 0 0 497 184" xml:space="preserve">
<polygon id="star" points="77,23.7 98.2,66.6 145.5,66.5 111.2,
➥106.9,119.3,154 77,131.8 34.7,154 42.8,106.9 8.5,67.5 55.8,
➥66.6 "/>
<circle id="circle" cx="245" cy="88.9" r="67.5"/>
</svg>
Questo markup produce l’immagine qui sotto.
Anche se non possiamo usare la maggior parte delle proprietà CSS con i documenti SVG, possiamo usare i CSS per cambiare il colore di un elemento. Rendiamo gialla la nostra stella:
#star {
fill: hsl( 44, 100%, 50% );
}
Vedrai spesso fill usato con i tag SVG, per esempio <circle fill="rgb( 255, 185, 0 )" cx="3" cy="10" r="100">, ma è anche una proprietà che puoi usare nei CSS.
Possiamo usare i CSS anche per regolare lo stroke di un elemento, cioè il contorno di una forma SVG. Il contorno di una forma esiste anche quando nessuno stroke è definito. Diamo al nostro cerchio un bordo tratteggiato blu scuro largo dieci pixel e impostiamo la sua proprietà fill su cornflowerblue:
circle {
fill: cornflowerblue;
stroke: darkblue;
stroke-width: 10;
stroke-dasharray: 10, 15;
stroke-linecap: round;
}
Tutto insieme, ecco il risultato.
Usare gli attributi SVG come proprietà CSS
Possiamo usare i CSS anche per definire i valori delle coordinate di alcuni elementi di forma: <rect>, <circle> ed <ellipse>. Di solito per questi elementi useremmo gli attributi SVG:
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="200" width="300" height="300" fill="#f60" />
</svg>
SVG 2, però, ha ridefinito alcuni attributi SVG come proprietà geometriche. Vuol dire che possiamo usare i CSS per impostarne i valori:
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
rect {
x: 20px;
y: 50px;
width: 300px;
height: 300px;
fill: #f60;
}
</style>
<rect />
</svg>
Le proprietà di coordinata (x e y), quelle delle coordinate del centro (cx e cy) e quelle del raggio (rx, ry e r) si possono definire nei CSS. Lo stesso vale per width e height. Per gli attributi SVG le unità sono facoltative, i valori CSS, al contrario, richiedono un’unità. Lunghezze e percentuali sono entrambe valide per le proprietà citate qui, ma tieni presente che nei documenti SVG le lunghezze funzionano in modo un po’ diverso. Ricorda che la S di SVG sta per scalable: la dimensione calcolata di un elemento SVG dipende anche da
- la
widthe laheightcalcolate dell’elemento SVG radice - il valore dell’attributo
viewBoxsull’elemento radice - ogni trasformazione di scala applicata all’elemento o ai suoi antenati.
In altre parole, gli angoli del nostro elemento <rect> si trovano in (20, 50), (20, 320), (350, 320) e (20, 350) nel sistema di coordinate SVG. Le dimensioni reali, però, possono essere più grandi o più piccole a seconda dei fattori qui sopra.
Non tutti gli attributi SVG sono disponibili tramite CSS, almeno non in tutti i browser. Chrome ed Edge, per esempio, supportano la funzione CSS path() per definire i dati del tracciato, con la proprietà d:
path {
d: path("M 454.45223,559.21474 -304.96705,163.45948 417.4767,-296.33928 Z");
}
Al momento sono gli unici browser a farlo. Il lavoro per aggiungere il supporto in Firefox e in WebKit non è ancora cominciato.
Per gli altri elementi di forma la specifica di SVG 2 è decisamente incoerente. Allo stato attuale devi usare gli attributi degli elementi per definire le proprietà di <line>, <polyline> e <polygon>.
Detto questo, non siamo obbligati a usare selettori di tipo (o di elemento) per definire queste proprietà. Potremmo, per esempio, definire cerchi piccoli, medi e grandi con dei selettori di classe:
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
.small {
cx: 20px;
cy: 20px;
r: 20px;
fill: #0c0;
}
.medium {
cx: 80px;
cy: 80px;
r: 60px;
fill: #fc0;
}
.large {
cx: 220px;
cy: 220px;
r: 120px;
fill: #00f;
}
</style>
<circle class="small" />
<circle class="medium" />
<circle class="large" />
</svg>
Qualunque sia il selettore, usare la sintassi CSS per specificare queste proprietà le rende anche facili da animare. Vediamo come nella sezione successiva.
Animare e far transitare le proprietà CSS di SVG
Usare i CSS con SVG diventa più interessante quando aggiungiamo transizioni e animazioni. Il procedimento è lo stesso dell’animazione di elementi HTML con i CSS, ma con proprietà specifiche di SVG. Creiamo un effetto di stella che brilla, a partire da questo documento SVG:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px"
➥ y="0px" viewBox="0 0 497 184" xml:space="preserve">
<defs>
<link href="twinkle.css" type="text/css" rel="stylesheet"
➥ xmlns="http://www.w3.org/1999/xhtml"/>
</defs>
<polygon class="star" points="77,23.7 98.2,66.6 145.5,66.5 111.2
➥,106.9 119.3,154 77,131.8 34.7,154 42.8,106.9 8.5,67.5
➥ 55.8,66.6 "/>
<polygon class="star twinkle" points="77,23.7 98.2,66.6 145.5,
➥66.5 111.2,106.9 119.3,154 77,131.8 34.7,154 42.8,106.9
➥ 8.5,67.5 55.8,66.6 "/>
</svg>
Il nostro documento contiene due elementi poligono a forma di stella, ognuno con la classe star. Per ottenere l’effetto scintillio animiamo il primo. Ecco i nostri CSS:
@keyframes twinkle {
from {
fill-opacity: .4;
}
to {
fill-opacity: 0;
transform: scale( 2 );
}
}
.star {
fill: rgb( 255,195,0 );
transform-origin: 50% 50%;
}
.twinkle {
animation: twinkle 1.5s infinite forwards ease-in;
}
Qui abbiamo usato la proprietà specifica di SVG fill-opacity. Come nei CSS in generale, se possiamo interpolare il valore di una proprietà di stile SVG, possiamo animarlo o farlo transitare. Nell’immagine qui sotto vedi due momenti diversi dell’animazione.
Guardiamo un altro esempio. Questa volta creiamo un effetto di disegno facendo transitare la proprietà stroke-dasharray. Ecco il nostro documento SVG:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
➥xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 200 200" enable-background="new 0 0 200 200">
<circle fill="transparent" stroke-width="16" cx="101.3"
➥ cy="96.8" r="79.6"/>
</svg>
stroke-dasharray accetta un elenco di valori di lunghezza o di percentuale separati da virgole, che creano un motivo tratteggiato. I valori dispari determinano la lunghezza del trattino, quelli pari la lunghezza dello spazio. Un valore di stroke-dasharray pari a 5, 10 significa che il tratto sarà lungo 5px con uno spazio di 10px tra un trattino e l’altro. Un valore di 5, 5, 10 alterna trattini da 5px e da 10px con 5px di spazio in mezzo.
Possiamo usare stroke-dasharray per creare un effetto di disegno partendo da una lunghezza del trattino pari a zero e uno spazio ampio, per finire con un trattino lungo e nessuno spazio. Poi facciamo la transizione tra i due stati. Ecco i nostri CSS:
circle {
transition: stroke-dasharray 1s ease-in;
fill: transparent;
stroke-dasharray: 0, 500;
}
.animate {
stroke-dasharray: 500, 0;
}
All’inizio della transizione il tratto è invisibile, perché la lunghezza del trattino è 0 e lo spazio è 500. Ma quando aggiungiamo la classe animate al cerchio, portiamo la lunghezza del trattino a 500 ed eliminiamo lo spazio. L’effetto assomiglia al disegno di un cerchio con il compasso. Perché 500? È il valore più piccolo che produce proprio questo effetto.
Un futuro fatto di path animati
Ti ricordi l’esempio in cui definivamo un tracciato con i CSS, nella sezione precedente? Un giorno forse potremo animare i path in tutti i browser, con i CSS:
path {
d: path("M357.5 451L506.889 192.25H208.111L357.5 451Z");
transition: d 1s ease-in-out;
}
.straighten {
d: path("M357.5 8871L406 -10113.75H208.111L357.5 351Z");
}
Allo stato attuale, però, solo i browser basati su Chromium come Google Chrome e Microsoft Edge supportano l’animazione delle definizioni di path in questo modo. Per farlo funzionare altrove, usa una libreria JavaScript come GreenSock e il suo MorphSVGPlugin. Oltre alla compatibilità con i browser, GreenSock e MorphSVGPlugin rendono semplice il morphing tra due forme, qualunque sia il numero di punti di ciascuna.
Usare SVG con le media query
Nei documenti HTML possiamo mostrare, nascondere o riorganizzare parti della pagina in base alle condizioni del viewport. Se la finestra del browser è larga 480 pixel, per esempio, possiamo trasformare la navigazione da lista orizzontale a lista verticale e richiudibile. Con le media query e i documenti SVG possiamo fare qualcosa di simile. Prendiamo un logo, come quello dell’azienda immaginaria Hexagon Web Design & Development qui sotto.
Senza media query questo logo SVG si limiterebbe ad allungarsi o a restringersi per adattarsi al viewport o al suo contenitore. Con le media query possiamo fare cose più furbe.
Distinguiamo tra il viewport del documento HTML e quello del documento SVG. Quando l’SVG è in linea, i due coincidono e il documento SVG si comporta come qualsiasi altro elemento HTML. Quando invece un documento SVG è collegato, come accade con gli elementi <iframe>, <object> o <img>, abbiamo a che fare con il viewport del documento SVG.
Le media query funzionano in entrambi i casi, ma quando il documento SVG è collegato il suo viewport è indipendente da quello del documento HTML. In quel caso la dimensione della finestra del browser non determina la dimensione del viewport SVG: a determinarla sono le dimensioni dell’elemento <object>, <iframe> o <img>. Prendiamo il documento SVG (abbreviato) qui sotto:
<svg version="1.1" id="HexagonLogo" xmlns="http://www.w3.org/2000/
➥svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
➥ viewBox="0 0 555 174" xml:space="preserve">
<defs>
<style type="text/css">
/* CSS goes here */
</style>
</defs>
<g id="hex">
<polygon id="hexagonbg" points="55.2,162 10,86.5 55.2,11
➥ 145.5,11 190.7,86.5 145.5,162 "/>
<path id="letterH" fill="#FFFFFF" d="M58,35.5h33v35.2h18.
➥4V35.5 h33.2v103.4h-33.2v-38.3H91v38.3H58V35.5z M77.5,126.5V87.
➥3h45.6v39.2h4V47.9h-4v35.6H77.5V47.9h-4v78.6H77.5z"/>
</g>
<g id="word-mark">
<g id="hexagon-word">
...
</g>
<g id="web-design-and-dev">
...
</g>
</g>
</svg>
Nota: una demo completa di questa tecnica, sorgente integrale del documento SVG compreso, è disponibile online.
Sui viewport più piccoli mostriamo solo la H nel simbolo esagonale:
@media (max-width: 320px) {
[id=word-mark] {
display: none;
}
}
Ora, ogni volta che il contenitore del nostro SVG misura 20em o meno, sarà visibile solo la parte del logo con il simbolo.
Per attivare questa vista dal documento HTML, imposta la larghezza del contenitore SVG:
<iframe src="hexlogo.svg" style="width: 320px; border:0"></iframe>
Come avrai notato guardando l’immagine qui sopra, la nostra immagine SVG conserva le sue dimensioni intrinseche anche se una parte è nascosta. Purtroppo è un limite di SVG. Per aggirarlo dobbiamo modificare il viewBox del documento SVG, ma solo quando il viewport scende sotto una certa dimensione. È un ottimo caso d’uso per matchMedia.
Il viewBox, come dice il nome, determina l’area visibile di un elemento SVG. Regolandolo possiamo decidere quale parte di un’immagine SVG riempie il viewport. Ecco un esempio che usa matchMedia e una media query per aggiornare l’attributo viewBox:
<script type="text/javascript">
const svg = document.querySelector( 'svg' );
/* Salvare il valore originale in una variabile */
const originalViewBox = svg.getAttribute( 'viewBox' );
/* Definire la media query e il suo oggetto */
const mq = matchMedia( '( max-width: 320px )' );
/* Definire l'handler */
const updateViewBox = () {
if (mq.matches) {
/* Cambiare le dimensioni della viewBox per mostrare l'esagono */
svg.setAttribute( 'viewBox', '0 0 200 174' );
} else {
svg.setAttribute( 'viewBox', originalViewBox );
}
}
svg.addEventListener( 'SVGLoad', updateViewBox );
/* Si attiva se la condizione della media query cambia */
mq.addEventListener( 'change', updateViewBox );
</script>
Ora, quando il contenitore SVG misura 320 pixel o meno, il valore dell’attributo viewBox sarà "0 0 200 174". Oltre i 320 pixel, viewBox torna al valore iniziale.
Poiché questa tecnica si appoggia all’attributo onload o all’evento SVGLoad, conviene incorporare CSS e JavaScript nel file SVG. Quando i CSS sono esterni, SVGLoad può scattare prima che il foglio di stile collegato abbia finito di caricarsi.
Usare le media query con background-size
I documenti SVG e le media query non si limitano alle immagini in primo piano. Possiamo ridimensionare il viewport SVG anche con la proprietà CSS background-size.
Partiamo da questo documento SVG:
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
➥ xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
➥ viewBox="-20 -20 250 250" xml:space="preserve">
<style type="text/css">
circle {
stroke: #000;
stroke-width: 30;
fill: #009688;
}
@media ( width: 100px ) {
circle {
fill: #673ab7;
}
}
@media ( width: 300px ) {
circle {
fill: #ffc107;
}
}
</style>
</defs>
<circle cx="100" cy="100" r="100" />
<circle cx="100" cy="100" r="50" />
</svg>
È un caso semplice: i nostri elementi <circle> ricevono un nuovo fill a larghezze di viewport precise. Per impostazione predefinita il fill è verde acqua, a 100 pixel diventa viola, a 300 pixel giallo.
Perché funzioni dobbiamo usare la nostra immagine SVG come immagine di sfondo e impostare il background-size del selettore. Qui la useremo come sfondo del <body> e degli elementi <li>:
body, li {
background: url(circles.svg);
}
body {
background-color: #9c27b0;
background-size: 300px auto;
}
li {
background-position: left center;
background-repeat: no-repeat;
background-size: 1em auto;
padding-left: 40px;
font-size: 24px;
margin: 1rem 0;
}
Il risultato è quello qui sotto.
Conclusione
Usare SVG con i CSS ci dà più margine per documenti flessibili e adattabili. Ora dovresti sapere come:
- usare i CSS per dare uno stile agli elementi SVG
- animare le proprietà SVG
- usare le media query dei CSS e l’API
matchMediaper mostrare e nascondere parti di un documento SVG.
