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

Muy importante: Si no declaramos las dimensiones del filtro ( x, y, width, height ), estas coinciden con el tamaño conjunto de las regiones de todos los filtros primitivos declarados. Su valor depende del valor del atributo primitiveUnits del elemento <filter> padre.

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"

pero solo dos de estas palabras clave son actualmente bien soportadas en los navegadores:

  • - SourceGraphic ( el grafico de origen al cual aplicamos el filtro )
  • - SourceAlpha ( solo el canal Alpha del grafico de origen )

El valor del atributo in puede ser también una referencia que corresponde al valor del atributo result de otro elemento situado en el mismo <filter>.
Si el atributo in no esta especificado, su valor por defecto es el resultado del filtro primitivo anterior.

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.

El atributo result es un identificador de alcance local sensible a las mayúsculas y minúsculas y su valor tiene que ser único dentro del mismo filtro pero no tiene porque ser único dentro del documento.

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


  
    
       
       
       
         
         
       
    
  
  

Sabemos que si el atributo in no esta especificado, su valor por defecto es el resultado del filtro primitivo precedente. En este caso podemos actualizar de esta manera el código para el ejemplo anterior:


<svg width="250" height="150">
  <defs>
    <filter id="sombra" >
      <feGaussianBlur in="SourceAlpha" stdDeviation="5" />
      <feOffset dx="3" dy="3" />
      <feMerge>
        <feMergeNode />
        <feMergeNode in="SourceGraphic" />
      </feMerge>
    </filter>
  </defs>
  <rect x="75" y="25" height="100" width="100" stroke="#000" fill="#6ab150" filter="url(#sombra)"></rect>
</svg>