fill and stroke in svg using csharp

SVG (Scalable Vector Graphics) is an XML-based web-friendly vector file format. It is used to display visual information on a webpage. SVG images are scalable without changing the quality of the image. In this article, we will learn how to work with fill and stroke in SVG using C#.

The following topics shall be covered in this article:

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

C# API to Fill and Stroke in SVG

To work with fill and stroke attributes of SVG in C#, we will be using the Aspose.SVG for .NET API. It allows loading, parsing, rendering, creation, and conversion of SVG files to popular formats without any software dependencies.

The SVGDocument class of the API represents the root of the SVG hierarchy and holds the entire content. The Save() method of this class allows saving SVG to the specified file path. The QuerySelector() 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 for circle, SVGPolygonElement for polygon, etc.

Please either download the DLL of the API or install it using NuGet.

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.

Fills and Strokes in SVG

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"

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.

Fill and Stroke Circle in C#

We can set SVG fill and SVG stroke properties for a circle by following the steps given below:

  1. Firstly, load an existing SVG using the SVGDocument class.
  2. Next, get the document’s root element.
  3. Then, find all the circle elements using the QuerySelectorAll() method.
  4. After that, set the fill attributes for the selected SVGCircleElement.
  5. Optionally, set the stroke attributes for the selected SVGCircleElement.
  6. Finally, save the output SVG image using the Save() method.

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

Fill-and-Stroke-Circle-in-CSharp

Set fill and stroke for circle element in C#.

Please find below the 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>

Here goes the 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 in SVG by following the steps given below:

  1. Firstly, load an existing SVG using the SVGDocument class.
  2. Next, get the document’s root element.
  3. Then, get the path element using the QuerySelector() method.
  4. After that, set the fill attributes for the selected SVGPathElement.
  5. Optionally, set the stroke attributes for the selected SVGPathElement.
  6. Finally, save the output SVG image using the Save() method.

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

Fill-and-Stroke-Path-in-CSharp

Set fill and stroke for path element in C#.

Please find below the 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>

Please find below the 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 Fill and Stroke using Style in C#

We can also apply the SVG fill and SVG stroke properties using the CSS style attribute by following the steps given below:

  1. Firstly, create an instance of the SVGDocument class.
  2. Next, get the document’s root element.
  3. Then, create a circle element using the CreateElementNS() method.
  4. Next, set the circle’s basic properties such as Cx, Cy, and R.
  5. Then, apply the style attribute using the SetAttribute() method.
  6. After that, append the child using the AppendChild() method.
  7. Finally, save the output SVG image using the Save() method.

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

Apply-Fill-and-Stroke-using-Style-in-CSharp

Apply the fill and stroke using CSS style

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

Besides, you can learn more about Aspose.SVG for .NET in the documentation and explore different features supported by the API. In case of any ambiguity, please feel free to contact us on our forum.

See Also