# How to Generate SVG Images from Document Pages in ASP.NET Core C#

> TX Text Control can be used to generate SVG images from the page of a document, including documents such as MS Word DOC and DOCX. The sample application for creating thumbnails and selectable SVGs is described in this article.

- **Author:** Bjoern Meyer
- **Published:** 2023-10-10
- **Modified:** 2025-11-16
- **Description:** TX Text Control can be used to generate SVG images from the page of a document, including documents such as MS Word DOC and DOCX. The sample application for creating thumbnails and selectable SVGs is described in this article.
- **2 min read** (331 words)
- **Tags:**
  - ASP.NET
  - ServerTextControl
  - SVG
- **Web URL:** https://www.textcontrol.com/blog/2023/10/10/how-to-generate-svg-images-from-document-pages-in-aspnet-core-csharp/
- **LLMs URL:** https://www.textcontrol.com/blog/2023/10/10/how-to-generate-svg-images-from-document-pages-in-aspnet-core-csharp/llms.txt
- **LLMs-Full URL:** https://www.textcontrol.com/blog/2023/10/10/how-to-generate-svg-images-from-document-pages-in-aspnet-core-csharp/llms-full.txt
- **GitHub Repository:** https://github.com/TextControl/TXTextControl.Core.MVC.SVG

---

Scalable Vector Graphics (SVG) is an XML-based vector image format developed and maintained by the World Wide Web Consortium (W3C). TX Text Control is not only able to insert SVG images into a document, but it can also be used to generate SVG images from the pages of a document.

