Drop Shadow – SVG Filters – C# Code

SVG Filters

Aspose.SVG for .NET lets you open, create, or edit an SVG document and make changes to its content. You can apply many available SVG filters for SVG elements or bitmaps to get the desired result. The Aspose.Svg.Filters namespace contains classes and interfaces related to filter effects in SVG specification. To create a drop shadow effect, you can use a few filter primitives:

• the SVGFEDropShadowElement class to create a <feDropShadow> element to implement the drop shadow effect;
• the SVGFEOffsetElement class to create a <feOffset> element to offset a layer in SVG;
• the SVGFEGaussianBlurElement class corresponds to a <feGaussianBlur> element to implement the Gaussian Blur effect;
• the SVGFEBlendElement to create a <feBlend> element to blend two or more objects.

In this article, you will learn how to write SVG code to create a drop shadow filter and consider detailed C# examples of using the Aspose.Svg.Filters namespace to apply the drop shadow effect to SVG elements or bitmaps.

Drop Shadow – SVG Code

The shadow effect in SVG is a common visual effect used to create the illusion of a shadow behind an SVG element. It provides depth and realism to SVG content by making it look like the element is floating above the background. Also, a drop shadow effect can be used to make an image stand out. There are several ways to implement the shadow effect in SVG. Let’s look at two of them.

Note: In SVG, filter defines by <filter> element, which sets within a <defs> element. It is never rendered itself and is conceptually described as the element that includes its children – filter primitives. The <filter> element has a set of attributes. Required attributes for filter primitive are x, y, width, height, and id. They set the area of the picture to which the filter will be applied. And the attribute id gives a unique identifier to an SVG element and identifies an element within an SVG document.

feOffset + feGaussianBlur + feBlend filter primitives

In our opinion, the most effective is to use three filters to achieve the shadow effect. This will allow you to fine-tune the effect even though it requires more code:

<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="shadow" x="-20" y="-20" height="150" width="150" >
            <feOffset result="offset" in="SourceAlpha" dx="10" dy="10" />
            <feGaussianBlur result="blur" in="offset" stdDeviation="3" />
            <feBlend in="SourceGraphic" in2="blur" mode="normal" />
        </filter>
    </defs>
    <rect x="40" y="40" width="100" height="100" fill="orange" filter="url(#shadow)" />
</svg>

Three filters are used to create a drop shadow effect (figure c):

1. The <feOffset> filter primitive is used to offset a layer in SVG. It takes in="SourceAlpha", and shifts the result 10 px to the right and 10px to the bottom, and stores the result in the buffer as "offset". Note that the alpha channel of the shape is used as input. The value SourceAlpha leads to a black-color result (figure a).
2. <feGaussianBlur> takes in="offset", applies a blur of stdDeviation="3", and stores the result in a temporary buffer named "blur".
3. The <feBlend> filter blends two objects; it takes two inputs in="SourceGraphic" and in2="blur" then blends the SourceGraphic on top of the offset black blurred image (figure b). Its mode attribute specifies the blending mode.

The following Figure illustrates step-by-step the drop shadow creation:

feDropShadow filter primitive

In SVG, the shadow effect can be achieved using the feDropShadow filter primitive on the <filter> element. The <feDropShadow> element has the attributes needed to create the drop shadow, such as dx, dy, and stdDeviation, plus it allows you to add color and transparency to the drop shadow! This is achieved using attributes flood-color and flood-opacity. Let’s see how to create a shadow effect using the feDropShadow filter primitive:

<svg height="200" width="200" xmlns="http://www.w3.org/2000/svg">
	<defs>
        <filter id="shadow-red" x="-20" y="-20" height="100" width="100" >
			<feDropShadow dx="10" dy="10" stdDeviation="3"  flood-color="CornflowerBlue" />
		</filter>
	</defs>
    <rect x="40" y="40" width="100" height="100" fill="orange" filter="url(#shadow-red)" />
</svg>

Note: if the flood-color attribute is not specified or specified incorrectly, then the default shadow will be black.

Drop Shadow – C# Code

Here we will write the С# code to create a drop shadow effect for an orange rectangle using three filter primitives.

The following code snippet shows how to create a drop shadow effect using the Aspose.SVG for .NET API.

1. Use the SVGDocument() constructor to create an empty SVG document.
2. The RootElement property of the SVGDocument class points to the document’s root <svg> element.
3. Create a <defs> element and add it to the <svg> element:
   • Use the CreateElementNS() method to create an instance of the SVGDefsElement class.
   • Use the AppendChild() method to add the <defs> element to the <svg> element.
4. Create a <filter> element, set attributes, and add it to the <defs> element:
   • Use the CreateElementNS() method of the SVGDocument class to create an instance of the SVGFilterElement class.
   • Call the SetAttribute(name, value) method to set x, y, height, and width attributes.
   • Don’t forget to set the id attribute.
   • Use the AppendChild() method to add the <filter> to the <defs> element.
