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