If your filter create raster, to draw it you can write this :
<use filter="url(#MyFilter)" x='0' y='0'/>
If you will apply filter to external image, you can write
<defs> <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="400"> ........ </filter> </defs> <image filter="url(#MyFilter)" x="0" y="0" width='400' height='400' xlink:href='fondu1.jpg'/>
To apply filter to SVG objects, you can use g element
<defs> <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0"width="400" height="400"> ........ </filter> </defs> <g filter="url(#MyFilter)"> .... here your objects ...... </g>
Or with use element
<defs> <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="400"> ....... </filter> <image id="MyImage" width='400' height='400' xlink:href='puzzle.jpg'/> </defs> <use filter="url(#MyFilter)" xlink:href='#MyImage' x='0' y='0'/>
In this code use element call no image, you have to create raster for feColorMatrix. feImage primitive create raster from external graphic.
<defs> <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="400"> <feImage xlink:href='puzzle.jpg' result="Image"/> <feColorMatrix in="Image" 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> <use filter="url(#MyFilter)" x='0' y='0'/>
If you will use filter effect to fill a shape, you have to define pattern in <defs>:
<pattern id="motif" patternUnits="userSpaceOnUse" x="0" y="0" width="400" height="400"> <use filter="url(#MyFilter)"/> </pattern>
and use this pattern to fill or stroke object:
<circle cx='200' cy='200' r='200' style='stroke:black;fill:url(#motif)'/>
Figure 1: Stroke and fill with feTurbulence
FrontPage feColorMatrix feComponentTransfer feSpecularLightning feDiffuseLightning feSpotLight feDistantLight fePointLight feFlood feImage feTurbulence feTile feMerge feBlend feComposite feGaussianBlur feMorphology feConvolveMatrix feDisplacementMap feOffset
