Effetti di Sfocatura SVG

Questa pagina spiega come sfocare la grafica SVG con la primitiva di filtro <feGaussianBlur>: come controllare l'intensità della sfocatura, come sfocare solo la silhouette della forma, come dimensionare la regione del filtro in modo che la sfocatura non venga ritagliata, e quando è preferibile usare il più semplice filter: blur() di CSS.

Descrizione dei filtri SVG

Tutti i filtri SVG sono definiti all'interno di un elemento <defs>. <defs> è l'abbreviazione di definitions (definizioni). Contiene elementi riutilizzabili — come i filtri — che non vengono disegnati finché qualcosa non li referenzia.

L'elemento <filter> definisce un filtro SVG. Richiede un attributo id (obbligatorio) che identifica il filtro. L'elemento <filter> non viene renderizzato direttamente: ha effetto solo quando viene referenziato tramite l'attributo filter su una forma SVG, oppure tramite la funzione url() in CSS.

Ogni <filter> contiene una o più primitive di filtro come figli. Una primitiva di filtro esegue un'operazione grafica su uno o più input e produce un singolo output. Oltre ad accettare l'output di un'altra primitiva come input, una primitiva può anche accettare input predefiniti come SourceGraphic e SourceAlpha.

Ogni primitiva di filtro usa il prefisso fe, che sta per "filter effect" (effetto di filtro). Ci sono 17 primitive di filtro definite nella specifica SVG Filter. Per sfocare un elemento si usa <feGaussianBlur>.

Esempio di creazione di un effetto sfocatura:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="150" height="150">
      <defs>
        <filter id="filter" x="0" y="0">
          <feGaussianBlur in="SourceGraphic" stdDeviation="20" />
        </filter>
      </defs>
      <rect width="110" height="110" stroke="green" stroke-width="5" fill="lightblue" filter="url(#filter)" /> 
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

Provalo tu stesso »

Spiegazione del codice:

L'attributo id dell'elemento <filter> specifica un nome univoco per il filtro.
L'effetto di sfocatura è prodotto dall'elemento <feGaussianBlur>.
in="SourceGraphic" passa l'intera forma — colori inclusi — alla sfocatura.
stdDeviation imposta l'intensità della sfocatura.
L'attributo filter dell'elemento <rect> collega la forma al filtro tramite il suo id.

L'attributo stdDeviation

stdDeviation controlla la quantità di sfocatura. È la deviazione standard della funzione gaussiana applicata ai pixel — in termini semplici, un valore più grande distribuisce ogni pixel su un'area più ampia, rendendo l'immagine più morbida. 0 significa nessuna sfocatura.

È possibile passare un solo valore per una sfocatura uniforme, oppure due valori separati da uno spazio per una sfocatura asimmetrica in cui gli assi X e Y vengono sfocati di quantità diverse:

<!-- Uniform blur in both directions -->
<feGaussianBlur in="SourceGraphic" stdDeviation="5" />

<!-- 20px of horizontal blur, 5px of vertical blur (motion-blur look) -->
<feGaussianBlur in="SourceGraphic" stdDeviation="20 5" />

I valori tipici sono piccoli: 1–3 produce un ammorbidimento leggero, 5–10 un risultato chiaramente sfocato, e qualsiasi valore superiore a ~20 rende la forma quasi irriconoscibile. Poiché la sfocatura si espande in ogni direzione, fuoriesce dai limiti originali della forma — ecco perché la regione del filtro è importante (vedi sotto).

SourceGraphic vs SourceAlpha

L'attributo in sceglie su cosa opera la primitiva. I due input sorgente predefiniti si comportano in modo molto diverso:

in="SourceGraphic" — l'elemento esattamente come disegnato, inclusi riempimento, contorno e colori. Applicare la sfocatura qui produce una copia morbida a tutto colore della forma.
in="SourceAlpha" — solo il canale alpha (opacità) dell'elemento. Le informazioni sul colore vengono scartate, lasciando una silhouette nera solida della forma. Sfocare questo valore è la base delle ombre esterne, poiché si vuole un contorno sfocato privo di colore da posizionare dietro l'originale. Consulta SVG drop shadows per questo schema.

