To declare filter in SVG file

You use filter tag, precise units, give id and define filter effects region

<defs>
	<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="400">
		.........
	</filter>
</defs>

In filter tag, you put filter primitive to use as child of filter element
You can redefine filter primitive effects region, give name to result of primitive, use as source ( in and in2 attributs ) result of other primitive, raster drawed before call filter primitive or SourceGraphic, SourceAlpha, BackgroundImage, BackgroundAlpha, FillPaint, StrokePaint ( see signification for SVG picture - JPEG or PNG picture )


Figure 1: SourceGraphic and SourceAlpha for SVG and bitmap pictures

Some primitives don't need raster as input ( feTurbulence, feFlood .. )
For others, if no value is provided for in attribut:
- if it's first primitive in filter, this filter primitive will use SourceGraphic as its input.
- if it's a subsequent filter primitive, then this filter primitive will use the result from the previous filter primitive as its input. 

By example:

<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="400">
	<feImage xlink:href='puzzle.jpg' result='image'/>
	<feSpecularLighting lighting-color='white' result='spot' specularConstant ='1' specularExponent='16'> 
		<feSpotLight x='200' y='200' z='200' pointsAtX='200' pointsAtY='100' pointsAtZ='0' specularExponent='16' limitingConeAngle='45'/>
	</feSpecularLighting>
	<feComposite in='image' in2='spot' operator="arithmetic" k1="0.5" k2="1" k3="1" k4="0"/>
</filter>

In this example, we have:
feImage primitive refers to a graphic external, which is loaded or rendered into an RGBA raster and becomes the result of the filter primitive with name "image"
feSpecularLightning primitive using feSpotLight to define light source create RGBA raster with name "spot"
feComposite perform the composition of the two input images ( "image" and "spot" )

Other example:

<defs>
   <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="400">
	<feColorMatrix 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 filter="url(#MyFilter)" x="0" y="0" width='400' height='400' xlink:href='puzzle.jpg'/>

Filter is call in image element, feColorMatrix use SourceGraphic as input and apply to JPEG picture.

 


FrontPage  feColorMatrix  feComponentTransfer  feSpecularLightning feDiffuseLightning  feSpotLight  feDistantLight  fePointLight  feFlood  feImage   feTurbulence   feTile  feMerge  feBlend  feComposite feGaussianBlur  feMorphology  feConvolveMatrix  feDisplacementMap  feOffset


Valid XHTML 1.0!