<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="linGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1"/>
</linearGradient>
<radialGradient id="radGrad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1"/>
</radialGradient>
<filter id="f1" filterUnits="objectBoundingBox" x="0" y="0" width="1" height="1" primitiveUnits="objectBoundingBox" filterRes="50 60">
    <feFlood flood-color="#000" x="5%" y="5%" width="5%" height="5%" result="flood1"/>
    <feFlood flood-color="#000" x="0%" y="0%" width="5%" height="5%" result="flood2"/>
    <feComposite in="flood1" in2="flood2" result="pair"/>
    <feTile in="pair" result="tile"/>
    <feDisplacementMap in="tile" in2="SourceGraphic" scale="64" xChannelSelector="R" yChannelSelector="G"/>
</filter>
<filter id="over" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%" filterRes="20 200">
    <feFlood flood-color="#f00" flood-opacity="0.5" result="res1" x="0%" y="0%" width="75%" height="75%"/>
    <feFlood flood-color="#00f" flood-opacity="0.5" result="res2" x="25%" y="25%" width="75%" height="75%"/>
    <feComposite in2="res1" in="res2" operator="over"/>
</filter>
<filter id="gauss" filterRes="20 42.1">
    <feGaussianBlur stdDeviation="10"/>
</filter>
<filter id="dilate2" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"  filterRes="50 49.999">
	<feMorphology operator="dilate" radius="3 1"/>
</filter>
</defs>

<image x="10" y="10" width="100" height="100" xlink:href="../W3C-SVG-1.1/resources/sphere.png" filter="url(#f1)"/>
<rect x="130" y="10" width="100" height="100" filter="url(#over)"/>
<g filter="url(#gauss)"  transform="translate(250, 10)">
    <rect x="0" y="0" width="75" height="75" fill="red"/>
    <rect x="25" y="25" width="75" height="75" fill="blue"/>
</g>
<g filter="url(#dilate2)"  transform="translate(370, 10)">
    <rect x="20" y="20" width="50" height="50" style="fill:none;stroke:red;"/>
    <rect x="35" y="35" width="50" height="50" style="fill:none;stroke:blue"/>
</g>
</svg>