5. Create a <feOffset> element, set attributes, and add it to the <filter> element:
   • Use the CreateElementNS() method of the SVGDocument class to create an instance of the SVGFEOffsetElement class.
   • Call the SetAttribute() method to set dx, dy, and result attributes.
   • Don’t forget to set in1 attribute. Use the property of the SVGAnimatedLength type, the static data for which can be set or read through the construction feOffsetElement.In1.BaseVal = "SourceAlpha".
   • Use the AppendChild() method to add the <feOffset> to the <filter> element.
6. In a similar way create, set attributes, and add to the <filter> element such elements as <feGaussianBlur> and <feBlend>.
7. Create a rectangle <rect> element that will be an SVG shape with a drop shadow effect. It is given a fill color (#ffa500 – orange), and the filter attribute is set to "url(#shadow)," referencing the previously defined filter with the Id = "shadow".
8. Call the Save() method to save the document with the drop shadow filter to a local file specified by path.

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Filters;
...
    // Set SVG Namespace Url
    string SvgNamespace = "http://www.w3.org/2000/svg";

    using (var document = new SVGDocument())
    {
        var svgElement = document.RootElement;

        // Create a <defs> element and add to the svgElement
        var defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
        svgElement.AppendChild(defsElement);

        // Creating a <filter> element and add to the defsElement
        var filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
        filterElement.Id = "shadow";
        filterElement.SetAttribute("x", "-20px");
        filterElement.SetAttribute("y", "-20px");
        filterElement.SetAttribute("height", "150px");
        filterElement.SetAttribute("width", "150px");
        defsElement.AppendChild(filterElement);

        // Create a <feOffset> filter primitive and add it to the filterElement
        var feOffsetElement = (SVGFEOffsetElement)document.CreateElementNS(SvgNamespace, "feOffset");
        feOffsetElement.In1.BaseVal = "SourceAlpha";
        feOffsetElement.SetAttribute("result", "offset");
        feOffsetElement.SetAttribute("dx", "10");
        feOffsetElement.SetAttribute("dy", "10");
        filterElement.AppendChild(feOffsetElement);

        // Create a <feGaussianBlur> filter primitive and add it to the filterElement
        var feGaussianBlurElement = (SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
        feGaussianBlurElement.In1.BaseVal = "offset";
        feGaussianBlurElement.StdDeviationX.BaseVal = 3;
        feGaussianBlurElement.StdDeviationY.BaseVal = 3;
        feGaussianBlurElement.SetAttribute("result", "blur");
        filterElement.AppendChild(feGaussianBlurElement);

        // Create a <feBlend> filter primitive and add it to the filterElement
        var feBlendElement = (SVGFEBlendElement)document.CreateElementNS(SvgNamespace, "feBlend");
        feBlendElement.In1.BaseVal = "SourceGraphic";
        feBlendElement.In2.BaseVal = "blur";
        feBlendElement.SetAttribute("mode", "normal");
        filterElement.AppendChild(feBlendElement);

        // Create a <rect> element and set the "fill" and "filter" attributes
        var rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect");
        rectElement.X.BaseVal.Value = 40;
        rectElement.Y.BaseVal.Value = 40;
        rectElement.Width.BaseVal.Value = 100;
        rectElement.Height.BaseVal.Value = 100;
        rectElement.SetAttribute("fill", "#ffa500");
        rectElement.SetAttribute("filter", "url(#shadow)");
        svgElement.InsertBefore(rectElement, svgElement.FirstChild);

        // Save the document
        document.Save(Path.Combine(OutputDir, "drop-shadow-effect.svg"));
    }

When you run this C# code, it will generate an SVG file with a drop shadow effect for an orange rectangle. The shadow will be black-colored, offset by 10 units horizontally and 10 units vertically from the source rectangle. The resulting drop-shadow-effect.svg file looks like figure c – an orange rectangle with a black shadow.

Drop Shadow Effect Using SVG Builder API

Aspose.SVG Builder API is designed for streamlined creation and updating of SVG elements in C#. Let’s look at a С# example for implementing drop shadow effect (exactly the same example as in the previous paragraph) using SVG Builder API. This code showcases the use of a fluent builder pattern to create concise and readable SVG documents, leveraging the capabilities of Aspose.SVG library:

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;
...

    using (var document = new SVGDocument())
    {
        // Create an instance of SVGSVGElementBuilder to facilitate the construction of the <svg> element and its child elements using a fluent builder pattern
        var svg = new SVGSVGElementBuilder()
            .Width(400).Height(400)
            .AddDefs(d => d
                .AddFilter(f => f.Id("shadow").Width(150).Height(150)
                    .AddFeDropShadow(sh => sh
                        .Dx(10).Dy(10)
                        .StdDeviation(3)
                    )
                )
            )
            .AddRect(r => r
                .Rect(40, 40, 100, 100)
                .Filter(f => f.FilterId("shadow"))
                .Style(s => s.Fill(Color.Orange))
            )
            //Call the Build() method on the SVGSVGElementBuilder to construct the <svg> element with its child elements
            .Build(document.FirstChild as SVGSVGElement);
        document.Save(Path.Combine(OutputDir, "drop-shadow-builder.svg"));
    }

The fluent builder pattern allows you to create SVG elements and apply filters in a more concise and readable way. Each method call, such as .AddFilter() or .AddRect(), clearly states its purpose, allowing you to understand the structure of the SVG document at a glance. This example demonstrates a more expressive approach to creating SVG documents using SVG Builder, providing improved readability, maintainability, and flexibility compared to the manual approach of creating elements shown in the previous example. As a result of the code running, we get the same orange rectangle with a black shadow:

Text Drop Shadow

This C# example creates an SVG file similar to the one we saw earlier in the feDropShadow filter primitive section. Only here, we use the feDropShadow filter primitive to create a colored shadow for an SVG text, not for the orange rectangle.

The following code snippet shows how to create a text drop shadow using the Aspose.SVG for .NET API:

using Aspose.Svg;
using System.IO;
using Aspose.Svg.Filters;
...

    // Set SVG Namespace Url
    string SvgNamespace = "http://www.w3.org/2000/svg";

    using (var document = new SVGDocument())
    {
        var svgElement = document.RootElement;

        // Create a <defs> element and add to the svgElement
        var defsElement = (SVGDefsElement)document.CreateElementNS(SvgNamespace, "defs");
        svgElement.AppendChild(defsElement);

        // Creating a <filter> element and add to the defsElement
        var filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
        filterElement.Id = "text-shadow";
        filterElement.SetAttribute("x", "-20px");
        filterElement.SetAttribute("y", "-20px");
        filterElement.SetAttribute("height", "150px");
        filterElement.SetAttribute("width", "150px");
        defsElement.AppendChild(filterElement);

        // Create a <feDropShadow> filter primitive and add it to the filterElement
        var feDropShadowElement = (SVGFEDropShadowElement)document.CreateElementNS(SvgNamespace, "feDropShadow");
        feDropShadowElement.StdDeviationX.BaseVal = 3;
        feDropShadowElement.StdDeviationY.BaseVal = 3;
        feDropShadowElement.SetAttribute("dx", "3");
        feDropShadowElement.SetAttribute("dy", "3");
        feDropShadowElement.SetAttribute("flood-color", "LightCoral");
        filterElement.AppendChild(feDropShadowElement);

        // Create a <text> element and add it to the svgElement
        var textElement = (SVGTextElement)document.CreateElementNS(SvgNamespace, "text");
        textElement.Style.FontSize = "4em";
        textElement.SetAttribute("x", "20px");
        textElement.SetAttribute("fill", "CornflowerBlue");
        textElement.SetAttribute("y", "100px");
        textElement.TextContent = "Drop Shadow Effect";
        textElement.SetAttribute("filter", "url(#text-shadow)");
        svgElement.InsertBefore(textElement, svgElement.FirstChild);

        // Save the document
        document.Save(Path.Combine(OutputDir, "text-drop-shadow.svg"));
    }

Text Drop Shadow – Using SVG Builder

Exactly the same example for text with a colored shadow, but we implement it using Aspose.SVG Builder:

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;
...

    using (var document = new SVGDocument())
    {
        // Create an instance of SVGSVGElementBuilder to facilitate the construction of the <svg> element and its child elements using a fluent builder pattern
        var svg = new SVGSVGElementBuilder()
            .AddDefs(d => d
                .AddFilter(f => f.Id("shadow").Width(150).Height(150)
                    .AddFeDropShadow(sh => sh
                        .Dx(3).Dy(3)
                        .StdDeviation(3)
                        .FloodColor(Color.LightCoral)
                    )
                )
            )
            .AddText(t => t.X(20).Y(100).Fill(Color.CornflowerBlue).FontSize(48, LengthType.Pt)
                .Filter(f => f.FilterId("shadow"))
                .AddContent("Drop Shadow Effect")
            )
            
            // Call the Build() method on the SVGSVGElementBuilder to construct the <svg> element with its child elements
            .Build(document.FirstChild as SVGSVGElement);
        document.Save(Path.Combine(OutputDir, "text-drop-shadow-builder.svg"));
    }

The resulting text-drop-shadow.svg and text-drop-shadow-builder.svg images look like this:

The text has a drop shadow with a LightCoral fill color and a blur radius of 3 units. The shadow will be offset by 3 units horizontally and 3 units vertically from the text, creating a visually appealing drop shadow effect.

See also

• More information about filter primitives, see the W3C Filter Effects Module.
• If you’re wondering how to write SVG code to create SVG filters, Gaussian blur, shadow effects, lighting effects, or linear gradient and radial gradient, please visit the SVG Filters and Gradients article.
• You can download the complete examples and data files from GitHub.
• About downloading from GitHub and running examples, you find out from the How to Run the Examples section.