Main
functionality of the SVG filters are to add special effects to the SVG
graphics. There are many SVG filters elements which have different functions
and some of them are <feBlend> which is responsible for filtering the
images which are combines and <feColormatrix> which is responsible for
transforming colors.
Example:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>SVG Example</title>
</head>
<body>
<h2>An Example on Filter</h2>
<svg height="150" width="150">
<defs>
<filter id="filter1" x="0" y="0">
<feGaussianBlur in="filt" stdDeviation="15" />
</filter>
</defs>
<rect width="110" height="110" stroke-width="2" fill="darkgreen" filter="url(#filter1)" />
Your browser does not support inline SVG.
</svg>
<svg height="130" width="130">
<defs>
<filter id="filter" x="0" y="0">
<feGaussianBlur stdDeviation="5" />
<feOffset dx="5" dy="5" />
</filter>
</defs>
<rect width="110" height="110" fill="lightgray" filter="url(#filter)" />
<rect width="100" height="100" fill="blue" stroke="green" stroke-width="4" />
Syour browser does not support inline SVG.
</svg>
</body>
</html> 
No comments:
Post a Comment