SVG Filters Guide – Gaussian Blur, Shadows, Lighting Effects

SVG filters create visual effects such as blur, drop shadows, lighting, saturation changes, hue rotation, and channel adjustments directly in SVG markup. This tutorial explains how filters are defined in <defs>, how filter primitives work together, and how to apply a filter to shapes, text, or images.

Quick Answer: Define an SVG <filter> inside <defs>, add one or more filter primitives such as <feGaussianBlur>, <feOffset>, <feBlend>, <feSpecularLighting>, or <feColorMatrix>, and apply the filter with filter="url(#filter-id)" on the target element.

<svg width="220" height="140" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="soft-blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
  </defs>
  <circle cx="110" cy="70" r="45" fill="#20b2aa" filter="url(#soft-blur)" />
</svg>

In this article, you will learn how to:

• define an SVG filter and apply it with the filter attribute;
• combine filter primitives into blur, shadow, lighting, and color effects;
• control filter regions to prevent clipped output;
• choose between <feGaussianBlur>, <feColorMatrix>, and <feComponentTransfer>;
• troubleshoot common rendering problems in SVG filters.

What is an SVG Filter?

SVG filters add visual effects to bitmap or vector graphics before the final result is rendered. A filter can blur an element, create a shadow, change color channels, add lighting, distort pixels, or combine several intermediate results into one effect. Because the effect remains part of the SVG markup, it can scale with the vector graphic and stay editable.

A filter is defined with a <filter> element placed inside a <defs> block. The <filter> itself is never rendered; its children – filter primitives – perform the actual work. The <filter> element defines the coordinate system and the region where all filter primitives operate. It supports the following key attributes:

• x, y, width, height – define the rectangular region of the graphic to which the filter is applied
• filterUnits – specifies the coordinate system for the filter region (userSpaceOnUse or objectBoundingBox)
• primitiveUnits – defines the coordinate system used by filter primitives inside the filter
• Core and presentation attributes – common SVG attributes such as id, class, style, and presentation properties

SVG Filters and Filter Primitives

SVG filters are built by combining multiple filter primitives.

• Each filter primitive performs a single graphical operation and outputs one result. By chaining primitives, you can create complex effects – the output of one primitive can become the input of the next.
• Most filter primitives take one or two named inputs and produce one result. The main input is specified in the in attribute. The default is in="SourceGraphic". The output of the operation is named with the result attribute so another primitive can reuse it.
• Each filter primitive may also define its own processing region using x, y, width, and height, which is resolved relative to the <filter> region.

The table below provides an overview of common SVG filter elements, their purpose, and key attributes. Most rows are filter primitives; light source elements such as <fePointLight> are used inside lighting primitives.

Category	Filter element	Purpose	Key attributes
Gaussian Blur	<feGaussianBlur>	Blurs the input image using a Gaussian function	in, stdDeviation, result
Drop Shadow	<feOffset>	Offsets the alpha channel to create a shadow base	in, dx, dy, result
Drop Shadow	<feGaussianBlur>	Softens the offset shadow	in, stdDeviation, result
Drop Shadow	<feBlend>	Blends the shadow with the original graphic	in, in2, mode
Light Effects	<feGaussianBlur>	Smooths the alpha channel used as a bump map	in, stdDeviation, result
Light Effects	<feSpecularLighting>	Generates specular (shiny) lighting using a light source	in, surfaceScale, specularConstant, specularExponent, lighting-color, result
Light Effects	<feDiffuseLighting>	Generates diffuse lighting using a light source	in, surfaceScale, diffuseConstant, lighting-color, result
Light Effects	<fePointLight>	Defines a point light source for lighting primitives	x, y, z
Light Effects	<feComposite>	Combines lighting with the source graphic	in, in2, operator, k1, k2, k3, k4, result
Light Effects	<feMerge>	Merges multiple filter results into a single output	–
Color Filters	<feColorMatrix>	Applies matrix-based color transformations	in, type, values, result
Color Filters	<feComponentTransfer>	Applies per-channel color transfer functions	in, result

Each filter requires an input image or source graphic to process. Without input, the filter has nothing to render. The in and result attributes are important because they let one primitive pass its output to the next primitive in the chain.

How to Create SVG Filters

1. Add a <defs> block to hold filter definitions that should not render by themselves.
2. Create a <filter> element and give it a stable id.
3. Add one or more filter primitives, such as <feGaussianBlur>, <feOffset>, <feBlend>, or <feColorMatrix>.
4. Use in and result when a later primitive must consume the output of an earlier one.
5. Expand x, y, width, and height when blur, shadow, or lighting extends outside the original shape.
6. Apply the filter to the target shape, text, group, or image with filter="url(#id)".

