Efectos de desenfoque SVG - Aprender HTML

Esta página explica cómo desenfocar gráficos SVG con la primitiva de filtro <feGaussianBlur>: cómo controlar la intensidad del desenfoque, cómo desenfocar solo la silueta de la forma, cómo dimensionar la región del filtro para que el desenfoque no quede recortado, y cuándo usar el más sencillo filter: blur() de CSS en su lugar.

Descripción de los filtros SVG

Todos los filtros SVG se definen dentro de un elemento <defs>. <defs> es la abreviatura de definitions (definiciones). Contiene elementos reutilizables —como filtros— que no se renderizan hasta que algo los referencia.

El elemento <filter> define un filtro SVG. Requiere un atributo id (obligatorio) que identifica el filtro. El elemento <filter> no se renderiza directamente: solo tiene efecto cuando se referencia mediante el atributo filter en una forma SVG, o a través de la función url() en CSS.

Cada <filter> contiene una o más primitivas de filtro como hijos. Una primitiva de filtro realiza una operación gráfica sobre una o más entradas y produce una única salida. Además de tomar la salida de otra primitiva como entrada, una primitiva también puede aceptar entradas predefinidas como SourceGraphic y SourceAlpha.

Todas las primitivas de filtro usan el prefijo fe, que corresponde a "filter effect" (efecto de filtro). Hay 17 primitivas de filtro definidas en la especificación de filtros SVG. Para desenfocar un elemento se utiliza <feGaussianBlur>.

Ejemplo de creación de un efecto de desenfoque:

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

Pruébalo tú mismo »

Explicación del código:

El atributo id del elemento <filter> especifica un nombre único para el filtro.
El efecto de desenfoque lo produce el elemento <feGaussianBlur>.
in="SourceGraphic" alimenta la forma completa —colores incluidos— en el desenfoque.
stdDeviation establece la intensidad del desenfoque.
El atributo filter del elemento <rect> vincula la forma al filtro por su id.

El atributo stdDeviation

stdDeviation controla la cantidad de desenfoque. Es la desviación estándar de la función gaussiana aplicada a los píxeles — en términos simples, un número mayor extiende cada píxel sobre un área más amplia, por lo que la imagen se ve más suave. 0 significa sin desenfoque.

Se puede pasar un solo valor para un desenfoque uniforme, o dos valores separados por espacio para un desenfoque asimétrico donde los ejes X e Y se desenfoca por cantidades distintas:

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

Los valores típicos son pequeños: 1–3 produce un suavizado suave, 5–10 un resultado claramente borroso, y cualquier valor por encima de ~20 hace que la forma sea casi irreconocible. Como el desenfoque crece en todas las direcciones, se derrama fuera de los límites originales de la forma — por eso es importante la región del filtro (véase más abajo).

SourceGraphic vs SourceAlpha

El atributo in elige sobre qué opera la primitiva. Las dos entradas de origen predefinidas se comportan de forma muy diferente:

in="SourceGraphic" — el elemento exactamente como se dibujó, incluyendo su relleno, trazo y colores. Desenfocar esto produce una copia suave y a todo color de la forma.
in="SourceAlpha" — solo el canal alfa (opacidad) del elemento. La información de color se descarta, dejando una silueta negra sólida de la forma. Desenfocar esto es la base de las sombras, ya que se necesita un contorno borroso sin color que se pueda desplazar detrás del original. Consulta sombras SVG para ese patrón.

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

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

La región del filtro (x, y, width, height)

Un <filter> tiene una región de recorte. Por defecto es x="-10%" y="-10%" width="120%" height="120%" del cuadro delimitador del elemento — un margen del 10% en cada lado. Un desenfoque intenso puede extenderse fácilmente más allá de ese margen, y cualquier cosa fuera de la región queda cortada con un borde abrupto, lo que hace que el desenfoque parezca súbitamente truncado.

Los atributos x, y, width y height en <filter> definen esta región. En el primer ejemplo, x="0" y="0" desplaza la esquina superior izquierda de la región hasta el origen del elemento. Para dar a un desenfoque intenso espacio suficiente para desvanecerse suavemente, amplía la región:

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

Si un desenfoque parece recortado por un lado, la región del filtro suele ser demasiado pequeña — amplíala.

Encadenamiento de primitivas con result

Cuando un filtro tiene varias primitivas, el atributo result nombra la salida de una primitiva para que una primitiva posterior pueda referenciarla mediante in. Así se conectan los efectos de varios pasos (desenfoque, luego desplazamiento, luego fusión):

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

Aquí feGaussianBlur almacena su silueta desenfocada como blurred, y feOffset la lee con in="blurred". Sin el sistema de result/in, cada primitiva volvería a desenfocar la fuente original.

Desenfoque de una imagen y texto

<feGaussianBlur> funciona con cualquier contenido SVG, no solo con rectángulos. A continuación, el mismo filtro desenfoca una imagen incrustada y una línea de texto. La región del filtro se amplía para que el desenfoque no quede recortado en los bordes.

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

La alternativa CSS filter: blur()

Para un desenfoque rápido en un elemento HTML (o en un SVG completo), CSS ofrece la función mucho más sencilla filter: blur():

img {
  filter: blur(4px);
}

filter: blur() acepta una sola longitud y aplica un desenfoque gaussiano uniforme — es la opción más fácil cuando solo necesitas suavizar un elemento. Prefiere el enfoque SVG <feGaussianBlur> cuando necesites:

Desenfoque asimétrico (distintas cantidades en X e Y mediante stdDeviation="20 5").
Desenfocar solo la silueta (in="SourceAlpha").
Encadenar el desenfoque con otras primitivas — desplazamientos, cambios de color, fusiones — para efectos como sombras.
Un filtro reutilizable con nombre referenciado desde múltiples formas.

Para una lista completa de primitivas de filtro y atributos, consulta la referencia SVG.

Práctica

¿Cuáles son las funciones de los atributos stdDeviation e in en el filtro 'feGaussianBlur' de SVG?

El atributo stdDeviation define la desviación estándar para la operación de desenfoque.El atributo in define la entrada para el filtro.El atributo stdDeviation se usa para especificar el radio del filtro.El atributo in asigna el color al filtro.Los atributos stdDeviation e in no tienen ninguna función específica en el filtro 'feGaussianBlur' de SVG.