This Gist contains C# examples Aspose.SVG for .NET – SVG Filters and Gradients

README.md

Aspose.SVG for .NET – SVG Filters & Gradients Examples

This gist repository is a collection of C# code samples from the SVG Filters and SVG Gradients sections of the Aspose.SVG for .NET documentation. These practical snippets demonstrate how to apply visual effects based on SVG filters, color transforms, and gradient fills when creating SVG content programmatically.

Topics Covered

• Gaussian Blur and Drop Shadows – Apply soft blur and drop shadow effects with <feGaussianBlur>, <feDropShadow>, <feOffset>, <feBlend>, and more.
• Color Matrix and Channel Manipulation – Use <feComponentTransfer> and <feColorMatrix> to adjust RGBA channels or apply hue and saturation filters.
• Lighting Effects – Create specular lighting highlights with <feSpecularLighting> and point lights.
• SVG Gradients – Create linear and radial gradients with multiple color stops to create rich, scalable designs.
• API Fluent Builder – Streamline the creation of filters and gradients with the SVGSVGElementBuilder from SVG Builder API for fluent and expressive code.

How to Use These Examples

Each example serves as a standalone executable demonstration designed to help you quickly understand and implement SVG functionalities in your .NET applications.

1. Create a .NET C# project and install the Aspose.SVG for .NET library via NuGet.
2. Locate the example that matches your specific task.
3. Copy the C# code directly from the example. Adjust the file paths, input parameters, and output parameters as needed.
4. Run the code to experience the capabilities of SVG filters and gradients.

About Aspose.SVG for .NET

Aspose.SVG for .NET is a powerful API for working with SVG files in C# applications. It allows developers to create, load, edit, and convert SVG documents without using external software. With full support for filters, gradients, transformations, conversions, and DOM manipulation, the library simplifies the integration of complex vector graphics into .NET solutions. Aspose.SVG offers high-quality rendering, automates graphics processes, and provides seamless integration into modern development environments.

Prerequisites

• .NET Platforms: .NET Framework 4.6.1+, .NET Core 2.0+, or .NET 5+.
• Supported OS: Windows, Linux, macOS.
• Aspose.SVG for .NET installed via NuGet.

Additional Resources

• Official Documentation
• API Reference
• Product page – Aspose.SVG for .NET
• Blog – Aspose.SVG Product Family
• Temporary License

Aspose.SVG for .NET – SVG Filters and Gradients

Aspose.SVG for .NET – SVG Filters and Gradients

Example-AddDropShadowToText.cs

// Add a colored drop shadow effect to <text> in SVG programmatically
// Learn more: https://docs.aspose.com/svg/net/drop-shadow/

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

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svgElement = document.RootElement;

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

    // Create a <filter> element and add it to the defsElement
    SVGFilterElement 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
    SVGFEDropShadowElement 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
    SVGTextElement 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"));
}

Example-ApplyGaussianBlurToRect.cs

// Apply Gaussian blur filter to a <rect> element in SVG programmatically
// Learn more: https://docs.aspose.com/svg/net/gaussian-blur/

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

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svgElement = document.RootElement;

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

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

    // Create a <filter> element and add it to the <defs> element
    SVGFilterElement filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
    filterElement.SetAttribute("x", "-20px");
    filterElement.SetAttribute("y", "-20px");
    filterElement.SetAttribute("height", "100px");
    filterElement.SetAttribute("width", "100px");
    filterElement.Id = "GaussianBlur";
    defsElement.AppendChild(filterElement);

    // Create a feGaussianBlur element and add it to the <filter> element
    SVGFEGaussianBlurElement feGaussianBlurElement = (SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
    feGaussianBlurElement.In1.BaseVal = "SourceGraphic";
    feGaussianBlurElement.StdDeviationX.BaseVal = 10;
    feGaussianBlurElement.StdDeviationY.BaseVal = 10;
    filterElement.AppendChild(feGaussianBlurElement);

    // Save the document
    document.Save(Path.Combine(OutputDir, "gaussian-blur-rect.svg"));
}

Example-ApplyHueRotateFilterToImage.cs