<!-- Soft, full-color blur -->
<feGaussianBlur in="SourceGraphic" stdDeviation="6" />

<!-- Blurred black silhouette (colors removed) -->
<feGaussianBlur in="SourceAlpha" stdDeviation="6" />

La regione del filtro (x, y, width, height)

Un <filter> ha una regione di ritaglio. Per impostazione predefinita è x="-10%" y="-10%" width="120%" height="120%" del bounding box dell'elemento — un margine del 10% su ciascun lato. Una sfocatura intensa può facilmente superare quel margine, e tutto ciò che si trova al di fuori della regione viene tagliato con un bordo netto, il che fa sembrare la sfocatura bruscamente interrotta.

Gli attributi x, y, width e height sull'elemento <filter> impostano questa regione. Nel primo esempio, x="0" y="0" sposta l'angolo superiore sinistro della regione all'origine dell'elemento. Per dare spazio a una sfocatura intensa in modo che sfumi gradualmente, è necessario ampliare la regione:

<filter id="soft" x="-20%" y="-20%" width="140%" height="140%">
  <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>

Se una sfocatura sembra ritagliata su un lato, la regione del filtro è di solito troppo piccola — è sufficiente allargarla.

Concatenare primitive con result

Quando un filtro ha più primitive, l'attributo result assegna un nome all'output di una primitiva in modo che una primitiva successiva possa referenziarlo tramite in. È così che si collegano effetti in più passaggi (sfocatura, poi offset, poi fusione):

<filter id="chain">
  <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blurred" />
  <feOffset in="blurred" dx="3" dy="3" />
</filter>

Qui feGaussianBlur memorizza la silhouette sfocata come blurred, e feOffset la recupera con in="blurred". Senza il collegamento result/in, ogni primitiva sfocherebbe nuovamente la sorgente originale.

Sfocare un'immagine e del testo

<feGaussianBlur> funziona su qualsiasi contenuto SVG, non solo sui rettangoli. Di seguito, lo stesso filtro sfoce un'immagine incorporata e una riga di testo. La regione del filtro è ampliata in modo che la sfocatura non venga ritagliata ai bordi.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="320" height="240">
      <defs>
        <filter id="blurFilter" x="-20%" y="-20%" width="140%" height="140%">
          <feGaussianBlur in="SourceGraphic" stdDeviation="4" />
        </filter>
      </defs>
      <image
        href="https://www.w3docs.com/build/assets/images/logo.svg"
        width="180" height="60" x="20" y="20"
        filter="url(#blurFilter)" />
      <text x="20" y="160" font-size="40" fill="navy" filter="url(#blurFilter)">
        Blurred text
      </text>
      Sorry, your browser doesn't support inline SVG.
    </svg>
  </body>
</html>

L'alternativa CSS filter: blur()

Per una sfocatura rapida su un elemento HTML (o su un intero SVG), CSS offre la funzione molto più semplice filter: blur():

img {
  filter: blur(4px);
}

filter: blur() accetta un singolo valore di lunghezza e applica una sfocatura gaussiana uniforme — è la scelta più semplice quando si vuole solo ammorbidire un elemento. Preferire l'approccio SVG con <feGaussianBlur> quando si ha bisogno di:

Sfocatura asimmetrica (quantità diverse per X e Y tramite stdDeviation="20 5").
Sfocare solo la silhouette (in="SourceAlpha").
Concatenare la sfocatura con altre primitive — offset, variazioni di colore, fusioni — per effetti come le ombre esterne.
Un filtro riutilizzabile con nome, referenziato da più forme.

Per un elenco completo delle primitive di filtro e degli attributi, consulta il riferimento SVG.

Esercizio

Pratica

Quali sono le funzioni degli attributi stdDeviation e in nel filtro SVG 'feGaussianBlur'?

L'attributo stdDeviation definisce la deviazione standard per l'operazione di sfocatura.L'attributo in definisce l'input per il filtro.L'attributo stdDeviation viene utilizzato per specificare il raggio del filtro.L'attributo in assegna il colore al filtro.Gli attributi stdDeviation e in non hanno una funzione specifica nel filtro SVG 'feGaussianBlur'.