Latest web development tutorials

SVG Filters

SVG filter can be used to increase the SVG graphics special effects.

SVG Filters

In this tutorial, we'll show only one possible use of special effects. After the show the basics, you have learned to use special effects, you should be able to apply to other places. The key here is to give you an idea of ​​what to do SVG, rather than repeating the entire specification.

SVG filters are available:

  • feBlend - combined with image filters
  • feColorMatrix - for color conversion filter
  • feComponentTransfer
  • feComposite
  • feConvolveMatrix
  • feDiffuseLighting
  • feDisplacementMap
  • feFlood
  • feGaussianBlur
  • feImage
  • feMerge
  • feMorphology
  • feOffset - filtered shadow
  • feSpecularLighting
  • feTile
  • feTurbulence
  • feDistantLight - filter for lighting
  • fePointLight - filter for lighting
  • feSpotLight - filter for lighting

Remark In addition, you can use multiple filters on each SVG element!