Description of SVG filters
All SVG filters are defined inside a <defs> element. The <defs> element is a short form of definitions. It contains a definition of specific elements like filters.
The <filter> element defines an SVG filter. This element has an id attribute (required) identifying the filter. The <filter> element is not rendered directly. Its only usage is the case when it can be referenced with the filter attribute in SVG, and the url() function in CSS.
Each <filter> element contains different filter elements as its children. Such filter primitives perform one essential graphical operation on one or more inputs and output only one result. Besides using the result of other primitives as input, a filter primitive can also accept other inputs such as SourceGraphic and SourceAlpha.
All filter elements contain the fe prefix, which stands for “filter effect”.
Now there are 17 filter primitives that are defined in the SVG Filter specification.
In our example, we use the <feGaussianBlur> element to create a blur effect.
Example of creating a blur effect:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="150" height="150">
<defs>
<filter id="filter" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="20" />
</filter>
</defs>
<rect width="110" height="110" stroke="green" stroke-width="5" fill="lightblue" filter="url(#filter)" />
Sorry, your browser doesn't support inline SVG.
</svg>
</body>
</html>Code explanation:
- The <filter> element’s id attribute specifies a unique name for the filter.
- The blur effect is specified with the <feGaussianBlur> element.
- The in="SourceGraphic" part specifies that the effect is created for the whole element.
- The stdDeviation attribute specifies the amount of the blur.
- The <rect> element’s filter attribute links the element to the "filter" filter.
Practice Your Knowledge
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.