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

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 ╰ TX Text Control .NET Server for ASP.NET
╰ TXTextControl Namespace
╰ Page Class
╰ GetImage Method
Gets an image of the page's contents. 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);
view raw test.cs hosted with ❤ by GitHub

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"/>
...
view raw test.xml hosted with ❤ by GitHub

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>
view raw test.xml hosted with ❤ by GitHub

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;
}
view raw test.cs hosted with ❤ by GitHub

This method is called by the Web API endpoints. It creates a ServerTextControl ╰ TX Text Control .NET Server for ASP.NET
╰ TXTextControl Namespace
╰ ServerTextControl Class
The ServerTextControl class implements a component that provide high-level text processing features for server-based applications. 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;
}
}
}
view raw test.cs hosted with ❤ by GitHub

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);
});
}
});
view raw test.js hosted with ❤ by GitHub

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