Introduzione ai Filtri SVG

Attualmente, CSS offre un modo per applicare effetti cromatici alle immagini (ad es. luminosità, saturazione, contrasto, ecc.) tramite la proprietà filter. Tuttavia, i filtri CSS sono limitati: forniscono un insieme fisso di funzioni monouso (blur(), brightness(), drop-shadow(), ecc.) che si applicano a un intero elemento, principalmente per la manipolazione del colore e la sfocatura. Per creare effetti più potenti e compositi, occorrono altre funzioni. Tali funzioni sono disponibili in SVG.

Questa pagina introduce cosa fanno i filtri SVG, l'elemento <filter> e la sua regione, e come le primitive di filtro vengono concatenate tramite il meccanismo in/result.

Cosa Fanno i Filtri SVG (e Quando Usarli)

Un filtro SVG è una piccola pipeline di elaborazione delle immagini. Invece di un singolo effetto prefabbricato, si descrive una catena di operazioni a basso livello — chiamate primitive di filtro — in cui l'output di un passaggio diventa l'input del successivo. Concatenando le primitive, è possibile costruire effetti che CSS da solo non può esprimere:

• Ombre e bagliori ottenuti sfasando, sfocando, ricolorando e ricomponendo la grafica originale.
• Texture e rumore generati con <feTurbulence> (rumore di Perlin) per nuvole, carta, marmo, ecc.
• Spostamento / deformazione con <feDisplacementMap>, che sposta i pixel usando un'altra immagine come mappa di altezza.
• Effetti di illuminazione che trattano il canale alfa come una mappa bump 3D.

Quando scegliere i filtri SVG rispetto ai filtri CSS: usa la proprietà CSS filter quando hai bisogno di un effetto rapido e singolo (una sfocatura, una regolazione della luminosità, un'ombra) su qualsiasi elemento HTML o SVG. Usa i filtri SVG quando devi combinare più operazioni in un unico effetto composito, generare texture o applicare spostamenti — in qualsiasi caso in cui sia necessario passare l'output di un'operazione come input di un'altra.

L'Elemento <filter> e la Sua Regione

Si definisce un filtro una sola volta all'interno di <defs> e lo si referenzia da una forma tramite l'attributo filter="url(#id)" (oppure la proprietà CSS filter). L'elemento <filter> di per sé non disegna nulla — è un contenitore per le primitive che svolgono il lavoro.

Un filtro ha una regione del filtro: un riquadro di delimitazione che limita dove viene visualizzato il risultato filtrato. Tutto ciò che viene disegnato al di fuori di questa regione viene ritagliato. La regione è controllata da questi attributi su <filter>:

Questa regione è la causa più comune di problemi. Effetti come sfocature e ombre si estendono al di fuori della forma originale, e la regione predefinita del 120% è spesso troppo piccola — l'ombra viene ritagliata ai bordi. Se l'effetto appare troncato, ingrandisci la regione, ad esempio x="-50%" y="-50%" width="200%" height="200%".

Primitive di Filtro

In SVG, ogni elemento <filter> include un insieme di elementi filtro come figli. Ogni primitiva di filtro esegue un'operazione grafica di base su uno o più input, ma produce un solo risultato. L'input è specificato in un attributo chiamato in. Il risultato dell'operazione è specificato nell'attributo result. Il risultato può poi essere usato come input per altre operazioni. Tuttavia, se l'attributo in è omesso, la primitiva utilizza per impostazione predefinita SourceGraphic per la prima operazione, oppure il risultato della primitiva precedente per le operazioni concatenate. Tutte le primitive hanno lo stesso prefisso: fe (abbreviazione di "filter effect"). Il loro nome dipende da cosa un elemento è o fa. Ad esempio, la primitiva che applica un effetto di sfocatura gaussiana alla grafica sorgente si chiama feGaussianBlur.

Parole Chiave di Input Speciali

Oltre a indicare il result di una primitiva precedente, l'attributo in può fare riferimento a questi input predefiniti:

Nota: BackgroundImage, BackgroundAlpha, FillPaint e StrokePaint fanno parte della specifica ma hanno scarso o nessun supporto nei browser odierni; in pratica si lavora con SourceGraphic, SourceAlpha e il result di altre primitive.

Attualmente sono definite 17 primitive di filtro nella specifica SVG Filter.

Elementi Filtro in SVG

Un Esempio con Una Sola Primitiva

Il filtro più semplice ha una sola primitiva. Qui feGaussianBlur prende il SourceGraphic e lo sfoca:

<svg width="200" height="200">
  <defs>
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
  </defs>
  <rect x="10" y="10" width="180" height="180" fill="blue" filter="url(#blur)" />
</svg>

Concatenamento di Primitive: un'Ombra Esterna

La vera potenza deriva dal concatenamento. Per costruire manualmente un'ombra esterna, si prende la sagoma dell'elemento, la si sposta verso il basso e verso destra, la si sfoca, quindi si posiziona la grafica originale di nuovo sopra. Segui gli attributi result/in per vedere come l'output di ogni passaggio scorre nel successivo:

<svg width="220" height="220">
  <defs>
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <!-- 1. Take the alpha (silhouette) of the source -->
      <feOffset in="SourceAlpha" dx="6" dy="6" result="offset" />
      <!-- 2. Blur that offset silhouette -->
      <feGaussianBlur in="offset" stdDeviation="4" result="blur" />
      <!-- 3. Stack the blurred shadow under the original graphic -->
      <feMerge>
        <feMergeNode in="blur" />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>
  <rect x="20" y="20" width="160" height="160" rx="12"
        fill="#1e88e5" filter="url(#shadow)" />
</svg>

Come scorrono i dati:

1. feOffset legge SourceAlpha (la sagoma della forma) e la sposta di dx/dy, scrivendo result="offset".
2. feGaussianBlur legge in="offset" e la ammorbidisce, scrivendo result="blur".
3. feMerge sovrappone i livelli dal basso verso l'alto: prima il blur (l'ombra), poi il SourceGraphic non sfocato sopra — così la forma nitida si posiziona sulla sua ombra morbida.

Nota la regione del filtro ingrandita (width="140%" height="140%") affinché l'ombra sfocata e spostata non venga ritagliata.

Per scorciatoie già pronte, consulta la primitiva <feDropShadow> e il capitolo sugli effetti di sfocatura SVG. Un elenco completo degli attributi per ogni primitiva si trova nel riferimento SVG.

Esercitazione