Efeitos de Desfoque SVG

Esta página explica como desfocar gráficos SVG com a primitiva de filtro <feGaussianBlur>: como controlar a intensidade do desfoque, como desfocar apenas a silhueta da forma, como dimensionar a região do filtro para que o desfoque não seja cortado e quando usar o mais simples filter: blur() do CSS.

Descrição dos filtros SVG

Todos os filtros SVG são definidos dentro de um elemento <defs>. O elemento <defs> é uma abreviação de definitions (definições). Ele armazena peças reutilizáveis — como filtros — que não são desenhadas até que algo as referencie.

O elemento <filter> define um filtro SVG. Ele requer um atributo id (obrigatório) que identifica o filtro. O elemento <filter> não é renderizado diretamente: ele só tem efeito quando referenciado pelo atributo filter em uma forma SVG, ou pela função url() em CSS.

Cada <filter> contém uma ou mais primitivas de filtro como filhos. Uma primitiva de filtro realiza uma operação gráfica em uma ou mais entradas e produz uma única saída. Além de receber a saída de outra primitiva como entrada, uma primitiva também pode aceitar entradas integradas como SourceGraphic e SourceAlpha.

Toda primitiva de filtro usa o prefixo fe, que significa "filter effect" (efeito de filtro). Existem 17 primitivas de filtro definidas na especificação de Filtros SVG. Para desfocar um elemento, usamos <feGaussianBlur>.

Exemplo de criação de um efeito de desfoque:

<!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>

Experimente Você Mesmo »

Explicação do código:

O atributo id do elemento <filter> especifica um nome único para o filtro.
O efeito de desfoque é produzido pelo elemento <feGaussianBlur>.
in="SourceGraphic" alimenta toda a forma — com cores e tudo — no desfoque.
stdDeviation define a intensidade do desfoque.
O atributo filter do elemento <rect> vincula a forma ao filtro por meio de seu id.

O atributo stdDeviation

stdDeviation controla a intensidade do desfoque. É o desvio padrão da função gaussiana aplicada aos pixels — em termos simples, um número maior espalha cada pixel por uma área maior, fazendo a imagem parecer mais suave. 0 significa nenhum desfoque.

Você pode passar um valor para um desfoque uniforme, ou dois valores separados por espaço para um desfoque assimétrico onde os eixos X e Y são desfocados por quantidades diferentes:

<!-- 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" />

Os valores típicos são pequenos: 1–3 dá um suavização suave, 5–10 um resultado claramente desfocado, e qualquer valor acima de ~20 torna a forma quase irreconhecível. Como o desfoque cresce em todas as direções, ele se expande além dos limites originais da forma — é por isso que a região do filtro importa (veja abaixo).

SourceGraphic vs SourceAlpha

O atributo in escolhe o que a primitiva opera. As duas entradas de origem integradas se comportam de forma muito diferente:

in="SourceGraphic" — o elemento exatamente como desenhado, incluindo seu preenchimento, contorno e cores. Desfocar isso produz uma cópia suave e colorida da forma.
in="SourceAlpha" — apenas o canal alfa (opacidade) do elemento. As informações de cor são descartadas, deixando uma silhueta preta sólida da forma. Desfocar isso é a base das sombras projetadas, pois você quer um contorno desfocado sem cor que pode ser deslocado atrás do original. Veja sombras projetadas SVG para esse padrão.

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

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

A região do filtro (x, y, width, height)

Um <filter> possui uma região de recorte. Por padrão, ela é x="-10%" y="-10%" width="120%" height="120%" da caixa delimitadora do elemento — uma margem de 10% em cada lado. Um desfoque intenso pode facilmente se expandir além dessa margem, e qualquer coisa fora da região é cortada com uma borda dura, o que parece que o desfoque foi abruptamente interrompido.

Os atributos x, y, width e height no <filter> definem essa região. No primeiro exemplo, x="0" y="0" desloca o canto superior esquerdo da região para a origem do elemento. Para dar espaço a um desfoque intenso desvanecer suavemente, amplie a região:

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

Se um desfoque parecer cortado em um lado, a região do filtro geralmente é muito pequena — aumente-a.

Encadeamento de primitivas com result

Quando um filtro tem várias primitivas, o atributo result nomeia a saída de uma primitiva para que uma primitiva posterior possa referenciá-la por meio de in. É assim que efeitos em várias etapas (desfoque, depois deslocamento, depois mesclagem) são conectados:

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

Aqui feGaussianBlur armazena sua silhueta desfocada como blurred, e feOffset a lê com in="blurred". Sem o encadeamento result/in, cada primitiva simplesmente desfocaria a fonte original novamente.

Desfocando uma imagem e texto

<feGaussianBlur> funciona em qualquer conteúdo SVG, não apenas retângulos. Abaixo, o mesmo filtro desfoca uma imagem incorporada e uma linha de texto. A região do filtro é ampliada para que o desfoque não seja cortado nas bordas.

<!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>

A alternativa CSS filter: blur()

Para um desfoque rápido em um elemento HTML (ou em um SVG inteiro), o CSS oferece a função muito mais simples filter: blur():

img {
  filter: blur(4px);
}

filter: blur() recebe um único comprimento e aplica um desfoque gaussiano uniforme — é a escolha mais fácil quando você só precisa suavizar um elemento. Prefira a abordagem SVG <feGaussianBlur> quando precisar de:

Desfoque assimétrico (quantidades diferentes em X e Y via stdDeviation="20 5").
Desfocar apenas a silhueta (in="SourceAlpha").
Encadear o desfoque com outras primitivas — deslocamentos, alterações de cor, mesclagens — para efeitos como sombras projetadas.
Um filtro reutilizável e nomeado referenciado por múltiplas formas.

Para uma lista completa de primitivas de filtro e atributos, consulte a referência SVG.

Prática

Quais são as funções dos atributos stdDeviation e in no filtro 'feGaussianBlur' do SVG?

O atributo stdDeviation define o desvio padrão para a operação de desfoque.O atributo in define a entrada para o filtro.O atributo stdDeviation é usado para especificar o raio do filtro.O atributo in atribui a cor ao filtro.Os atributos stdDeviation e in não têm função específica no filtro 'feGaussianBlur' do SVG.