Summary -

In this topic, we described about the SVG Filters with detailed example.

<svg> with <filter> element is used to generate effects like confuse effect, highlight effect, drop shadow effect, morphed image, color matrix etc. We can use below filters within the <filter> element –

  • feDropShadow – Used to produce a drop shadow.
  • feMorphology – Used to produce a morphed image.
  • feColorMatrix – The color matrix supports to produce a color matrix on the SVG image.
  • feGaussianBlur – The Gaussian Blur can be used to haze the SVG image.

Example -

Below example describes about how to use filters on image.
<!DOCTYPE html>
<html> 
	<head>
		<title> SVG Filters</title>
	</head>
  	<body>
		<svg height="250" width="300" >
			<defs>
				<filter id="imgshadow">
					<feDropShadow in="SourceGraphic" stdDeviation="5,5">
					</feDropShadow>
				</filter>
			</defs>    
			<image xlink:href="pom-laptop.png" width="200" height="200" 
				filter="url(#imgshadow)"/>
		</svg>  
		<hr>
		<svg height="250" width="300" >
			<defs>
				<filter id="imgmarpho">
					<feMorphology operator="erode" radius="3 3" x="0%" 
						y="0%" in="SourceGraphic" result="morphology3">
					</feDropShadow>
				</filter>
			</defs>
			<image xlink:href="pom-laptop.png" width="220" height="220" 
				filter="url(#imgmarpho)"/>
		</svg>   
		<hr>
		<svg height="250" width="300" >
			<defs>
				<filter id="imgmtrix">
					<feColorMatrix type="saturate" values="5" x="0%" 
						y="0%" in="SourceGraphic" result="colormatrix3">
					</feDropShadow>
				</filter>
			</defs>
			<image xlink:href="pom-laptop.png" width="220" height="220" 
				filter="url(#imgmtrix)"/>
		</svg>
  	</body>
</html>

Output -