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.
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. ╰ 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); |
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 Server ╰ 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; | |
} | |
} | |
} |
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.