// Apply Saturation effect to an <image> element in SVG using C#
// Learn more: https://docs.aspose.com/svg/net/color-filters/

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

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svgElement = document.RootElement;

    // Create an <image> element and add it to the svgElement
    SVGImageElement imageElement = (SVGImageElement)document.CreateElementNS(SvgNamespace, "image");
    imageElement.Href.BaseVal = "http://docs.aspose.com/svg/images/api/lighthouse.jpg";
    imageElement.Height.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
    imageElement.Width.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
    imageElement.Height.BaseVal.Value = 440;
    imageElement.Width.BaseVal.Value = 330;
    imageElement.X.BaseVal.Value = 20;
    imageElement.Y.BaseVal.Value = 20;
    imageElement.SetAttribute("filter", "url(#hueRotate)");
    svgElement.AppendChild(imageElement);

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

    // Creating a <filter> element and add it to the defsElement	
    SVGFilterElement filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
    filterElement.Id = "hueRotate";
    defsElement.AppendChild(filterElement);

    // Creating a <feColorMatrix> element and add it to the <filter> element
    SVGFEColorMatrixElement feColorMatrixElement = (SVGFEColorMatrixElement)document.CreateElementNS(SvgNamespace, "feColorMatrix");
    feColorMatrixElement.In1.BaseVal = "SourceGraphic";
    feColorMatrixElement.SetAttribute("type", "hueRotate");
    feColorMatrixElement.SetAttribute("values", "150");
    filterElement.AppendChild(feColorMatrixElement);

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

Example-ApplyRGBAFilterToImage.cs

// Apply RGBA component transfer filter to an <image> element in SVG programmatically
// Learn more: https://docs.aspose.com/svg/net/color-filters/

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

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svgElement = document.RootElement;

    // Create an <image> element and add it to the svgElement
    SVGImageElement imageElement = (SVGImageElement)document.CreateElementNS(SvgNamespace, "image");
    imageElement.Href.BaseVal = "http://docs.aspose.com/svg/images/api/seaside.jpg";
    imageElement.Height.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
    imageElement.Width.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
    imageElement.Height.BaseVal.Value = 640;
    imageElement.Width.BaseVal.Value = 480;
    imageElement.X.BaseVal.Value = 20;
    imageElement.Y.BaseVal.Value = 20;
    imageElement.SetAttribute("filter", "url(#rgba)");
    svgElement.AppendChild(imageElement);

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

    // Create a <filter> element and add it to the <defs> element
    SVGFilterElement filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
    filterElement.Id = "rgba";
    defsElement.AppendChild(filterElement);

    // Create a <feComponentTransfer> element and add it to the <filter> element
    SVGFEComponentTransferElement feComponentTransferElement = (SVGFEComponentTransferElement)document.CreateElementNS(SvgNamespace, "feComponentTransfer");
    filterElement.AppendChild(feComponentTransferElement);

    // Create a <feFuncR> element and add it to the <feComponentTransfer> element
    SVGFEFuncRElement feFuncRElement = (SVGFEFuncRElement)document.CreateElementNS(SvgNamespace, "feFuncR");
    feFuncRElement.SetAttribute("type", "linear");
    feFuncRElement.SetAttribute("slope", "1.1");
    feComponentTransferElement.AppendChild(feFuncRElement);

    // Creating a <feFuncG> element and add it to the <feComponentTransfer> element
    SVGFEFuncGElement feFuncGElement = (SVGFEFuncGElement)document.CreateElementNS(SvgNamespace, "feFuncG");
    feFuncGElement.SetAttribute("type", "linear");
    feFuncGElement.SetAttribute("slope", "1.5");
    feComponentTransferElement.AppendChild(feFuncGElement);

    // Create a <feFuncB> element and add it to the <feComponentTransfer> element
    SVGFEFuncBElement feFuncBElement = (SVGFEFuncBElement)document.CreateElementNS(SvgNamespace, "feFuncB");
    feFuncBElement.SetAttribute("type", "linear");
    feFuncBElement.SetAttribute("slope", "2.0");
    feComponentTransferElement.AppendChild(feFuncBElement);

   // Create a <feFuncA> element and add it to the <feComponentTransfer> element
   SVGFEFuncAElement feFuncAElement = (SVGFEFuncAElement)document.CreateElementNS(SvgNamespace, "feFuncA");
   feFuncAElement.SetAttribute("type", "identity");
   feComponentTransferElement.AppendChild(feFuncAElement);
  
    // Save the document
    document.Save(Path.Combine(OutputDir, "rgba.svg"));
}

