Scalable Vector Graphics - Filters 1

Gopi Chand

6y10.9k150100Article

15 Comments

Join the conversation! Your thoughts help the community grow.

Prasanna Murali10y ago
Nice one....
Nilesh Jadav11y ago
Nice one sir
- Gopi Chand11y ago
  Thanks
Sibeesh Venu11y ago
Nice Share. Thank you.
Ankit Bansal11y ago
thanks for share...
Vaikesh K P11y ago
Nice
- Gopi Chand11y ago
  Thanks
Pankaj Kumar Choudhary11y ago
Nice explain sir
- Gopi Chand11y ago
  Thank you Pankaj Kumar Choudhary
Karthikeyan K11y ago
Good one sir... thanks for sharing
Santhakumar Munuswamy11y ago
Nice Article. Thanks for sharing
Rajeesh Menoth11y ago
Good One
- Gopi Chand11y ago
  Thanks :)
Rakesh11y ago
Nice one sir
- Gopi Chand11y ago
  Thank you :)

Introduction

Before reading further, read the following articles.

Now let's proceed to understand SVG filters.

SVG filters

Filters in SVG provides special effects for SVG graphics. The filter effects can be done with a series of graphics operations on the given source image or graphics to produce the modified graphics as the result. The result of the filter effect is rendered to the target device instead of original source graphics.

The tag <filter> is used here to define the filter for the graphics. This tag uses an id attribute to uniquely identify it and filters are defined in the <def> tag and referenced by graphics elements by their ids. In other words, setting the value of the “filter” property on a given element such that it references the filter effect.

Note: More than one filter can be used in each SVG element.

The following are the available filter elements provided by SVG.

<feBlend> for image combination
<feColorMatrix> for color transformations
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feFlood>
<feGaussianBlur>
<feImage>
<feBurn>
<feMorphology>
<feOffset> for drop shadows
<feSpecularLighting>
<feTile>
<feTurbulence>
<feDistantLight> for lighting
<fePointLight> for lighting
<feSpotLight> for lighting

Attributes used

x & y are the x-axis and y-axis coordinates of the filter bounding box respectively. The default value is (0,0).
Width & height are the width and height of the filter bounding box. The default value is (0,0).
filterRes is the number representing filter regions.
xlink:href refers to another filter.
filterUnits & primitiveUnits are the units to define a filter effects region. It specifies the coordinates system for the various length values within the filter and for the attributes defining the subregion of the filter. If filterUnits is “useSpaceOnUse (default)” then the values will represent values in the current user's coordinate system instead of the filter element used. And if filterUnits is defined as then the “objectBoundingBox” values will represent fractions or percentages of the bounding box on the referencing element in place when the filter element is used.

Here are a few example images.

Want to read more.

Summary

In this article, we learned about Scalable Vector Graphics - Filters 1.

Thank you. Keep learning and sharing.