[![Export SVG](https://s1-www.textcontrol.com/assets/dist/blog/2023/10/10/b/assets/svg.gif "Export SVG")](https://s1-www.textcontrol.com/assets/dist/blog/2023/10/10/b/assets/svg.gif)

The advantage of SVG is that it's a standard that's supported by all browsers, and because it's a vector graphics format, there's no loss of quality for text content.

The Page.GetImage method has a new implementation that returns the page as a Base64-encoding string in SVG format.

```
string svgSources = tx.GetPages()[1].GetImage(TXTextControl.Page.PageContent.All, 300);
```

The first parameter *PageContent* defines the content to be returned by the method and the second parameter defines the resolution of embedded bitmap images.

### Text as Splines

Text is exported as glyphs when using *TXTextControl.Page.PageContent.GlyphOutlines*. This means that the fonts will be exported as splines in the generated SVG and will be rendered in a consistent, platform-independent manner.

The following example shows the output of the rendered text as path elements in the SVG file.

```
<svg
	xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="11906" height="16838">
	<defs>
		<clipPath id="𝒯✗_C1">
			<path d="M0,1134h11906v14570h-11906z"/>
		</clipPath>
	</defs>
	<path fill="rgb(255,255,255)" d="M0,0h11906v16838h-11906z"/>
	<g clip-path="url(#𝒯✗_C1)">
		<path id="𝒯✗_0_0" d="M1186,1317l0-126-47,0 0-17 113,0 0,17-47,0 0,126z"/>
		<path id="𝒯✗_0_1" d="M1273,1317l0-143 18,0 0,51c8-9 18-14 30-14 8,0 14,2 20,5 5,3 9,7 11,12 3,5 4,13 4,23l0,66-18,0 0-66c0-9-2-15-5-19-4-4-9-6-16-6-5,0-9,1-14,4-4,3-7,6-9,11-2,5-3,11-3,19l0,57z"/>
		<path id="𝒯✗_0_2" d="M1383,1193l0-19 18,0 0,19zm0,124l0-104 18,0 0,104z"/>
    
...
```

The actual text and font information is present in the SVG if the content is exported as text.

```
<svg
	xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="11906" height="16838">
	<defs>
		<style>.𝒯✗_fnt0{font:200px Arial;}</style>
	</defs>
	<path fill="rgb(255,255,255)" d="M0,0h11906v16838h-11906z"/>
	<text x="1134 1259 1369 1412 1513 1568 1612 1712 1768 1878 1933 2034 2144 2315 2425 2468 2579 2634 2744 2855 2956 3066 3236 3347 3457 3512" y="1317" class="𝒯✗_fnt0" xml:space="preserve">
    		This is a sample document.
  	</text>
</svg>
```

### Sample Application

The sample application implements Web API methods to return SVG images from loaded documents. The *CreateSVG* method loops through the pages specified by a start page and an end page in order to create SVG images.

```
public string[] CreateSVG(ServerTextControl TextControl, 
    bool GlyphOutlines = false, 
    int FromPage = 1, 
    int ToPage = -1)
{
    // create array for SVGs
    string[] svgPages = new string[(ToPage == -1 ? TextControl.Pages : ToPage)];

    // set page content
    TXTextControl.Page.PageContent pageContent =
        GlyphOutlines ? TXTextControl.Page.PageContent.All | TXTextControl.Page.PageContent.GlyphOutlines
        : TXTextControl.Page.PageContent.All;

    for (int i = FromPage; i <= (ToPage == -1 ? TextControl.Pages : ToPage); i++)
    {
        // get SVG from page
        svgPages[i - 1] = TextControl.GetPages()[i].GetImage(pageContent, 96);
    }

    return svgPages;
}
```

This method is called by the Web API endpoints. It creates a ServerTextControl and returns an array of SVG images.

```
[HttpGet]
public string[] GetSVG()
{
    lock (_lock)
    {
        using (TXTextControl.ServerTextControl tx = new ServerTextControl())
        {
            tx.Create();
            tx.Load("App_Data/demo.tx", StreamType.InternalUnicodeFormat);

            // create SVGs from all pages with glyph outlines
            var svgs = CreateSVG(tx, true, 1, -1);

            // convert SVGs to Base64 strings
            for (int i = 0; i < svgs.Length; i++)
            {
                byte[] bytes = Encoding.UTF8.GetBytes(svgs[i]);
                svgs[i] = Convert.ToBase64String(bytes);
            }

            return svgs;
        }
    }
}
```

On the client side, these endpoints are called asynchronously and the returned SVGs are created as image elements and appended to a container.

```
// ajax call to get the svg with glyphs
$.ajax({
    url: '@Url.Action("GetSVG", "Home")',
    type: 'GET',
    dataType: 'json',
    success: function (data) {
        
        console.log(atob(data[0]));

        // for each element in data array
        $.each(data, function (index, value) {
            // create img element
            var img = document.createElement('img');
            img.className = 'svgImage';
            img.src = 'data:image/svg+xml;base64,' + value;
            img.width = 200;
            // append to container
            $('#imageContainer').append(img);
        });

    }
});
```

Download the sample application from our GitHub repository to test it yourself.

---

## About Bjoern Meyer

As CEO, Bjoern is the visionary behind our strategic direction and business development, bridging the gap between our customers and engineering teams. His deep passion for coding and web technologies drives the creation of innovative products. If you're at a tech conference, be sure to stop by our booth - you'll most likely meet Bjoern in person. With an advanced graduate degree (Dipl. Inf.) in Computer Science, specializing in AI, from the University of Bremen, Bjoern brings significant expertise to his role. In his spare time, Bjoern enjoys running, paragliding, mountain biking, and playing the piano.

- [LinkedIn](https://www.linkedin.com/in/bjoernmeyer/)
- [X](https://x.com/txbjoern)
- [GitHub](https://github.com/bjoerntx)

---

## Related Posts

- [TX Text Control vs IronPDF for Enterprise PDF Workflows: Complete Comparison Guide](https://www.textcontrol.com/blog/2026/04/28/tx-text-control-vs-ironpdf-for-enterprise-pdf-workflows-complete-comparison-guide/llms.txt)
- [Adding SVG Graphics to PDF Documents in C# .NET](https://www.textcontrol.com/blog/2025/07/08/adding-svg-graphics-to-pdf-documents-in-csharp-dotnet/llms.txt)
- [The Importance of PDF Signing in .NET C#](https://www.textcontrol.com/blog/2025/01/14/the-importance-of-pdf-signing-in-net-csharp/llms.txt)
- [Convert MS Word DOCX to SVG in .NET C#](https://www.textcontrol.com/blog/2024/12/30/convert-ms-word-docx-to-svg-in-net-csharp/llms.txt)
- [When to Generate Documents Server-Side Instead of Client-Side: A Focus on Data Security](https://www.textcontrol.com/blog/2024/10/04/when-to-generate-documents-server-side-instead-of-client-side-a-focus-on-data-security/llms.txt)
- [Sign Documents with a Self-Signed Digital ID From Adobe Acrobat Reader in .NET C#](https://www.textcontrol.com/blog/2024/08/12/sign-documents-with-a-self-signed-digital-id-from-adobe-acrobat-reader-in-net-c-sharp/llms.txt)
- [Programmatically Convert MS Word DOCX Documents to PDF in .NET C#](https://www.textcontrol.com/blog/2024/08/09/programmatically-convert-ms-word-docx-documents-to-pdf-in-net-c-sharp/llms.txt)
- [Low Code vs. High Code: Differences between TX Text Control and DS Server](https://www.textcontrol.com/blog/2024/08/07/low-code-vs-high-code-differences-between-tx-text-control-and-ds-server/llms.txt)
- [Getting Started Video Tutorial: How to Add Electronic and Digital Signatures to PDF Documents in ASP.NET Core C#](https://www.textcontrol.com/blog/2024/08/05/getting-started-video-tutorial-how-to-add-electronic-and-digital-signatures-to-pdf-documents-in-asp-net-core-csharp/llms.txt)
- [Getting Started Video Tutorial: How to use the MailMerge and ServerTextControl Classes in ASP.NET Core C#](https://www.textcontrol.com/blog/2024/08/05/getting-started-video-tutorial-how-to-use-the-mailmerge-and-servertextcontrol-classes-in-asp-net-core-c/llms.txt)
- [Getting Started Videos: New Text Control YouTube Channel](https://www.textcontrol.com/blog/2024/08/02/getting-started-videos-new-text-control-youtube-channel/llms.txt)
- [Find ApplicationFields within Sections and Paragraphs in .NET C#](https://www.textcontrol.com/blog/2024/08/02/find-applicationfields-within-sections-and-paragraphs-in-net-c-sharp/llms.txt)
- [Chat PDF - A Generative AI Application for PDF Documents using TX Text Control and OpenAI Functions in C#](https://www.textcontrol.com/blog/2024/02/23/ask-pdf-a-generative-ai-application-for-pdf-documents-using-tx-text-control-and-openai-functions-in-c-sharp/llms.txt)
- [Creating Valid XRechnung / ZUGFeRD Invoices with ASP.NET Core C#](https://www.textcontrol.com/blog/2023/12/28/creating-valid-xrechnung-zugferd-invoices-with-asp-net-core-csharp/llms.txt)
- [Generating and Adding Watermarks to Documents using C#](https://www.textcontrol.com/blog/2023/12/20/generating-and-adding-watermarks-to-documents-using-csharp/llms.txt)
- [Document Viewer: Save the Values of Form Fields in Documents](https://www.textcontrol.com/blog/2023/12/19/document-viewer-save-the-values-of-form-fields-in-documents/llms.txt)
- [E-Sign: Retrieving Timestamped Raw Signature Data](https://www.textcontrol.com/blog/2023/12/19/retrieving-timestamped-raw-signature-data/llms.txt)
- [How to Delete All Section Breaks in a DOCX Document using C#](https://www.textcontrol.com/blog/2023/11/21/how-to-delete-all-section-breaks-in-a-docx-document-using-csharp/llms.txt)
- [Store Documents as PDF/A using C# - A Future-Proof Archiving Format](https://www.textcontrol.com/blog/2023/10/24/store-documents-as-pdfaa-using-csharp-a-futureproof-archiving-format/llms.txt)
- [Convert HTML to PDF in ASP.NET Core C#](https://www.textcontrol.com/blog/2023/10/23/convert-html-to-pdf-in-aspnet-core-csharp/llms.txt)
- [Generate PDF Documents from MS Word DOCX Templates in ASP.NET Core C#](https://www.textcontrol.com/blog/2023/10/20/generate-pdf-documents-from-ms-word-docx-templates-in-aspnet-core-csharp/llms.txt)
- [How to Load and View PDF Documents in ASP.NET Core C#](https://www.textcontrol.com/blog/2023/10/20/how-to-load-and-view-pdf-documents-in-aspnet-core-csharp/llms.txt)
- [Document Viewer: Save the Values of Form Fields in Documents](https://www.textcontrol.com/blog/2023/10/19/document-viewer-save-the-values-of-form-fields-in-documents/llms.txt)
- [E-Sign: Retrieving Timestamped Raw Signature Data](https://www.textcontrol.com/blog/2023/10/19/retrieving-timestamped-raw-signature-data/llms.txt)
- [How to Create and Deploy PDF Forms in ASP.NET Core C#](https://www.textcontrol.com/blog/2023/10/17/how-to-create-and-deploy-pdf-forms-in-aspnet-core-csharp/llms.txt)