Filtri & Effetti Grafici

In questo capitolo andremo ad analizzare gli strumenti che ci consentono di elaborare gli elementi SVG per creare effetti grafici sofisticati come ombreggiature, effetti 3D, ecc. Questi effetti sono prodotti applicando all’immagine originaria quelli che vengono chiamati filtri grafici.
Un filtro grafico non è altro che un particolare algoritmo matematico, tipico del campo dell’image processing (elaborazione dell’immagine), che riceve come input l’immagine (o un singolo elemento grafico) e produce come output l’immagine elaborata.
SVG mette a disposizione una serie di primitive grafiche che realizzano i comandi base di elaborazione dell’immagine come ad esempio effetti di luce, ombreggiature, composizioni di colori, fusioni di elementi, etc. Un filtro grafico è realizzato utilizzando una combinazione di una o più di queste primitive.
L’elemento SVG per descrivere il filtro è <filter> ed al suo interno vanno definite tutte le primitive che compongono il filtro. Consideriamo un esempio di filtro grafico che produce l’ombra di una scritta.

<svg width=”300″ height=”300″>
<defs>
   <filter id=”ombra”>
      <feGaussianBlur in=”SourceAlpha” stdDeviation=”3″ result=”passo1″/>
      <feOffset in=”passo1″ dx=”5″ dy=”5″ result=”passo2″/>
      <feMerge>
         <feMergeNode in=”passo2″/>
         <feMergeNode in=”SourceGraphic”/>
      </feMerge>
   </filter>
</defs>
<text x=”50″ y=”100″ style=”font-family:times;font-size:60;fill:red” filter=”url(#ombra)”>Html.it</text>
</svg>

In questo esempio sono state utilizzate tre primitive: feGaussianBlur, feOffset, feMerge.
La prima si occupa di creare l’ombra dell’elemento grafico; la seconda si occupa di traslare leggermente l’ombra prodotta im modo da creare un piccolo “effetto 3d”; infine la terza ha il compito di comporre l’immagine originaria con l’ombra appena creata in modo da produrre il risultato visualizzato in figura:

Il filtro viene applicato attraverso l’uso dell’attributo filter che contiene l’identificatore del filtro da utilizzare, secondo la sintassi mostrata nell’esempio (filter=”url(#ombre)”).
Come si vede dall’esempio la primitive hanno alcuni attributi comuni come ad esempio in e result. Grazie a questi attributi possiamo creare dei filtri costituiti da una sequenza di primitive, utilizzando l’output di una primitiva come input di un’altra. L’attributo in permette di specificare il nome dell’input della primitiva, mentre result permette di assegnare un identificatore all’output prodotto.
Ovviamente ciascuna primitiva ha i suoi attributi specifici che consentono di inizializzare tutti parametri caratterisitici del filtro. L’analisi di ogni singola primitiva è abbastanza complessa e richiede una conoscenza approfondita delle tecniche di image processing che esulano dagli scopi di questa guida e quindi non verrà affrontata. In questo capitolo abbiamo affrontato i concetti base dell’uso dei filtri e per informazioni più approfondite vi rimando alla lettura delle specifiche SVG.