Example-ApplySaturationFilterToImage.cs

// Apply saturation filter to an <image> element in SVG programmatically
// Learn more: https://docs.aspose.com/svg/net/color-filters/

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

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svgElement = document.RootElement;

    // Create an <image> element and add it to the <svg> element
    SVGImageElement imageElement = (SVGImageElement)document.CreateElementNS(SvgNamespace, "image");
    imageElement.Href.BaseVal = "http://docs.aspose.com/svg/images/api/lighthouse.jpg";
    imageElement.Height.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
    imageElement.Width.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
    imageElement.Height.BaseVal.Value = 440;
    imageElement.Width.BaseVal.Value = 330;
    imageElement.X.BaseVal.Value = 20;
    imageElement.Y.BaseVal.Value = 20;
    imageElement.SetAttribute("filter", "url(#saturation)");
    svgElement.AppendChild(imageElement);

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

    // Create a <filter> element and add it to the <defs> element	
    SVGFilterElement filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
    filterElement.Id = "saturation";
    defsElement.AppendChild(filterElement);

    // Create a <feColorMatrix> element and add it to the <filter> element
    SVGFEColorMatrixElement feColorMatrixElement = (SVGFEColorMatrixElement)document.CreateElementNS(SvgNamespace, "feColorMatrix");
    feColorMatrixElement.In1.BaseVal = "SourceGraphic";
    feColorMatrixElement.SetAttribute("type", "saturate");
    feColorMatrixElement.SetAttribute("values", "2");
    filterElement.AppendChild(feColorMatrixElement);

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

Example-BlurBackgroundImage.cs

// Blur background image using SVG filters in C#
// Learn more: https://docs.aspose.com/svg/net/gaussian-blur/

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

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svgElement = document.RootElement;

    // Create an <image> element and add to the svgElement
    SVGImageElement imageElement = (SVGImageElement)document.CreateElementNS(SvgNamespace, "image");
    imageElement.Href.BaseVal = "http://docs.aspose.com/svg/images/api/seaside.jpg";
    imageElement.Height.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
    imageElement.Width.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
    imageElement.Height.BaseVal.Value = 480;
    imageElement.Width.BaseVal.Value = 640;
    imageElement.X.BaseVal.Value = 20;
    imageElement.Y.BaseVal.Value = 20;
    imageElement.SetAttribute("filter", "url(#F1)");
    svgElement.AppendChild(imageElement);

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

    // Create a <filter> element and add it to the defsElement
    SVGFilterElement filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
    filterElement.Id = "F1";
    defsElement.AppendChild(filterElement);

    // Create a <feGaussianBlur> element and add it to the filterElement
    SVGFEGaussianBlurElement feGaussianBlurElement = (SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
    feGaussianBlurElement.In1.BaseVal = "SourceGraphic";
    feGaussianBlurElement.StdDeviationX.BaseVal = 5;
    feGaussianBlurElement.StdDeviationY.BaseVal = 5;
    filterElement.AppendChild(feGaussianBlurElement);

    // Save the document
    document.Save(Path.Combine(OutputDir, "blur-background-image.svg"));
}

Example-BlurBackgroundImageUsingSvgBuilderAPI.cs

// Blur background image using SVG Builder API in C#
// Learn more: https://docs.aspose.com/svg/net/gaussian-blur/