Gaussian Blur

Gaussian blur softens an image or shape by spreading nearby pixels according to a Gaussian function. In SVG, it is commonly used for shadows, glow effects, soft focus, reduced detail, and directional blur.

The <feGaussianBlur> primitive creates the blur. The stdDeviation attribute controls the blur radius. A single value blurs equally in both directions. Two values create directional blur: the first value applies along the x-axis, and the second value applies along the y-axis.

The example below compares different stdDeviation values in one SVG file ( gaussian-blur.svg):

<svg height="400" width="600" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="f1" x="-20%" y="-20%" width="140%" height="140%">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
        </filter>
        <filter id="f2" x="-20%" y="-20%" width="140%" height="140%">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10, 0" />
        </filter>
        <filter id="f3" x="-20%" y="-20%" width="140%" height="140%">
            <feGaussianBlur in="SourceGraphic" stdDeviation="0,10" />
        </filter>
    </defs>
    <g stroke="none" fill="#20B2AA">
        <ellipse cx="60" cy="80" rx="55" ry="35" />
        <ellipse cx="200" cy="80" rx="55" ry="35" filter="url(#f1)" />
        <ellipse cx="340" cy="80" rx="55" ry="35" filter="url(#f2)" />
        <ellipse cx="500" cy="80" rx="55" ry="35" filter="url(#f3)" />
    </g>
</svg>

Blur usually expands the visible result beyond the original shape. If the filter region is too small, the blurred edges are clipped. The example expands the filter region with negative x and y values so the softened edges remain visible.

You can create a Gaussian Blur effect in C# using Aspose.SVG for .NET API. To learn more about the Aspose.Svg.Filters namespace and consider detailed C# examples of using the SVGFEGaussianBlurElement class to apply the Gaussian Blur effect to SVG elements and bitmaps, please see the Gaussian Blur article.

Drop Shadow Effect

A drop shadow separates a shape or text from the background. In SVG, a shadow is usually built from the source alpha channel, an offset, a blur, and a blend or merge step.

The <feOffset> filter primitive is used to offset a layer in SVG. In addition to the in and result attributes, this primitive accepts two main attributes – dx and dy, which define the distance the layer is offset along the x and y axes, respectively. The <feBlend> filter primitive blends two input layers; its mode attribute defines the blending mode.

The following SVG creates a soft drop shadow for an ellipse ( drop-shadow-effect.svg):

<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="shadow" x="-20%" y="-20%" width="150%" height="150%">
            <feOffset result="offset" in="SourceAlpha" dx="10" dy="10" />
            <feGaussianBlur result="blur" in="offset" stdDeviation="10" />
            <feBlend in="SourceGraphic" in2="blur" mode="normal" />
        </filter>
    </defs>
    <ellipse cx="95" cy="90" rx="75" ry="55" fill="#20B2AA" filter="url(#shadow)" />
</svg>

Step-by-step explanation

1. <feOffset> takes in="SourceAlpha", shifts the alpha mask 10 px right and 10 px down, and stores the intermediate result as "offset". Using SourceAlpha creates a shadow from the shape outline, not from the fill color.
2. <feGaussianBlur> takes in="offset", applies a blur of 10, and stores the result in a temporary buffer named "blur".
3. <feBlend> takes in="SourceGraphic" and in2="blur", then draws the original ellipse together with the blurred offset shadow.

You can create a drop shadow effect in C# using Aspose.SVG for .NET API. See the Drop Shadow Effect article to learn more about the Aspose.Svg.Filters namespace and consider detailed C# examples of applying the drop shadow effect to SVG shapes and text.

SVG Light Effects

SVG lighting effects are created inside one <filter> with lighting primitives such as <feDiffuseLighting> and <feSpecularLighting>, plus light source elements such as <fePointLight>. The lighting primitives use the source alpha channel as a surface map and calculate how light should appear on that surface.

The <fePointLight> element defines a point light source and is used as a child of <feDiffuseLighting> or <feSpecularLighting>. Its x, y, and z attributes set the light position. Diffuse lighting creates a matte illuminated surface, while specular lighting creates a shinier highlight.

Consider an example of a light effect ( light-effect.svg):

<svg height="300" width="300" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id = "F1">
            <feGaussianBlur in = "SourceAlpha" stdDeviation = "4" result = "blur" />
            <feSpecularLighting result = "light" in = "blur" specularExponent = "25" lighting-color = "#bbbbbb">
                <fePointLight x = "80" y = "60" z = "200" />
            </feSpecularLighting>
            <feComposite in = "SourceGraphic" in2 = "light" operator = "arithmetic" k1 ="0" k2 ="1" k3 ="1" k4 ="0" />
        </filter>
    </defs>
    <g  fill = "INDIANRED" filter = "url(#F1)">
        <circle cx="100" cy="100" r="60" />
        <circle cx="100" cy="230" r="60" />
        <circle cx="230" cy="100" r="60" />
        <circle cx="230" cy="230" r="60" />
    </g>
