SVG Fill Color and SVG Stroke Color in C#

SVG (Scalable Vector Graphics) is an XML‑based web‑friendly vector file format. It enables developers and designers to create vector graphics using points, lines, paths, and shapes. You can use it to design logos, icons, simple graphics, and animations. Any text editor can create and edit SVG images since they are resolution‑independent. Design is one of the most significant aspects of creating SVG, but color is equally critical. Colors can be applied to SVG shapes, lines, paths, and texts. It is possible to color, texture, shade, or build SVG graphics from partially transparent overlapping layers. In this article, we will learn how to work with SVG Fill Color and SVG Stroke Color in C#.

The following topics shall be covered in this article:

1. SVG C# API for SVG Fill and Stroke Color
2. What is SVG Fill
3. What is SVG Stroke
4. How to Use SVG Fill and SVG Stroke?
5. [How to Use SVG Fill Color and SVG Stroke Color][21]
6. Fill and Stroke Circle in SVG
7. Fill and Stroke Path in SVG
8. [Apply Fill and Stroke using Style][8]

SVG C# API for SVG Fill and Stroke Color

To work with SVG Fill Color and SVG Stroke Color in C#, we will be using the [Aspose.SVG for .NET][9] API. It allows loading, parsing, rendering, creation, and conversion of SVG files to [popular formats][10] without any software dependencies.

The [SVGDocument][11] class of the API represents the root of the SVG hierarchy and holds the entire content. The [Save()][12] method of this class allows saving SVG to the specified file path. The [QuerySelector()][13] method returns the first element in the document matching the selector. The API supports working with popular shapes such as rectangles, circles, ellipses, Line, polylines, etc. The API provides separate classes to represent these supported shapes such as [SVGCircleElement][14] for circle, SVGPolygonElement for polygon, etc.

Please either [download the DLL][15] of the API or install it using [NuGet][16].

PM> Install-Package Aspose.SVG

What is SVG Fill?

The fill property is one of the basic SVG presentation attributes used to set the color of the shape inside its outline.

We can define the following fill attributes:

• fill: Sets the color to fill. Specify none or transparent if there is no filling.
• fill-opacity: Sets the opacity value between 0 to 1.
• fill-rule: Defines how the inside area of a shape is determined such as nonzero, evenodd.

What is SVG Stroke?

The stroke property defines the outline or a border of SVG shapes. The stroke presentation attribute sets the color of the outline of the shape.

We can set the following stroke attributes:

• stroke: Sets the color value.
• stroke-dasharray: Specifies the dashed line types.
• stroke-dashoffset
• stroke-linecap: Controls the shape of the ends of lines such as butt, square, and round.
• stroke-linejoin: Specifies how two lines join such as miter, bevel, and round.
• stroke-miterlimit: Must be greater than or equal to 1 if used.
• stroke-opacity: Sets the opacity value between 0 to 1.
• stroke-width: Sets the width.

How to Use SVG Fill and SVG Stroke?

Both the fill and stroke are used for adding color, gradients or patterns to graphics in SVG. The fill paints the interior of the SVG element, whereas the stroke paints its outline. We can specify both fill and stroke in the style attribute or use them as presentation attributes.

We can set SVG fills and SVG strokes in the style attribute as shown below:

style="stroke:#00ff00; stroke-width:2; fill:#ff0000"

We can also use the same style properties in the presentation attributes as shown below:

stroke="green" stroke-width="2" fill="#ff0000"

How to Use SVG Fill Color and SVG Stroke Color

Color specification involves a variety of rules, such as:

• The default color is Black, if the fill attribute is not specified.
• The shape will not be filled with any color if the fill attribute has a none or transparent value.
• There will be no stroke if the stroke attribute is not specified even if the stroke-width attribute is specified.

For specifying the SVG color, we can use color names such as red, blue, etc. We can also use RGB values or HEX values for the colors. Please find below a few examples showing different ways to set fill and stroke colors:

• SVG Color Names

SVG specification defines 147 color names. We can set any color by specifying its name as shown below:

stroke="Green"

fill="Red"

• HEX Color Codes