string svgContent = "<svg xmlns=\"http://www.w3.org/2000/svg\"></svg>";
using (SVGDocument document = new SVGDocument(svgContent, "."))
{
    // Create an instance of SVGSVGElementBuilder to facilitate the construction of the <svg> element and its child elements using a fluent builder pattern
    SVGSVGElement svg = new SVGSVGElementBuilder()
         .AddDefs(d => d
             .AddFilter(f => f.Id("gaussian-blur")
                .AddFeGaussianBlur(g => g
                .StdDeviation(5, 5)
                )
             )
         )
         .AddImage(i => i
            .X(20).Y(20).Height(480).Width(640)
            .Href("http://docs.aspose.com/svg/images/api/seaside.jpg")
            .Filter(fl => fl
                .FilterId("gaussian-blur")
            )
         )
         // 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, "gaussian-blur-builder.svg"));
}

Example-CreateLinearGradientSVG.cs

// Create an SVG linear gradient and apply it to a rectangle programmatically in C#
// Learn more: https://docs.aspose.com/svg/net/svg-gradients/

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

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svgElement = document.RootElement;

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

    // Create a <linearGradient> element and add it to the <defs> element
    SVGLinearGradientElement linearGradient = (SVGLinearGradientElement)document.CreateElementNS(SvgNamespace, "linearGradient");
    linearGradient.Id = "linear-gradient";
    linearGradient.X1.BaseVal.ValueAsString = "0%";
    linearGradient.Y1.BaseVal.ValueAsString = "0%";
    linearGradient.X2.BaseVal.ValueAsString = "100%";
    linearGradient.Y2.BaseVal.ValueAsString = "0%";
    defsElement.AppendChild(linearGradient);

    // Add color stops to the gradient
    SVGStopElement stop1 = (SVGStopElement)document.CreateElementNS(SvgNamespace, "stop");
    stop1.SetAttribute("offset", "10%");
    stop1.SetAttribute("stop-color", "#c71700");
    linearGradient.AppendChild(stop1);

    SVGStopElement stop2 = (SVGStopElement)document.CreateElementNS(SvgNamespace, "stop");
    stop2.SetAttribute("offset", "70%");
    stop2.SetAttribute("stop-color", "orange");
    linearGradient.AppendChild(stop2);

    SVGStopElement stop3 = (SVGStopElement)document.CreateElementNS(SvgNamespace, "stop");
    stop3.SetAttribute("offset", "100%");
    stop3.SetAttribute("stop-color", "#5a2100");
    linearGradient.AppendChild(stop3);

    // Create a rectangle and apply the linear gradient
    SVGRectElement rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect");
    rectElement.X.BaseVal.Value = 30;
    rectElement.Y.BaseVal.Value = 30;
    rectElement.Width.BaseVal.Value = 370;
    rectElement.Height.BaseVal.Value = 150;
    rectElement.SetAttribute("fill", "url(#linear-gradient)");

    // Append the rectangle to the SVG document
    svgElement.AppendChild(rectElement);

    // Save the document
    document.Save(Path.Combine(OutputDir, "linear-gradient.svg"));
}

Example-CreateSVGLinearGradientUsingBuilder.cs

// Create an SVG linear gradient and apply it to a rectangle using SVG Builder
// Learn more: https://docs.aspose.com/svg/net/svg-gradients/

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .Width(100, LengthType.Percentage).Height(100, LengthType.Percentage)
        .AddDefs(df => df
            .AddLinearGradient(p => p.Id("Grad1a")
                .X1(0).Y1(0).X2(1).Y2(0)
                .AddStop(s => s
                    .StopColor(Color.FromArgb(0xc7, 0x17, 0x00))
                    .Offset(0.1)
                )
                .AddStop(s => s
                    .StopColor(Color.Orange)
                    .Offset(0.7)
                )
                .AddStop(s => s
                    .StopColor(Color.FromArgb(0x5a, 0x21, 0x00))
                    .Offset(1)
                    )
                )
            )
        .AddRect(r => r.Rect(30, 30, 370, 150).Fill(pt => pt.PaintServerId("Grad1a")))
        .Build(document.FirstChild as SVGSVGElement);
    document.Save(Path.Combine(OutputDir, "linear-gradient-using-builder.svg"));
}

Example-DropShadowEffect.cs

