Los efectos de los filtros SVG sobre una fotografía.
El ejemplo se compone por veinte botones, cada uno de ellos aplica un efecto de filtro diferente sobre la fotografía. En el ejemplo vamos a ver cuatro efectos diferentes del filtro feColorMatrix, cinco efectos del fitro feComponenetTransfer, dos efectos del filtro feConvolveMatrix, dos efectos del filtro feDisplacementMap, tres efectos del filtro feGaussianBlur y cuatro efectos del filtro feMorphology.
SATURATE
feColorMatrix
type="saturate" in="SourceGraphic" values="0.4"
MATRIX
feColorMatrix
type="matrix" in="SourceGraphic" values="-1 2 -3 0 -.5 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0"
HUE ROTATE
feColorMatrix
type="hueRotate" in="SourceGraphic" values="60"
LUMINANCE
feColorMatrix
type="luminanceToAlpha" in="SourceGraphic" values="0.4"
DISCRETE
feComponentTransfer
feFuncR type="discrete" tableValues="0 .5 1 1"
feFuncG type="discrete" tableValues="0 .5 1"
feFuncB type="discrete" tableValues="0 .5"
TABLE
feComponentTransfer
feFuncR type="table" tableValues="1 0 1" exponent="5"
feFuncG type="table" tableValues="1 0 1" exponent="2"
feFuncB type="table" tableValues="1 0 1" exponent="5"
IDENTITY
feComponentTransfer
feFuncR type="identity"
feFuncG type="identity
feFuncB type="identity"
LINEAR
feComponentTransfer
feFuncR type="linear" slope=".5" amplitude="6" intercept=".25"
feFuncG type="linear" slope=".5" amplitude="2" intercept="0"
feFuncB type="linear" slope=".5" amplitude="3" intercept=".5"
GAMMA
feComponentTransfer
feFuncR type="gamma" amplitude="2" exponent="1"
feFuncG type="gamma" amplitude="2" exponent="3"
feFuncB type="gamma" amplitude="2" exponent="1"
CONMATRIX
feConvolveMatrix
feConvolveMatrix order="3" kernelMatrix="-1 -1 3 -2 1 -1-1 1 -1"
CONMATRIX 2
feConvolveMatrix
feConvolveMatrix order="4" kernelMatrix="-2 2 1 -1 -1 3 2 1 -1 0 -1 -4 -1 1 0 0"
MAP + BLUR
feDisplacementMap
feGaussianBlur stdDeviation="3" result="gausiano"
feDisplacementMap in="SourceGraphic" in2="gausiano"
scale="200" xChannelSelector="R" yChannelSelector="G" result="C"
MAP + BLUR 2
feDisplacementMap
feGaussianBlur stdDeviation="3" result="gausiano"
feDisplacementMap in="SourceGraphic" in2="gausiano"
scale="200" xChannelSelector="G" yChannelSelector="A" result="C"
GAUSSIAN
feDisplacementMap
feGaussianBlur stdDeviation="3"
GAUSSIAN 2
feDisplacementMap
feGaussianBlur stdDeviation="9"
GAUSSIAN 3
feDisplacementMap
feGaussianBlur stdDeviation="18"
ERODE
feMorphology
feMorphology operator="erode" in="SourceGraphic" radius="3"
ERODE 2
feMorphology
feMorphology operator="erode" in="SourceGraphic" radius="6"
DILATE
feMorphology
feMorphology operator="dilate" in="SourceGraphic" radius="3"
DILATE 2
feMorphology
feMorphology operator="dilate" in="SourceGraphic" radius="6"
ORIGINAL