Filtros SVG - una introducción

facebook-svg gplus-svg twitter-svg

Utilizamos los filtros SVG para conseguir graficas con aspecto agradable. Para crear filtros utilizamos el elemento <filter> y el atributo filter.

Como funcionan los filtros

Cuando creamos un filtro lo ponemos dentro de un contenedor: el elemento <filter>. Es importante que el elemento <filter> tenga una identificación ( el atributo id ) para poder referenciarlo más tarde.
Aunque el elemento <filter> no aparece en pantalla por si solo, es recomendable ponerlo, junto con las demás definiciones, dentro del elemento <defs>.

<defs>
  <filter id="f1">
     <!--los filtros primitivos van aqui -->
  </filter>
</defs>

Para aplicar el filtro utilizamos el atributo filter.

<rect x="75" y="25" height="100" width="100" filter="url(#f1)" . . . .

En el siguiente ejemplo queremos aplicar un desenfoque gaussiano <feGaussianBlur> al grafico de origen ( SourceGraphic ) o sea al rectángulo <rect>.
Decimos que <feGaussianBlur> es un filtro primitivo, y como todos los demás filtros primitivos puede aparecer solo anidado dentro del elemento <filter>.

El atributo stdDeviation ( la desviación estandard ) del elemento <feGaussianBlur> controla la extensión del desenfoque. Si el valor del atributo stdDeviation es un solo número, la desviación es igual tanto en x como en y. Si por lo contrario se facilitan dos números ( stdDeviation= "5,10" ), el primero representa la desviación en x, y el segundo la desviación en y.



  
    
       
    



Las dimensiones de los filtros
los atributos x y width y height

En el ejemplo anterior hemos definido las dimensiones del filtro id="f1" utilizando los atributos x, y, width y height.

<filter id="f1" x="65" y="15" height="120" width="120". . .

Observamos que las dimensiones del filtro son algo más grandes que las del rectángulo desenfocado, ya que el desenfoque gaussiano se extiende 5px más allá de los limites del trazado.

<feGaussianBlur in="SourceGraphic" stdDeviation="5" />

El atributo filterUnits

El atributo filterUnits que aparece en el ejemplo anterior puede tomar dos valores: userSpaceOnUse y objectBoundingBox.

filterUnits ="userSpaceOnUse | objectBoundingBox"

Si filterUnits="userSpaceOnUse" las dimensiones del filtro son en la unidad de medida utilizada ( en este caso en pixeles ).
Si filterUnits="objectBoundingBox" las dimensiones del filtro se dan en porcentajes respecto al tamaño de la caja lindante ( the bounding box ).

El atributo in

El atributo in identifica el objeto al cual se le aplica el filtro. En el ejemplo anterior in="SourceGraphic" porque aplicamos el desenfoque gaussiano al grafico de origen ( source graphic ).
En el siguiente ejemplo queremos aplicar un desenfoque gaussiano para crear un efecto de sombra. Para esto el valor del atributo in="SourceAlpha" ( solo el canal alfa del rectángulo es utilizado ).



  
    
       
    


El valor del atributo in puede ser una de estas seis palabras clave:

in ="SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint"

o puede ser una referencia que corresponde al valor del atributo result de otro elemento situado en el mismo <filter>. Decimos que el atributo result tiene un alcance de carácter local.

Combinando filtros

Combinamos varios filtros utilizando el elemento <feMerge>.

A continuación queremos aplicar una sombra al rectángulo <rect>. Empezamos creando la sombra: un desenfoque gaussiano del canal alfa del rectángulo – igual al que creamos en el ejemplo anterior. Solo que esta vez el elemento <feGaussianBlur> tiene asignado un atributo result.

<feGaussianBlur in="SourceAlpha" stdDeviation="5" result="desenfoque" />

Queremos desplazar la sombra resultante ( result="desenfoque" ) unos 3px hacia la derecha y abajo. Lo hacemos utilizando el elemento <feOffset> que toma como valor del atributo in el resultado del filtro anterior.

<feOffset in="desenfoque" dx="3" dy="3" result="desplazamiento" />

Los atributos dx y dy controlan el desplazamiento del objeto relativo a su posición inicial.

<feOffset in="desenfoque" dx="3" dy="3" result="desplazamiento" />

El elemento  <feOffset> también tiene asignado un atributo result para poder referenciarlo más tarde.

<feOffset in="desenfoque" dx="3" dy="3" result="sombra" />

Procedemos a combinar el resultado de los filtros anteriores: la sombra ( result="sombra" ) y el grafico de origen: SourceGraphic. Para esto utilizamos el elemento <feMerge> dentro de cual aparecen anidados dos elementos <feMergeNode>, uno para cada componente que queremos combinar.

<feMerge>
   <feMergeNode in="sombra" />
   <feMergeNode in="SourceGraphic" />
</feMerge>