We can also specify six‑digit color codes in the form #RRGGBB. There are two‑digit hexadecimal pairs for Red, Green, and Blue ranging from 00 to FF. Example:

stroke="#00FF00"

fill="#FF0000"

• RGB Color Codes

RGB values range from 0 to 255. Example:

stroke="rgb(0,255,0)"

fill="rgb(255,0,0)"

• RGBA Color Codes

RGBA adds an alpha channel for opacity (0.0‑1.0). Example:

stroke="rgba(0,255,0,1.0)"

fill="rgba(255,0,0,1.0)"

• HSL Color Codes

HSL uses hue, saturation, and lightness. Example:

stroke="hsl(120, 100%, 50%)"

fill="hsl(0, 100%, 50%)"

• HSLA Color Codes

HSLA adds alpha to HSL. Example:

stroke="hsla(120, 100%, 50%, 1.0)"

fill="hsla(0, 100%, 50%, 1.0)"

Fill and Stroke Circle in C#

We can set SVG fill and SVG stroke properties for a circle by following these steps:

1. Load an existing SVG using the SVGDocument class.
2. Get the document’s root element.
3. Find all circle elements with QuerySelectorAll().
4. Set the fill attributes for the selected SVGCircleElement.
5. Optionally set the stroke attributes for the same element.
6. Save the output SVG image with Save().

The code sample shows how to set fill and stroke for a circle element of SVG in C#.

Content of the Circle.svg image:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<g stroke="black">
		<circle r="30" cx="50" cy="35" fill="none"/>
    </g>
</svg>

Content of the Fill-Circle.svg image:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<g stroke="black">
		<circle r="30" cx="50" cy="35" fill="#0F0" fill-opacity="0.3" stroke="#508484" stroke-width="10"/>
    </g>
</svg>

Fill and Stroke Path in C#

We can set SVG fill and SVG stroke properties for a path element by following these steps:

1. Load an existing SVG using the SVGDocument class.
2. Get the document’s root element.
3. Retrieve the path element with QuerySelector().
4. Set the fill attributes for the selected SVGPathElement.
5. Optionally set the stroke attributes for the same element.
6. Save the output SVG image with Save().

The code sample shows how to set fill and stroke for a path element of SVG in C#.

Content of the Sample-Path.svg image:

<svg height="400" width="800" xmlns="http://www.w3.org/2000/svg">
	<g stroke="black">
		<path d="M 10 100 Q 25 10 180 100 T 250 100 T 300 100 T 390 130" stroke="red" stroke-width="3" fill="none" />
    </g>
</svg>

Content of the Fill-Path.svg image:

<svg height="400" width="800" xmlns="http://www.w3.org/2000/svg">
	<g stroke="black">
		<path d="M 10 100 Q 25 10 180 100 T 250 100 T 300 100 T 390 130" stroke="#508484" stroke-width="10" fill="orange" fill-opacity="0.6"/>
    </g>
</svg>

Apply SVG Fill and SVG Stroke using Style in C#

We can also apply fill and stroke using the CSS style attribute by following these steps:

1. Create an instance of the SVGDocument class.
2. Get the document’s root element.
3. Create a circle element with CreateElementNS().
4. Set the circle’s basic properties (Cx, Cy, R).
5. Apply the style attribute using SetAttribute().
6. Append the child with AppendChild().
7. Save the output SVG image with Save().

The code sample shows how to apply the SVG fill and stroke using CSS style in C#.

<svg xmlns="http://www.w3.org/2000/svg">
	<g>
		<circle cx="50" cy="50" r="40" style="fill: blue; stroke: rgb(251, 103, 150); stroke-width: 5;"/>
	</g>
</svg>

Get Free Temporary License

You can [get a free temporary license][17] to try Aspose.SVG for .NET without evaluation limitations.

Conclusion

In this article, we have learned how to:

• create a new SVG image;
• load an existing SVG image;
• edit an SVG image;
• set fill and stroke attributes for shapes of SVG;
• set style attributes for the shapes in C#.

You can explore more features in the [documentation][18] and ask questions on our [forum][19].

See Also

• [Change SVG Color or Background Programmatically in C#][20]