Drop Shadow Effect SVG C#

SVG images are web-friendly vector images that can be searched, indexed, compressed, and scripted. Whereas, shadows are a common design feature that is used to make images aesthetically appealing and prominent. Sometimes, you may need to add a drop shadow effect to an SVG image, like an icon, or text, etc. Accordingly, this article explains how to create a drop shadow effect on an SVG image programmatically in C#.

Drop Shadow Effect on SVG Image – C# API Free Download

Aspose.SVG for .NET supports working with SVG images as it offers a lot of features to edit, update, or convert Scalable Vector Graphics programmatically in C#. Simply access the reference DLL files from the New Releases page, or run the NuGet command below to configure it from the NuGet gallery, along with all dependencies, if any.

PM> Install-Package Aspose.SVG

How to Create Drop Shadow Effect on SVG Image in C#

The following steps outline the whole process of adding a drop shadow effect on an SVG image:

  1. Create an object of the SVGDocument class.
  2. Set SVG Namespace Url and get root SVG element.
  3. Create defs element and a filterElement to append feOffset filter primitive.
  4. Create a feBlend filter and a text element.
  5. Save the output SVG image with the Drop Shadow effect by calling the Save method.

Create Drop Shadow Effect on SVG Image Programmatically in C#

Please follow the steps below to create a drop shadow effect on SVG image programmatically in C#:

  1. Create an object of the SVGDocument class.
  2. Set SVG Namespace Url and get root SVG element.
  3. Create defs element and a filterElement to append feOffset filter primitive.
  4. Create a feBlend filter and a text element.
  5. Save the output SVG image with a Drop Shadow effect by calling the Save method.

The code snippet below shows how to create a drop shadow effect on an SVG image in C#:

Please note that a few lines of code are commented out in the above code snippet. You can choose to uncomment it to apply the Gaussian blur effect on the shadow if you prefer a blurred drop shadow effect which makes the output stand out with a smoother shadow.

Get Free Temporary License

You may request a free temporary license to test the API to its full capacity.

Conclusion

In this article, you have learned how to create a drop shadow effect on an SVG image programmatically in C#. You can process an existing SVG image by loading it or create a new SVG image from scratch depending on your requirements. Furthermore, you may visit the documentation section to learn many other features of the API. If you need to discuss any queries or concerns with us, please do not hesitate to reach out to us via forum.

See Also