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="300" >

<defs>

<!-- Create a drop shadow effect for the text -->
<filter id="textEffect">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blurred"/>
<feOffset in="blurred" dx="5" dy="5" result="final_blur"/>
<feMerge>
<feMergeNode in="final_blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>

</defs>

<!-- Apply filter effects to the text -->
<g enable-background="new">
<text x="20" y="50" style="font-family:times;font-size:60;fill:red; filter:url(#textEffect)">Hello</text >
<text x="20" y="120" style="font-family:times;font-size:60;fill:blue; filter:url(#textEffect)">World !</text >
</g>

</svg>

First, we use the Gaussian Blur to blur the Alpha channel of the incoming graphic. The in attribute which is where we specify what goes into the filter primitive. The value of stdDeviation attribute is a numeric value that specifies how much to blur the graphic. The result attribute which is what we want to name the output (in case we need to pass it to another primitive). The in attribute has the keyword SourceAlpha which means only the alpha channel of the graphic is passed into the primitive.

Next, to create a drop shadow to the inputted image, we need to move the shadow down and to the left to give it that 3d-ish look. We can use the <feOffset> filter to move the inputted image to another position. The dx and dy attributes define the amount to offset the input graphic along the x and y axis.

To merge the blur graphic with the original source graphic, otherwise all it shows up is the blurred copy. We use the merge and mergenode elements to collapse the two graphics into a single image which becomes the final output image.