Corsi on-line

Filtri SVG per stilizzare i testi

L’SVG (Scalable Vector Graphics) è un linguaggio, e nello stesso tempo un formato, per la grafica vettoriale derivato da XML per la gestione di immagini (ri)dimensionabili. Uno dei vantaggi degli output prodotti tramite SVG sta nel fatto che essi sono compatibili con i browser per la navigazione Web e possono quindi essere utilizzati come alternativa ad altri standard per Internet come per esempio JPEG e PNG.

SVGTra gli aspetti più interessanti dell’SVG vi è la possibilità di utilizzare dei filtri per la restituzione di effetti specifici; un filtro SVG è definibile utilizzando l’apposito elemento filter, tag che dovrà essere associato ad un identificatore (id) delle regole di stile CSS. L’esempio proposto in questo articolo farà riferimento alla stilizzazione di un testo tramite un filtro che chiameremo brand.

La stringa da stilizzare (nello specifico “MyBrand“) verrà scritta all’interno del markup come testo pieno, ma l’output prodotto sarà in tutto e per tutto un elemento grafico, cioè l’immagine della stringa. Come carattere è stato scelto “Oswald“, prelevato dinamicamente dal repository di Google Fonts, in ogni caso si sarebbe potuta scegliere una qualsiasi alternativa sulla base delle proprie esigenze tipografiche.

Cominciamo subito con il codice necessario per la produzione dell’immagine SVG, sostanzialmente si partirà da una stringa monodimensionale a cui verranno aggiunte delle ombre (del medesimo colore) stratificate in modo da ottenere un effetto tridimensionale.

<svg width='500' height='250'>
<filter id='brand'>
<feMorphology in='SourceGraphic' operator='dilate' radius='1' result='expand'/>
<feOffset in='expand' dx='1' dy='1' result='ombra-1'/>
<feOffset in='expand' dx='2' dy='2' result='ombra-2'/>
<feOffset in='expand' dx='3' dy='3' result='ombra-3'/>
<feOffset in='expand' dx='4' dy='4' result='ombra-4'/>
<feMerge result='ombra'>
<feMergeNode in='expand'/>
<feMergeNode in='ombra-1'/>
<feMergeNode in='ombra-2'/>
<feMergeNode in='ombra-3'/>
<feMergeNode in='ombra-4'/>
</feMerge>
</filter>
<text dominant-baseline='middle' text-anchor='middle' x='50%' y='50%'>MyBrand</text>
</svg>

Nell’esempio si è scelto di creare 4 diversi strati d’ombra, sarebbero potuti essere di più o di meno a seconda del livello di profondità desiderato dallo sviluppatore; ciascuno strato dovrà essere passato a feMergeNode che si occuperà della sua fusione con gli altri, mentre in rappresenterà l’input da elaborare.

Fatto questo si potrà passare alla definizione delle regole CSS, si noti l’utilizzo della proprietà filter per la chiamata al selettore e l’importazione diretta del Google Font utilizzato.

@import url('https://fonts.googleapis.com/css?family=Oswald+Display:500');
svg {
background: #dfe3ee;
}
text {
fill: #3b5998;
filter: url('#brand');
font-family: 'Oswald', sans-serif;
font-style: italic;
font-size: 100px;
font-weight: 500;
}
html {
align-items: center;
background: #ebe7e0;
display: inline-flex;
justify-content: center;
min-height: 90vh;
min-width: 700px;
}

Si tratta naturalmente di una semplice traccia che potrà essere utilizzata come template per eventuali personalizzazioni; si ricordi in proposito che SourceGraphic dovrà fare riferimento all’immagine originale, mentre result dovrà essere associato al nome dell’output sul quale sarà applicato il filtro.

Post correlati
I più letti del mese
Tematiche