SVG - Filtros

SVG usa el elemento <filter> para definir filtros. El elemento <filter> utiliza un atributo id para identificarlo de forma única. Los filtros se definen dentro de los elementos <def> y luego los elementos gráficos hacen referencia a ellos mediante sus ID.

SVG proporciona un amplio conjunto de filtros. A continuación se muestra la lista de los filtros más utilizados.

  • feBlend
  • feColorMatrix
  • feComponentTransfer
  • feComposite
  • feConvolveMatrix
  • feDiffuseLighting
  • feDisplacementMap
  • feFlood
  • feGaussianBlur
  • feImage
  • feMerge
  • feMorphology
  • feOffset - filtro para sombras paralelas
  • feSpecularLighting
  • feTile
  • feTurbulence
  • feDistantLight
  • fePointLight
  • feSpotLight

Declaración

A continuación se muestra la declaración de sintaxis de <filter>elemento. Solo mostramos los atributos principales.

<filter
   filterUnits="units to define filter effect region"
   primitiveUnits="units to define primitive filter subregion"
   
   x="x-axis co-ordinate" 
   y="y-axis co-ordinate"     
   
   width="length"
   height="length"
   
   filterRes="numbers for filter region"
   xlink:href="reference to another filter" >
</filter>

Atributos

No Señor. Nombre y descripción
1 filterUnits- unidades para definir la región del efecto de filtro. Especifica el sistema de coordenadas para los diversos valores de longitud dentro del filtro y para los atributos que definen la subregión del filtro. Si filterUnits = "userSpaceOnUse", los valores representan valores en el sistema de coordenadas del usuario actual en su lugar en el momento en que se usa el elemento 'filtro'. Si filterUnits = "objectBoundingBox", los valores representan valores en fracciones o porcentajes del cuadro delimitador en el elemento de referencia en su lugar en el momento en que se utiliza el elemento 'filtro'. El valor predeterminado es userSpaceOnUse.
2 primitiveUnits- unidades para definir la región del efecto de filtro. Especifica el sistema de coordenadas para los diversos valores de longitud dentro del filtro y para los atributos que definen la subregión del filtro. Si filterUnits = "userSpaceOnUse", los valores representan valores en el sistema de coordenadas del usuario actual en su lugar en el momento en que se usa el elemento 'filtro'. Si filterUnits = "objectBoundingBox", los valores representan valores en fracciones o porcentajes del cuadro delimitador en el elemento de referencia en su lugar en el momento en que se utiliza el elemento 'filtro'. El valor predeterminado es userSpaceOnUse.
3 x- Coordenada del eje x del cuadro delimitador del filtro. Defeault es 0.
4 y- Coordenada del eje Y del cuadro delimitador del filtro. El valor predeterminado es 0.
5 width- ancho del cuadro delimitador del filtro. El valor predeterminado es 0.
6 height- altura del cuadro delimitador del filtro. El valor predeterminado es 0.
7 filterRes - números que representan las regiones de filtro.
8 xlink:href - utilizado para referirse a otro filtro.

Ejemplo

testSVG.htm 
<html>
   <title>SVG Filter</title>
   <body>
   
      <h1>Sample SVG Filter</h1>
   
      <svg width="800" height="800">
      
         <defs>
            <filter id="filter1" x="0" y="0">
               <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
            </filter>
            
            <filter id="filter2" x="0" y="0" width="200%" height="200%">
               <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
               <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
               <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
            </filter>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Filters (Blur Effect): </text>
            <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
            fill="green" filter="url(#filter1)" />      
         </g> 
         
      </svg>
   
   </body>
</html>

  • Dos elementos <filter> definidos como filter1 y filter2.

  • El efecto de filtro feGaussianBlur define el efecto de desenfoque con la cantidad de desenfoque usando stdDeviation.

  • in = "SourceGraphic" define que el efecto es aplicable para todo el elemento.

  • El efecto de filtro feOffset se utiliza para crear un efecto de sombra. in = "SourceAlpha" define que el efecto es aplicable para la parte alfa de los gráficos RGBA.

  • Los elementos <rect> vincularon los filtros usando el atributo de filtro.

Salida

Abra textSVG.htm en el navegador web Chrome. Puede usar Chrome / Firefox / Opera para ver la imagen SVG directamente sin ningún complemento. Internet Explorer 9 y versiones posteriores también admiten la reproducción de imágenes SVG.

Filtro con efecto de sombra

<html>
   <title>SVG Filter</title>
   <body>
      
      <h1>Sample SVG Filter</h1>
      
      <svg width="800" height="800">
      
         <defs>
            <filter id="filter1" x="0" y="0">
               <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
            </filter>
            
            <filter id="filter2" x="0" y="0" width="200%" height="200%">
               <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
               <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
               <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
            </filter>
         </defs>
         
         <g>
            <text x="30" y="50" >Using Filters (Shadow Effect): </text>
            <rect x="100" y="100" width="90" height="90" stroke="green" stroke-width="3"
            fill="green" filter="url(#filter2)" />
         </g>
         
      </svg>
   
   </body>
</html>

Salida

Abra textSVG.htm en el navegador web Chrome. Puede usar Chrome / Firefox / Opera para ver la imagen SVG directamente sin ningún complemento. Internet Explorer 9 y versiones posteriores también admiten la reproducción de imágenes SVG.