Code Example

SVG Image

<?xml version="1.0" standalone="no"?>

Right-click on the image to open the SVG viewer pop-up menu.
Click 'view SVG' to display the image in a new, full window to zoom & pan the image.  (SVG Viewer Tips)

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="300" height="700" >

<defs>

<!-- Input File : the original duck graphic -->
<g id="DImage" style="fill:orange;stroke:none">
<rect x="5" y="5" width="90" height="90" />
</g>

<!-- GaussianBlur Effect -->
<filter id='BlurEffect'>
<feGaussianBlur in="SourceGraphic" stdDeviation="5 3"/>
</filter>

<!-- Turbulence & Composite Effect -->
<filter id="Turbulence">
<feTurbulence baseFrequency="0.03 0.02" numOctaves="3" type="turbulence" result="turbulenceOutput"/>
<feComposite in="turbulenceOutput" in2="SourceAlpha" operator="in"/>
</filter>

<!-- Linear Gradient -->
<linearGradient id="MyGradient" gradientUnits="userSpaceOnUse" x1="10" y1="0" x2="180" y2="0">
<stop offset="0" stop-color="blue" />
<stop offset=".5" stop-color="lightpink" />
<stop offset=".8" stop-color="purple" />
</linearGradient>

<!-- Blend effect -->
<filter id="Multiply">
<feBlend mode="multiply" in2="BackgroundImage" in="SourceGraphic"/>
</filter>

</defs>

<!-- Apply Filter effects to image -->
<g enable-background="new">
<use x="0" y="-30" xlink:href='#DImage'/>
<use x="0" y="130" filter='url(#BlurEffect)' xlink:href='#DImage'/>
<use x="0" y="290" filter='url(#Turbulence)' xlink:href='#DImage'/>
<rect x="0" y="450" width="100" height="100" fill="url(#MyGradient)" />
<use x="0" y="450" filter='url(#Multiply)' xlink:href='#DImage'/>
</g>

</svg>

Gaussian Blur filter - blurs the input image.

stdDeviation: The standard deviation is used to define the amount of the blur to be applied to elements. If two numbers are provided, the first number represents a standard deviation value along the x-axis and the second value represents a standard deviation along the y-axis. If one number is provided, then that value is used for both X and Y.

The in="SourceGraphic" part defines whether the effect is created from the whole image or an alternative would be to use SourceAlpha, which creates the effect from a single alpha channel of the image.

Turbulence & Composite filter - Two filter effects are applied in this example. The filter <feTurbulence> fills content with randomized patterns of dots or color (similar to Photoshop noise filters).The filter <feCompsite> blends content with another content. Note that the output of the turbulence filter (turbulenceOutput) is the input of the composite filter (in="turbulenceOutput") to create one more filter effect on the duck graphic.

Turbulence Attributes:

• baseFrequency: The base frequency controls the frequency of the noise function. If two numbers are provided, the first number represents a standard deviation value along the x-axis and the second value represents a standard deviation along the y-axis. If one number is provided, then that value is used for both X and Y.
• numOctaves: The numOctaves parameter for the noise function. An octave is an interval between 1-8. If the attribute is not specified, then a value of 1 is used.
• type: Indicates whether the filter primitive should perform a noise or turbulence function.

Composite Attributes:

• in2:Defines the second input image to the compositing operation. in2="SourceAlpha" defines a single channel for this filter.
• operator: Designates what type of composition should occur. Valid values are over, in, out, atop, xor, arithmetic.
  

Blend filter - <feBlend> performs pixel-wise combination of two input images. The blending modes are: normal, multiply, screen, darken, lighten. In our example, the pixels of a gradient box and a duck are multiplied.

The in2 attribute defines the second input image to the blending operation. The keyword BackgroundImage represents an image snapshot of the canvas under the filter region at the time that the <filter> element was invoked.