// Apply drop shadow effect for an SVG rectangle using C#
// Learn more: https://docs.aspose.com/svg/net/drop-shadow/

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

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svgElement = document.RootElement;

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

    // Create a <filter> element and add it to the defsElement
    SVGFilterElement 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
    SVGFEOffsetElement 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
    SVGFEGaussianBlurElement 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
    SVGFEBlendElement 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
    SVGRectElement 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"));
}

Example-DropShadowEffectUsingSvgBuilder.cs

// Create an SVG <rect> with drop shadow using SVG Builder in C#
// Learn more: https://docs.aspose.com/svg/net/drop-shadow/

// Initialize an SVG document
using (SVGDocument 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
    SVGSVGElement 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);
    //.Build(document.FirstChild as SVGSVGElement);
    document.Save(Path.Combine(OutputDir, "drop-shadow-builder.svg"));
}

Example-LightingEffectRect.cs

// Create an SVG <rect> with specular lighting effect using filters in C#
// Learn more: https://docs.aspose.com/svg/net/svg-lighting-effects/

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

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svgElement = document.RootElement;

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

    // Create a <filter> element and add to the defsElement
    SVGFilterElement filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
    filterElement.Id = "light";
    defsElement.AppendChild(filterElement);

    // Create a <feGaussianBlur> element and add to the filterElement
    SVGFEGaussianBlurElement feGaussianBlurElement = (SVGFEGaussianBlurElement)document.CreateElementNS(SvgNamespace, "feGaussianBlur");
    feGaussianBlurElement.StdDeviationX.BaseVal = 5;
    feGaussianBlurElement.StdDeviationY.BaseVal = 5;
    feGaussianBlurElement.SetAttribute("in1", "SourceAlpha");
    feGaussianBlurElement.SetAttribute("result", "blur");
    filterElement.AppendChild(feGaussianBlurElement);

    // Create a feSpecularLighting filter primitive and add it to the filterElement
    SVGFESpecularLightingElement feSpecularLightingElement = (SVGFESpecularLightingElement)document.CreateElementNS(SvgNamespace, "feSpecularLighting");
    feSpecularLightingElement.In1.BaseVal = "blur";
    feSpecularLightingElement.SetAttribute("result", "light");
    feSpecularLightingElement.SetAttribute("specularExponent", "30");
    feSpecularLightingElement.SetAttribute("lighting-color", "#ddd");
    filterElement.AppendChild(feSpecularLightingElement);

    // Create a fePointLight filter primitive and add it to the feSpecularLighting element
    SVGFEPointLightElement fePointLightElement = (SVGFEPointLightElement)document.CreateElementNS(SvgNamespace, "fePointLight");
    fePointLightElement.SetAttribute("x", "70");
    fePointLightElement.SetAttribute("y", "70");
    fePointLightElement.SetAttribute("z", "150");
    feSpecularLightingElement.AppendChild(fePointLightElement);

    // Create a feComposite filter primitive and add it to the filterElement
    SVGFECompositeElement feCompositeElement = (SVGFECompositeElement)document.CreateElementNS(SvgNamespace, "feComposite");
    feCompositeElement.In1.BaseVal = "SourceGraphic";
    feCompositeElement.In2.BaseVal = "light";
    feCompositeElement.SetAttribute("operator", "arithmetic");
    feCompositeElement.SetAttribute("k1", "0");
    feCompositeElement.SetAttribute("k2", "1");
    feCompositeElement.SetAttribute("k3", "1");
    feCompositeElement.SetAttribute("k4", "0");
    filterElement.AppendChild(feCompositeElement);

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

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

Example-LuminanceToAlphaEffect.cs

