Fill and Stroke in SVG using C# | SVG Fill and SVG Stroke in C#

Fill-Stroke-in-SVG-CSharp.md

Learn how to work with fill and stroke in SVG using C# : https://blog.aspose.com/2022/08/12/fill-and-stroke-in-svg-using-csharp/

The following topics are covered in this article:

1. C# API to Fill and Stroke in SVG
2. What is SVG Fill?
3. What is SVG Stroke?
4. Fills and Strokes in SVG
5. Fill and Stroke Circle in SVG
6. Fill and Stroke Path in SVG
7. Apply Fill and Stroke using Style

Fill-Stroke-in-SVG-CSharp_Circle.cs

// This code example demonstrates how to set fill and stroke attributes for a circle element of SVG in C#.
// Load an existing SVG image
var document = new SVGDocument(@"C:\Files\SVG\Circle.svg");

// Get root SVG element of the document
var svgElement = document.RootElement;

// Find all circle elements in g element
NodeList circleNodes = svgElement.QuerySelectorAll("circle");

// Get the first circle element
SVGCircleElement circleElement = circleNodes[0] as SVGCircleElement;

// Set fill attributes
circleElement.SetAttribute("fill", "#0F0");
circleElement.SetAttribute("fill-opacity", "0.3");

// Set stroke attributes
circleElement.SetAttribute("stroke", "#508484");
circleElement.SetAttribute("stroke-width", "10");

// Save the SVG
document.Save(@"C:\Files\SVG\Fill-Circle.svg");

Fill-Stroke-in-SVG-CSharp_Path.cs

// This code example demonstrates how to set fill and stroke attributes for a path element of SVG in C#.
// Load an existing SVG image
var document = new SVGDocument(@"C:\Files\SVG\Sample-Path.svg");

// Get root SVG element of the document
var svgElement = document.RootElement;

// Get the first path element
SVGPathElement lineElement = svgElement.QuerySelector("path:nth-child(1)") as SVGPathElement;

// Set fill attributes
lineElement.SetAttribute("fill", "orange");
lineElement.SetAttribute("fill-opacity", "0.6");

// Set stroke attributes
lineElement.SetAttribute("stroke", "#508484");
lineElement.SetAttribute("stroke-width", "10");

// Save the SVG
document.Save(@"C:\Files\SVG\Fill-Path.svg");

Fill-Stroke-in-SVG-CSharp_Style.cs

// This code example demonstrates how to apply the fill and stroke attributes using the CSS style in C#.
// Create a new SVG
using (var document = new SVGDocument())
{
    // Get root SVG element of the document
    var svgElement = document.RootElement;

    const string @namespace = "http://www.w3.org/2000/svg";
    
    // Add Circle
    var circle = (SVGCircleElement)document.CreateElementNS(@namespace, "circle");
    circle.Cx.BaseVal.Value = 50;
    circle.Cy.BaseVal.Value = 50;
    circle.R.BaseVal.Value = 40;
    
    // Set style attribute
    circle.SetAttribute("style", "fill:blue; stroke:#fb6796; stroke-width:5");
    
    // Add circle to the root element
    svgElement.AppendChild(circle);
    
    // Save the SVG
    document.Save(@"C:\Files\SVG\ApplyStyle.svg");
}