</svg>

Step-by-step explanation

In this example, the light effect is created by a chain of SVG elements inside one <filter>: three elements are filter primitives, and <fePointLight> defines the light source:

1. <feGaussianBlur> takes input SourceAlpha, which is the alpha channel of the source image. The result is stored in a temporary buffer named "blur".
2. Lighting is created with <feSpecularLighting> and its child <fePointLight>. <feSpecularLighting> uses the "blur" buffer as a surface elevation map and stores the highlight in "light".
3. <feComposite> takes in="SourceGraphic" and in2="light", then combines them with the arithmetic compositing operation. For each pixel, the arithmetic operator computes: result = k1·in1·in2 + k2·in1 + k3·in2 + k4.

The code below demonstrates one more example of chaining filter primitives and a light source inside one <filter> ( button.svg):

<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="myF" x="-20%" y="-20%" width="160%" height="160%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur" />
            <feOffset in="blur" dx="5" dy="5" result="offsetBlur" />
            <feSpecularLighting in="offsetBlur" surfaceScale="8" specularConstant="0.7" specularExponent="2" lighting-color="#bbbbbb" result="specOut">
                <fePointLight x="-100" y="-100" z="100" />
            </feSpecularLighting>
            <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut" />
            <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="1.5" k2="0.5" k3="1" k4="0" result="litPaint" />
            <feMerge>
                <feMergeNode in="offsetBlur" />
                <feMergeNode in="litPaint" />
            </feMerge>
        </filter>
    </defs>
    <ellipse cx="85" cy="70" rx="65" ry="45" fill="#20B2AA" filter="url(#myF)" />
    <g fill="#696969" font-size="25" font-family="arial">
        <text x="55" y="80">PUSH</text>
    </g>
</svg>

In SVG Lighting Effects, you learn how to combine filter primitives and light sources to create and control SVG lighting effects in C# using the Aspose.SVG for .NET API.

Color Filters

In SVG, you can create a wide variety of color effects that are supported in almost all modern browsers. When it comes to color handling, <feColorMatrix> is often the best option. It is a filter primitive that uses a matrix to affect the color values for each RGBA channel. The <feComponentTransfer> element is another powerful SVG filter primitive. It gives control over the individual RGBA channels of the image, allowing you to create Photoshop-like SVG effects; for example, it can be used to posterize images.

This section focuses on two practical color primitives: <feColorMatrix> for matrix-based transformations and <feComponentTransfer> for per-channel edits.

feColorMatrix Saturation Example

The <feColorMatrix> filter primitive applies a matrix transformation to the RGBA channels of each pixel in the input image. As a result, a new set of color and alpha values is produced. The type attribute can be:

• matrix – custom 5×4 matrix
• saturate – adjusts saturation
• hueRotate – rotates hue around the color wheel
• luminanceToAlpha – converts luminance to alpha

Let’s see examples of the saturate operation use ( saturation.svg):

<svg width="640" height="480" viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="myFilter">
            <feColorMatrix in="SourceGraphic" type="saturate" values="0"></feColorMatrix>
        </filter>
    </defs>
    <image filter="url(#myFilter)" href="https://docs.aspose.com/svg/images/drawing/park.jpg" width="100%" height="100%" />
</svg>

feColorMatrix Hue Rotation Example

A specific color-matrix operation is hue rotation around the color wheel. The following example illustrates the hueRotate operation.

<svg width="640" height="480" viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="hueR">
            <feColorMatrix in="SourceGraphic" type="hueRotate" values="40"></feColorMatrix>
        </filter>
    </defs>
    <image filter="url(#hueR)" href="https://docs.aspose.com/svg/images/drawing/park.jpg" width="100%" height="100%" />
</svg>

The figure below contains a series of images that illustrate the different hueRotate values.

feComponentTransfer Channel Manipulation Example

The <feComponentTransfer> primitive performs per-channel operations on RGBA values. It is useful for brightness adjustment, contrast changes, channel balancing, and posterized color effects.

The example below changes the red, green, and blue channels independently:

<svg width="640" height="480" viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="RGBA">
            <feComponentTransfer>
                <feFuncR type="linear" slope="2.0" />
                <feFuncG type="linear" slope="1.7" />
                <feFuncB type="linear" slope="0.1" />
                <feFuncA type="identity" />
            </feComponentTransfer>
        </filter>
    </defs>
    <image filter="url(#RGBA)" href="https://docs.aspose.com/svg/images/drawing/park.jpg" width="100%" height="100%" />