// Apply luminanceToAlpha effect to an <image> element in SVG using C#
// Learn more: https://docs.aspose.com/svg/net/color-filters/

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

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svgElement = document.RootElement;

    // Create an <image> element and add it to the svgElement
    SVGImageElement imageElement = (SVGImageElement)document.CreateElementNS(SvgNamespace, "image");
    imageElement.Href.BaseVal = "http://docs.aspose.com/svg/images/api/lighthouse.jpg";
    imageElement.Height.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
    imageElement.Width.BaseVal.ConvertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PX);
    imageElement.Height.BaseVal.Value = 440;
    imageElement.Width.BaseVal.Value = 330;
    imageElement.X.BaseVal.Value = 20;
    imageElement.Y.BaseVal.Value = 20;
    imageElement.SetAttribute("filter", "url(#luminanceToAlpha)");
    svgElement.AppendChild(imageElement);

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

    // Creating a <filter> element and add it to the defsElement	
    SVGFilterElement filterElement = (SVGFilterElement)document.CreateElementNS(SvgNamespace, "filter");
    filterElement.Id = "luminanceToAlpha";
    defsElement.AppendChild(filterElement);

    // Creating a <feColorMatrix> element and add it to the <filter> element
    SVGFEColorMatrixElement feColorMatrixElement = (SVGFEColorMatrixElement)document.CreateElementNS(SvgNamespace, "feColorMatrix");
    feColorMatrixElement.In1.BaseVal = "SourceGraphic";
    feColorMatrixElement.SetAttribute("type", "luminanceToAlpha");
    //feColorMatrixElement.SetAttribute("values", "10");
    filterElement.AppendChild(feColorMatrixElement);

    // Save the document
    document.Save(Path.Combine(OutputDir, "luminanceToAlpha.svg"));
}

Example-RadialGradient.cs

// Create and apply a radial gradient to SVG shapes programmatically using Aspose.SVG
// Learn more: https://docs.aspose.com/svg/net/svg-gradients/

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

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svgElement = document.RootElement;

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

    // Create a <radialGradient> element and add it to the <defs> element
    SVGRadialGradientElement radialGradient = (SVGRadialGradientElement)document.CreateElementNS(SvgNamespace, "radialGradient");
    radialGradient.Id = "RadialGradient";
    radialGradient.R.BaseVal.ValueAsString = "0.7";
    defsElement.AppendChild(radialGradient);

    // Add color stops to the radial gradient
    SVGStopElement stop1 = (SVGStopElement)document.CreateElementNS(SvgNamespace, "stop");
    stop1.SetAttribute("offset", "0%");
    stop1.SetAttribute("stop-color", "silver");
    radialGradient.AppendChild(stop1);

    SVGStopElement stop2 = (SVGStopElement)document.CreateElementNS(SvgNamespace, "stop");
    stop2.SetAttribute("offset", "55%");
    stop2.SetAttribute("stop-color", "darkgreen");
    radialGradient.AppendChild(stop2);

    SVGStopElement stop3 = (SVGStopElement)document.CreateElementNS(SvgNamespace, "stop");
    stop3.SetAttribute("offset", "100%");
    stop3.SetAttribute("stop-color", "black");
    radialGradient.AppendChild(stop3);

    // Create a rectangle and apply the radial gradient
    SVGRectElement rectElement = (SVGRectElement)document.CreateElementNS(SvgNamespace, "rect");
    rectElement.X.BaseVal.Value = 50;
    rectElement.Y.BaseVal.Value = 50;
    rectElement.Width.BaseVal.Value = 200;
    rectElement.Height.BaseVal.Value = 150;
    rectElement.SetAttribute("fill", "url(#RadialGradient)");

    // Create a <circle> element and set its attributes
    SVGCircleElement circleElement = (SVGCircleElement)document.CreateElementNS(SvgNamespace, "circle");
    circleElement.Cx.BaseVal.Value = 520;
    circleElement.Cy.BaseVal.Value = 125;
    circleElement.R.BaseVal.Value = 90;
    circleElement.SetAttribute("fill", "url(#RadialGradient)");

    // Append the rectangle and circle to SVG
    svgElement.AppendChild(rectElement);
    svgElement.AppendChild(circleElement);

    // Save the document
    document.Save(Path.Combine(OutputDir, "radial-gradient.svg"));
}

Example-TextDropShadowEffectUsingSvgBuilder.cs

// Add a colored drop shadow effect to <text> in SVG using SVG Builder
// Learn more: https://docs.aspose.com/svg/net/drop-shadow/

// Initialize an SVG document
using (SVGDocument 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
    SVGSVGElement 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"));
}