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>
Parameters:
filterUnits: userSpaceOnUse x, y, width and height represent values in the
current user coordinate system for the referencing element
objectBoundingBox x, y, width and height represent fractions or percentages of
the bounding box on the referencing element.
primitiveUnits: userSpaceOnUse or objectBoundingBox for x, y, width and height within the filter primitives.
filterRes: indicates the width and height of
the intermediate images in pixels.
( see effect
of filterRes as SVG - Play with filtreRes and
clipPath )
Figure 1: Effect of filterRes on SVG picture
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 2: 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
