<!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>