Home
Learn SVG
SVG

SVG Filters

SVG uses element to define filters. element uses an id attribute to uniquely identify it. Filters are defined within elements.

SVG Filters

SVG FiltersSVG Filters

What is SVG Filters?

SVG uses <filter> element to define filters. <filter> element uses an id attribute to uniquely identify it. Filters are defined within <def> elements and then are referenced by graphics elements by their ids.

The <filter> SVG element defines a custom filter effect by grouping atomic filter primitives. It is never rendered itself but must be used by the filter attribute on SVG elements, or the filter CSS property for SVG/HTML elements. Filter effects are graphics operations that are applied to a given source graphic to produce a modified graphical result. With FE, one can make a 3d like an object on SVG.

The <filter> element is referenced by using the "filter" attribute on the target SVG element or via the CSS filter property.

Filters Elements

SVG provides a rich set of filters elements. Following is the list of the commonly used filters.

  • feBlend
  • feColorMatrix
  • feComponentTransfer
  • feComposite
  • feConvolveMatrix
  • feDiffuseLighting
  • feDisplacementMap
  • feFlood
  • feGaussianBlur
  • feImage
  • feMerge
  • feMorphology
  • feOffset - filter for drop shadows
  • feSpecularLighting
  • feTile
  • feTurbulence
  • feDistantLight
  • fePointLight
  • feSpotLight

Filters Declaration

Following is the syntax declaration of <filter> element. We've shown the main attributes only.

Attributes

  • filterUnits - units to define filter effect region.
    • It specifies the coordinate system for the various length values within the filter and for the attributes defining the filter subregion. If filterUnits="userSpaceOnUse", values represent values in the current user coordinate system in place at the time when the 'filter' element is used. If filterUnits="objectBoundingBox", values represent values in fractions or percentages of the bounding box on the referencing element in place at the time when the 'filter' element is used. Default is userSpaceOnUse.
  • primitiveUnits - units to define filter effect region.
    • It specifies the coordinate system for the various length values within the filter and for the attributes defining the filter subregion. If filterUnits="userSpaceOnUse", values represent values in the current user coordinate system in place at the time when the 'filter' element is used. If filterUnits="objectBoundingBox", values represent values in fractions or percentages of the bounding box on the referencing element in place at the time when the 'filter' element is used. Default isuserSpaceOnUse.
  • x - x-axis co-ordinate of the filter bounding box. Defeault is 0.
  • y - y-axis co-ordinate of the filter bounding box. Default is 0.
  • width - width of the filter bounding box. Default is 0.
  • height - height of the filter bounding box. Default is 0.
  • filterRes - numbers representing filter regions.
  • xlink:href - used to refer to another filter.

How do SVG filters work?

SVG is an open-source XML format for two-dimensional vector graphics defined by the World Wide Web Consortium (W3C). The filter effect consists of a series of graphics operations applied to the original vector graphic given to produce a modified bitmapped result. Filter effects are defined by filter elements.

Example

Output

See the Pen SVG Filters by Coding Taggers (@codingtaggers) on CodePen.

Example Explantion

  • Two <filter> elements defined as filter1 and filter2.
  • feGaussianBlur filter effect defines the blur effect with the amount of blur using stdDeviation.
  • in="SourceGraphic" defines that the effect is applicable for the entire element.
  • feOffset filter effect is used to create the shadow effect. in="SourceAlpha" defines that the effect is applicable for the alpha part of RGBA graphics.
  • <rect> elements linked the filters using filter attribute.

Conclusion

Play with SVG attributes and elements. We will share more information about SVG filter elements in the near future. Want to learn more about SVG? Click here SVG Tutorial.

Post a Comment