SVG Lighting Effects – SVG Filters – C# Code

SVG Lighting Effects

Aspose.SVG for .NET allows you to create various lighting effects to enhance the visual appeal of graphics and illustrations. Lighting effects can add depth, realism, and a sense of lighting to flat images. The lighting effect is created in SVG using a set of filters. Consider some of them: <feSpecularLighting>, and <fePointLight>. You can combine several filters, create and control the details for a lighting effect.

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

Point Light Source – SVG Code

The <fePointLight> filter defines a light source that sets a point light effect. It can be used within the <feDiffuseLighting> or <feSpecularLighting> primitive as a child. Specific attributes x, y, and z indicate the position of the point light source. The <feSpecularLighting> filter lights an image using its alpha channel as a bump map. Consider an SVG example of a light effect:

<svg xmlns="http://www.w3.org/2000/svg">
	<rect x="40" y="40" width="150" height="150" fill="Teal" filter="url(#light)"/>
	<defs>
		<filter id="light">
			<feGaussianBlur in="SourceAlpha" stdDeviation="5" result="blur"/>
			<feSpecularLighting in="blur" result="light" specularExponent="30" lighting-color="#ddd">
				<fePointLight x="70" y="70" z="150"/>
			</feSpecularLighting>
			<feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
		</filter>
	</defs>
</svg>

In this example, four SVG filters are applied to create the light effect (figure b):

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 done with the <feSpecularLighting> and <fePointLighting> filter primitives. The <feSpecularLighting> uses buffer "blur" as a model of a surface elevation and generates a lighting effect from a point source that sets in the <fePointLighting> filter. The result is stored in buffer "light".
3. The <feComposite> filter takes two inputs in ="SourceGraphic" and in2 ="light" and combines them using the arithmetic composition operation. The output from the arithmetic operator for each result pixel is computed as k1·in1·in2 + k2·in1 + k3·in2 + k4

If we remove the Gaussian blur filter in the code for the “light” filter (figure b), we get the following “flat-light” filter, which gives a flatter light (figure c):

<filter id="flat-light">
    <feSpecularLighting  result="light" specularExponent="30" lighting-color="#ddd">
        <fePointLight x="70" y="70" z="150"/>
    </feSpecularLighting>
    <feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
</filter>

SVG Light Source – C# Code

The following C# code snippet shows how to create the same SVG lighting effect (“light” filter) as in the above SVG code. Let’s consider the C# code step by step:

1. Create an instance of the SVGDocument class.
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(namespaceURI, qualifiedName) 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 an id attribute, and add <filter> to the <defs> element:
   • Use the CreateElementNS() method to create an instance of the SVGFilterElement class.
   • Set a filterElement.Id for the <filter> element. Use the Id property of the SVGElement class.
   • Use the AppendChild() method to add the <filter> to the <defs> element.
5. Create a <feGaussianBlur> element and set in, result, and stdDeviation attributes. Then add it to the <filter> element.
   • Use the CreateElementNS() method to create an instance of the SVGFEGaussianBlurElement class.
   • Call the SetAttribute(name, value) method to set in1 and result attributes.
   • Use the StdDeviationX and StdDeviationY properties of the SVGFEGaussianBlurElement class to set the setDerivation attribute.
   • Use the AppendChild() method to add the <feGaussianBlur> to the <filter> element.
6. Create the <feSpecularLighting>, <fePointLight>, and <feComposite> elements in the same way. Specify their required attributes and add these elements in the correct order to the filter.
7. Create a <rect> element with attributes and add it to the <svg> element:
   • You can use the CreateElementNS() method to create an instance of the SVGRectElement class.
   • Set attributes specifying its position, size, and fill. Using a filter attribute referring to the url name of an id attribute in filterElement allows applying the SVG lighting effect to the rectangle.
   • To add the rectElement to svgElement, you can use the AppendChild() method.
8. Call the Save() method to save the resulting SVG image to a local file specified by path.

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

// Create an SVG <rect> with specular lighting effect using filters in C#

// 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"));
}

The resulting image, lighting-effect.svg, looks exactly like the figure b above.

See also

• 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.

• For more information about filter primitives, see the W3C Filter Effects Module page and the SVG Filters and Gradients article.