Convert Text to SVG in C#

The SVG Text element is used to define a text in SVG. SVG (Scalable Vector Graphics) is a web-friendly vector file format. It is used to display visual information on a webpage. We can easily write any text in SVG using the SVG Text element. In this article, we will learn how to convert text to SVG in C#.

The following topics shall be covered in this article:

1. C# API to Convert Text to SVG
2. What is SVG Text
3. Convert Text to SVG
4. Convert Text with TSpan to SVG
5. SVG Text with TextPath
6. Apply SVG Text Styles

C# API to Convert Text to SVG

To convert text to SVG, 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. We have the Save() method in this class that allows saving SVG to the specified file path. The SVGTextElement class represents the ‘text’ element. The SVGTSpanElement interface corresponds to the ‘tspan’ element. The API provides the SVGTextPathElement class representing ‘textPath’ element and SVGPathElement for the ‘path’ element. We can set various properties/attributes for SVG elements using the SetAttribute(string, string) method. The AppendChild(Node) method of the API adds the node’s new child to the end of the list of children of this node.

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

PM> Install-Package Aspose.SVG

What is SVG Text?

In SVG, the text is rendered using the <text> element. By default, The text is rendered with a black fill and no outline. We can define the following attributes:

• x: sets the position of the point horizontally.
• y: sets the position of the point vertically.
• fill: defines the rendered text color.
• transform : rotate, translate, skew, and scale.

Convert Text to SVG using C#

We can add any text to SVG 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 the SVGTextElement class object.
4. Next, set various attributes using the SetAttribute() method.
5. After that, call the AppendChild() method to append it to the root element.
6. Finally, save the output SVG image using the Save() method.

The following code sample shows how to convert text to SVG in C#.

Please find below the content of the simple-text.svg image.

<svg xmlns="http://www.w3.org/2000/svg">
    <text fill="blue" x="10" y="30">The is a simple SVG text!</text>
</svg>

Convert Text with TSpan to SVG in C#

The SVG <tspan> element defines a subtext within a <text> element. We can add any text with a tspan element to SVG 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 the SVGTextElement class object.
4. Optionally, set various attributes using the SetAttribute() method.
5. Next, define the SVGTSpanElement object.
6. Then, set its attributes using the SetAttribute() method.
7. Now, call the AppendChild() method to append it to the SVGTextElement element.
8. Repeat the above steps to add more SVGTSpanElement objects.
9. After that, call the AppendChild() method to append SVGTextElement to the root element.
10. Finally, save the output SVG image using the Save() method.

The following code sample shows how to convert text with tspan to SVG in C#.

Please find below the content of the svg-tspan.svg image.

<svg xmlns="http://www.w3.org/2000/svg">
    <text style="font-family: arial;" x="20" y="60">
        <tspan style="font-weight: bold; font-size: 55px;" x="20" y="60">ASPOSE</tspan>
        <tspan style="font-size: 20px; fill: grey;" x="37" y="90">Your File Format APIs</tspan>
    </text>
</svg>

SVG Text with TextPath in C#

We can also render text along the shape of a <path> element, and enclose the text in a <textPath> element. It allows setting a reference to the <path> element using the href attribute. We can convert text with text paths 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 the SVGPathElement class object and set various attributes using the SetAttribute() method.
4. After that, call the AppendChild() method to append it to the root element.
5. Next, create the SVGTextElement class object.
6. Then, initialize the SVGTextPathElement object and set text content.
7. Next, assign the SVGPathElement to its href attribute using the SetAttribute() method.
8. Then, call the AppendChild() method to append SVGTextPathElement to the SVGTextElement element.
9. After that, append SVGTextElement to the root element using the AppendChild() method.
10. Finally, save the output SVG image using the Save() method.

The following code sample shows how to convert text with textPath to SVG in C#.

Please find below the content of the svg-textPath.svg image.

<svg xmlns="http://www.w3.org/2000/svg">
    <path id="path_1" d="M 50 100 Q 25 10 180 100 T 350 100 T 520 100 T 690 100" fill="transparent"/>
    <path id="path_2" d="M 50 100 Q 25 10 180 100 T 350 100" transform="translate(0,75)" fill="transparent"/>
    <text>
        <textPath href="#path_1">Aspose.SVG for .NET is flexible library for SVG files processing and fully compatible with its specifications.</textPath>
        <textPath href="#path_2">Aspose.SVG for .NET is flexible library for SVG files processing and fully compatible with its specifications.</textPath>
    </text>
</svg>

Apply SVG Text Style in C#

We can add any text to SVG 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 the SVGTextElement class object.
4. Next, set the style attribute using the SetAttribute() method.
5. After that, call the AppendChild() method to append it to the root element.
6. Finally, save the output SVG image using the Save() method.

The following code sample shows how to apply CSS styles to SVG text in C#.

Please find below the content of the text-style.svg image.

<svg xmlns="http://www.w3.org/2000/svg">
    <text fill="blue" x="10" y="30" style="font-weight: bold; font-style: italic; text-decoration-line: line-through; text-transform: capitalize;">The is a simple SVG text!</text>
</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;
• use SVG text elements;
• render SVG text to the path;
• set position and fill attributes for SVG text;
• set style attributes for the SVG text in C#.

Besides converting text to SVG in C#, 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 free support forum.

See Also

• Fill and Stroke in SVG using C#