</svg>

The <feComponentTransfer> element modifies color channels through child transfer function elements: <feFuncR>, <feFuncG>, <feFuncB>, and <feFuncA>. Each child element controls the red, green, blue, or alpha channel. The type attribute selects the transfer function used for that channel. SVG supports five function types: identity, table, discrete, linear, and gamma.

Read the Color Filters article if you want to create color filters in C#. You will learn about the feColorMatrix and feComponentTransfer filter primitives and look at C# code snippets that show how to use them.

Common Mistakes and Fixes

Problem	Cause	Solution
Filter output is clipped	The filter region (x, y, width, height) is too small	Expand the filter region using negative x and y values and larger width and height
Drop shadow is not visible	The shadow uses SourceGraphic instead of SourceAlpha or is blended incorrectly	Use SourceAlpha as input for <feOffset> and blend it with the original graphic
Lighting effect looks flat or invisible	The alpha channel is not prepared as a bump map or lighting values are too low	Blur SourceAlpha before lighting and adjust lighting parameters
Colors change unexpectedly	Incorrect color matrix or transfer values are applied	Apply color filters directly to SourceGraphic and verify values step by step

Quick Recipes

Create a simple Gaussian blur

<filter id="blur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="6" />
</filter>

Apply directional blur (horizontal or vertical)

<filter id="directionalBlur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="8 0" />
</filter>

Add a soft drop shadow

<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
    <feOffset in="SourceAlpha" dx="6" dy="6" result="offset" />
    <feGaussianBlur in="offset" stdDeviation="6" result="blur" />
    <feBlend in="SourceGraphic" in2="blur" mode="normal" />
</filter>

Clip a blurred shadow to the original shape

<filter id="clippedShadow">
    <feOffset in="SourceAlpha" dx="4" dy="4" result="offset" />
    <feGaussianBlur in="offset" stdDeviation="4" result="blur" />
    <feComposite in="blur" in2="SourceAlpha" operator="in" result="shadow" />
    <feComposite in="SourceGraphic" in2="shadow" operator="over" />
</filter>

Convert an image to grayscale

<filter id="grayscale">
    <feColorMatrix type="saturate" values="0" />
</filter>

Adjust brightness and contrast

<filter id="brightnessContrast">
    <feComponentTransfer>
        <feFuncR type="linear" slope="1.2" intercept="0.1" />
        <feFuncG type="linear" slope="1.2" intercept="0.1" />
        <feFuncB type="linear" slope="1.2" intercept="0.1" />
    </feComponentTransfer>
</filter>

Combine multiple filter results

<filter id="combined">
    <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" />
    <feOffset in="blur" dx="4" dy="4" result="offset" />
    <feMerge>
        <feMergeNode in="offset" />
        <feMergeNode in="SourceGraphic" />
    </feMerge>
</filter>

FAQ – SVG Filters

How do I apply an SVG filter to an element?

Define the filter in <defs> and apply it with filter="url(#filter-id)" on a shape, text element, group, or image. The id in the filter definition must match the value used in the filter attribute.

Why is my SVG blur or shadow clipped?

Blur and shadow effects often extend outside the original object bounds. Expand the filter region with x, y, width, and height so the generated pixels have enough space to render.

What is the difference between feColorMatrix and feComponentTransfer?

Use <feColorMatrix> when one matrix operation should transform color values, such as grayscale, saturation, or hue rotation. Use <feComponentTransfer> when you need separate control over red, green, blue, or alpha channels.

Can I create SVG filters with Aspose.SVG for .NET?

Yes. The SVG Filters in C# article shows how to create SVG filters programmatically with Aspose.SVG for .NET.

Related Resources

• Filter Effects Module Level 1 is the W3C specification for SVG and CSS filter effects.
• SVG Filters in C# explains how to create SVG filters, Gaussian blur, shadows, lighting, and color effects with Aspose.SVG for .NET.
• Work with SVG Filters in Python shows how to create, apply, and edit SVG filter effects with Aspose.SVG for Python via .NET.
• Gaussian Blur gives a focused C# workflow for the <feGaussianBlur> primitive.
• Drop Shadow Effect shows how to build shadow effects for SVG shapes and text.
• Color Filters covers <feColorMatrix> and <feComponentTransfer> in C# examples.
• SVG Gradients explains gradient fills, which often combine well with filtered shapes.
• SVG Color explains color values, fill, stroke, opacity, and color formats used by SVG artwork.