SVG - Filtros

SVG usa o elemento <filter> para definir filtros. O elemento <filter> usa um atributo id para identificá-lo exclusivamente. Os filtros são definidos dentro dos elementos <def> e, a seguir, são referenciados por elementos gráficos por seus ids.

O SVG fornece um rico conjunto de filtros. A seguir está a lista dos filtros comumente usados.

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

Declaração

A seguir está a declaração de sintaxe de <filter>elemento. Mostramos apenas os atributos principais.

<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

Sr. Não.	Nome e Descrição
1	filterUnits- unidades para definir a região do efeito do filtro. Ele especifica o sistema de coordenadas para os vários valores de comprimento dentro do filtro e para os atributos que definem a sub-região do filtro. Se filterUnits = "userSpaceOnUse", os valores representam os valores no sistema de coordenadas do usuário atual em vigor no momento em que o elemento 'filtro' é usado. Se filterUnits = "objectBoundingBox", os valores representam os valores em frações ou porcentagens da caixa delimitadora no elemento de referência no local no momento em que o elemento 'filtro' é usado. O padrão é userSpaceOnUse.
2	primitiveUnits- unidades para definir a região do efeito do filtro. Ele especifica o sistema de coordenadas para os vários valores de comprimento dentro do filtro e para os atributos que definem a sub-região do filtro. Se filterUnits = "userSpaceOnUse", os valores representam os valores no sistema de coordenadas do usuário atual em vigor no momento em que o elemento 'filtro' é usado. Se filterUnits = "objectBoundingBox", os valores representam os valores em frações ou porcentagens da caixa delimitadora no elemento de referência no local no momento em que o elemento 'filtro' é usado. O padrão é userSpaceOnUse.
3	x- coordenada do eixo x da caixa delimitadora do filtro. Defeault é 0.
4	y- coordenada do eixo y da caixa delimitadora do filtro. O padrão é 0.
5	width- largura da caixa delimitadora do filtro. O padrão é 0.
6	height- altura da caixa delimitadora do filtro. O padrão é 0.
7	filterRes - números que representam regiões de filtro.
8	xlink:href - usado para se referir a outro filtro.

Exemplo

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>

Dois elementos <filter> definidos como filter1 e filter2.
O efeito de filtro feGaussianBlur define o efeito de desfoque com a quantidade de desfoque usando stdDeviation.
in = "SourceGraphic" define que o efeito é aplicável a todo o elemento.
O efeito de filtro feOffset é usado para criar o efeito de sombra. in = "SourceAlpha" define que o efeito é aplicável para a parte alfa dos gráficos RGBA.
Os elementos <rect> vinculam os filtros usando o atributo filter.

Resultado

Abra textSVG.htm no navegador Chrome. Você pode usar o Chrome / Firefox / Opera para visualizar a imagem SVG diretamente sem qualquer plugin. O Internet Explorer 9 e superior também oferece suporte à renderização de imagens SVG.

Filtro com efeito 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>

Resultado