Definición de la forma

Primero vamos a definir la forma a la que vamos a aplicarle los filtros.

<path id="flecha" d="M110, 30 L190, 10 170, 90 150, 70 30, 180 20, 170 130, 50 Z" style="fill: #66ff33; stroke: red;">

feColorMatrix

El primer filtro que le vamos a aplicar va a ser <feColorMatrix> Podemos elegir diferentes tipos, matrix | saturate | hueRotate | luminanceToAlpha y trambién podremos definir los valores, según el tipo.

En este caso hemos usado:

<filter id="hueRotate" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" heigth="100%">
  <feColorMatrix type="hueRotate" in="SourceGraphic" values="90%"/>
</filter> <filter id="saturate" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" heigth="100%">
  <feColorMatrix type="saturate" in="SourceGraphic" values="0.5"/>
</filter>

feGaussianBlur

Ahora vamos a aplicar un desenfoque gausiano, vamos a ver el resultado tanto si aplicamos al canal alfa como a los gráficos.

<filter id="gBlurA" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" heigth="100%">
  <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
</filter>
<filter id="gBlurG" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" heigth="100%">
  <feGaussianBlur in="SourceGraphics" stdDeviation="4"/>
</filter>


feOffset

Con <feOffset> vamos a crear un marco desplazando la entrada original que le pasemos al filtro, esto generará un efecto de sombra. Vamos a ver el efecto del filtro tanto teniendo en la entrada los gráficos como el canal Alpha.

<filter id="offA" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" heigth="100%">
  <feOffset in="SourceAlpha" dx="7" dy="7"/>
</filter>
<filter id="offG" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" heigth="100%">
  <feOffset in="SourceGraphics" dx="7" dy="7"/>
</filter>


De estas formas, lo único que vemos es la figura con la que estamos trabajando un poco desplazada. Vamos a usar <feMerge> y <feMergeNode> para juntar el filtro con la imagen original y ver el efecto.

<filter id="sumaFiltros1" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" heigth="100%">
  <feOffset in="SourceAlpha" dx="7" dy="7" result="off"/>
  <feMerge>
    <feMergeNode in="off"></feMergeNode>
    <feMergeNode in="SourceGraphics"></feMergeNode>
  </feMerge>
</filter>


Luces - feSpecularLighting y fePointLight

Vamos a crear un punto de luz, que juntaremos con el gráfico con el que estamos trabajando con <feComposite> para crear la iluminación

<filter id="luzA" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" heigth="100%">
  <feSpecularLighting surfaceScale="5" specularConstant=".75" specularExponent="20" lighting-color="#bbbbbb" result="luzOut"/>
    <fePointLight x="-5000" y="-10000" z="20000"/>
  <feSpecularLighting>
  <feComposite in="luzOut" in2="SourceAlpha" operator="in" result="luzOut"/>
  <feComposite in="SourceGraphic" in2="luzOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
</filter>
<filter id="luzG" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" heigth="100%">
  <feSpecularLighting surfaceScale="5" specularConstant=".75" specularExponent="20" lighting-color="#bbbbbb" result="luzOut"/>
    <fePointLight x="500" y="100" z="200"/>
  <feSpecularLighting>
  <feComposite in="luzOut" in2="SourceAlpha" operator="in" result="luzOut"/>
  <feComposite in="SourceGraphic" in2="luzOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
</filter>


Composición con los filtros vistos.

Con <feMerge> y <feMergeNode> como hemos visto antes vamos a fusionar todos los filtros vistos, para crear un efecto de 3D. Para ello, vamos a ir almacenando los resultados de aplicar los diferentes filtros con la propiedad result y será lo que usemos como entrada para aplicar los siguintes filtros.

<filter id="3D" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
  <feOffset in="SourceAlpha" stdDeviation="-3" result="blurIn"/>
  <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
  <feOffset in="blur" in2="blurIn" dx="5" dy="4" result="boff"/>
  <feSpecularLighting in="SourceGraphic" surfaceScale="4" specularConstant=".75" specularExponent="20" lighting-color="#bbbbbb" result="luzOut">
    <fePointLight x="500" y="100" z="200"/>
  </feSpecularLighting>
  <feComposite in="luzOut" in2="SourceGraphic" operator="in" result="luzOut"/>
  <feComposite in="SourceGraphic" in2="luzOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
  <feMerge>
    <feMergeNode in="boff"></feMergeNode>
    <feMergeNode in="litPaint"></feMergeNode>
  </feMerge>
</filter>

Combinación de filtros y formas SVG

<svg width="1000" height="200">   <filter id ="blur1" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="30"/>
  </filter>
  <filter id ="blur2" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="50"/>
  </filter>
  <filter id ="off1" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%>
    <feOffset in="SourceAlpha" dx="1" dy="10" result="off"/>
    <feGaussianBlur in="off" stdDeviation="7"/>
  </filter>
  <rect x="50" y="60" width="250" height="80" fill="#a2a2a2" filter="url(#off1)"/>
  <rect x="50" y="50" width="250" height="80" fill="#a2a2a2"/>
  <rect x="300" y="45" width="600" height="100" fill="white" opacity="0.3"/>
  <rect x="300" y="45" width="600" height="100" fill="00ff00" opacity="0.7" filter="url(#blur2)"/>
  <rect x="300" y="45" width="600" height="100" fill="#4dff4d" filter="url(#blur1)"/>
</svg>