<!DOCTYPE html> <html> <head> <title>SVG Filter</title> </head> <body> <h1>SVG Filter</h1> <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="filter"> <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> </filter> </defs> <image id="myImage1" href="image.jpg" x="10" y="10" height="100px" width="100px" filter="url(#filter)" /> </svg> <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="filter"> <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" /> </filter> </defs> <image id="myImage2" href="image.jpg" x="10" y="10" height="100px" width="100px" filter="url(#filter)" /> </svg> </body> </html>
The filter on the SVG has a duplicate id of filter causing the second svg to apply the filter from the first. To fix this, ensure that each relevant element has a unique id.
<!DOCTYPE html> <html> <head> <title>SVG Filter</title> </head> <body> <h1>SVG Filter</h1> <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="filter"> <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> </filter> </defs> <image id="myImage1" href="image.jpg" x="10" y="10" height="100px" width="100px" filter="url(#filter)" /> </svg> <svg xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="filter2"> <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" /> </filter> </defs> <image id="myImage2" href="image.jpg" x="10" y="10" height="100px" width="100px" filter="url(#filter2)" /> </svg> </body> </html>