Microsoft Word's DOCX format is one of the most widely used formats for document exchange in industry, education, and personal use. Its popularity is due to a combination of technical, practical, and legacy reasons. SVG files are natively supported by modern web browsers and can be easily embedded in web pages. By converting DOCX content to SVG, you can transform complex documents into web-ready graphics while maintaining layout and design fidelity. Unlike raster images, SVG files use mathematical equations to define shapes and paths, allowing them to be infinitely resized without losing quality. This ensures that graphics appear crisp and clear on any display, from small mobile screens to large high-resolution monitors.
Converting an MS Word document to SVG requires many steps, including understanding the DOCX format and a way to render the content to be exported to SVG. TX Text Control provides two ways to export the content as SVGs:
- Export the text
- Export the glyphs
Exporting Text
Exporting text as SVGs is the simplest way to convert a document to SVG. This method exports the text content of the document as SVG text elements. The text is rendered using the font specified in the document, ensuring that the SVG looks identical to the original document. This method is suitable for documents that contain mostly text with minimal formatting. The disadvantage of this method is that the font must be present on the machine on which the SVG is to be rendered.
Let's take a look at a document that contains text. The following screenshot shows an example document that we want to convert to SVG:
The following code snippet shows how to convert the first page of the document to SVG using TX Text Control:
| // Create a new instance of ServerTextControl in a using statement for proper disposal | |
| using (TXTextControl.ServerTextControl tx = new TXTextControl.ServerTextControl()) | |
| { | |
| // Initialize the ServerTextControl instance | |
| tx.Create(); | |
| // Load the DOCX document into the instance | |
| tx.Load("document.docx", TXTextControl.StreamType.WordprocessingML); | |
| // Extract the first page as an SVG string | |
| string svg = tx.GetPages()[1].GetImage(TXTextControl.Page.PageContent.All, 96); | |
| // Output the SVG content to the console | |
| Console.WriteLine(svg); | |
| } |
The resulting SVG file contains the text content of the document.
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="12240" height="15840"> | |
| <defs> | |
| <style> | |
| .TX_fnt1 { font: 440px Arial; } | |
| .TX_fnt0 { font: 220px Arial; } | |
| .TX_fnt2 { font: bold 440px Arial; } | |
| </style> | |
| </defs> | |
| <path fill="rgb(255,255,255)" d="M0,0h12240v15840h-12240z" /> | |
| <text x="1440 1598 1723 1771 1819 1944" y="1865" class="TX_fnt0" xml:space="preserve">Hello </text> | |
| <text x="2006 2280 2524 2740 2865" y="1865" class="TX_fnt1" xml:space="preserve">Text </text> | |
| <text x="2990 3307 3576 3844 3993 4166 4435 4560" y="1865" class="TX_fnt2" xml:space="preserve">Control!</text> | |
| </svg> |
The screenshot below shows the resulting SVG file rendered in a web browser:
One of the advantages of this approach is that the actual text is there and can be selected. However, if the font doesn't exist on the target machine, the rendering may be different and the font will be replaced with another.
Exporting Glyphs
Exporting glyphs as SVGs is a more complex way to convert a document to SVG. This method exports the document's glyphs as SVG path elements. The advantage of this method is that the font is embedded in the SVG file, ensuring that the SVG looks identical to the original document, regardless of the fonts installed on the target machine. This method is suitable for documents that contain complex formatting, such as different fonts, font sizes, font styles, and colors.
The following code snippet shows how to convert the first page of the document to SVG using glyphs:
| using (TXTextControl.ServerTextControl tx = new TXTextControl.ServerTextControl()) | |
| { | |
| // Initialize the TXTextControl object | |
| tx.Create(); | |
| // Load the Word document (in WordprocessingML format) | |
| tx.Load("document.docx", TXTextControl.StreamType.WordprocessingML); | |
| // Retrieve the SVG image representation of the first page | |
| // The parameters specify: | |
| // - All page content (including text and glyph outlines) | |
| // - 96 DPI for the image resolution | |
| string svg = tx.GetPages()[1].GetImage(TXTextControl.Page.PageContent.All | TXTextControl.Page.PageContent.GlyphOutlines, 96); | |
| // Output the generated SVG | |
| Console.WriteLine(svg); | |
| } |
The resulting SVG file contains the glyphs of the document:
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="12240" height="15840"> | |
| <defs> | |
| <clipPath id="TX_C1"> | |
| <path d="M0,1440h12240v12960h-12240z"/> | |
| </clipPath> | |
| </defs> | |
| <path fill="rgb(255,255,255)" d="M0,0h12240v15840h-12240z"/> | |
| <g clip-path="url(#TX_C1)"> | |
| <path id="TX_0_0" d="M1458,1865l0-158 21,0 0,65 81,0 0-65 21,0 0,158-21,0 0-74-81,0 0,74z"/> | |
| <path id="TX_0_1" d="M1692,1827l18,3c-3,12-9,21-17,27-9,7-19,10-33,10-16,0-30-5-39-15-10-11-15-25-15-44 0-19 5-34 15-44 10-11 22-16 38-16 15,0 28,5 38,15 9,11 14,25 14,44 0,1 0,3 0,5l-86,0c1,13 4,22 11,29 7,7 15,10 25,10 7,0 13-2 18-6 6-4 10-10 13-18zm-66-31l66,0c-1-9-3-16-8-21-6-7-14-11-24-11-10,0-17,3-24,9-6,6-9,13-10,23z"/> | |
| <path id="TX_0_2" d="M1738,1865l0-158 19,0 0,158z"/> | |
| <use xlink:href="#TX_0_2" x="48" y="0"/> | |
| <path id="TX_0_4" d="M1826,1808c0-22 6-37 17-47 10-9 22-13 36-13 16,0 28,5 38,15 10,11 15,25 15,43 0,15-2,26-7,34-4,9-10,15-19,20-8,5-17,7-27,7-16,0-29-5-38-15-10-11-15-25-15-44zm19-1c0,15 3,26 10,33 6,7 14,11 24,11 10,0 18-4 24-11 7-7 10-18 10-33 0-14-3-25-10-32-6-7-14-11-24-11-10,0-18,4-24,11-7,7-10,18-10,32z"/> | |
| <path id="TX_1_0" d="M2120,1865l0-278-104,0 0-37 250,0 0,37-104,0 0,278z"/> | |
| <path id="TX_1_1" d="M2468,1791l39,5c-7,23-18,42-36,55-17,13-39,19-66,19-34,0-60-10-80-31-20-20-30-49-30-86 0-38 10-68 30-89 20-21 46-32 78-32 31,0 56,10 76,31 19,21 29,50 29,88 0,2 0,5 0,10l-173,0c1,25 9,44 22,57 13,13 29,20 49,20 14,0 27-4 37-11 10-8 19-20 25-36zm-132-62l132,0c-2-19-7-33-15-43-13-15-29-22-50-22-18,0-34,6-46,18-13,11-20,27-21,47z"/> | |
| <path id="TX_1_2" d="M2527,1865l83-117-78-111 47,0 37,54c6,10 12,19 16,26 7-10 13-19 18-26l38-54 48,0-79,111 82,117-47,0-47-70-10-16-60,86z"/> | |
| <path id="TX_1_3" d="M2854,1830l5,34c-11,3-21,4-29,4-14,0-25-2-33-7-8-4-13-10-16-17-3-7-5-23-5-46l0-131-29,0 0-30 29,0 0-56 39-24 0,80 39,0 0,30-39,0 0,133c0,11 1,18 2,21 1,3 4,5 7,7 3,2 7,3 13,3 4,0 10,0 17-1z"/> | |
| <path id="TX_2_0" d="M3226,1749l60,19c-9,35-25,60-47,77-22,17-50,25-84,25-42,0-77-14-104-43-27-28-40-68-40-117 0-53 14-93 41-122 27-29 62-44 107-44 38,0 70,11 94,34 14,14 25,33 32,58l-63,15c-4-16-11-29-23-39-12-9-26-14-43-14-24,0-43,8-57,25-15,17-22,44-22,82 0,40 7,69 22,86 14,17 33,25 56,25 17,0 32-5 44-16 13-11 22-28 27-51z"/> | |
| <path id="TX_2_1" d="M3324,1748c0-20 5-40 15-59 10-19 24-33 42-43 18-10 38-15 61-15 34,0 63,11 85,34 22,22 33,51 33,85 0,35-11,64-33,87-23,23-51,34-85,34-21,0-41-5-60-14-19-10-33-24-43-42-10-18-15-41-15-67zm62,3c0,23 5,41 16,53 11,12 24,18 40,18 16,0 29-6 40-18 11-12 16-30 16-53 0-23-5-41-16-53-11-12-24-18-40-18-16,0-29,6-40,18-11,12-16,30-16,53z"/> | |
| <path id="TX_2_2" d="M3815,1865l-60,0 0-117c0-25-1-41-4-48-2-7-7-13-13-17-5-4-12-6-21-6-10,0-20,3-28,9-8,5-14,13-17,23-3,9-5,27-5,52l0,104-60,0 0-228 56,0 0,34c20-27 45-40 75-40 14,0 26,2 37,7 11,5 19,11 25,19 5,7 9,16 12,25 2,10 3,23 3,41z"/> | |
| <path id="TX_2_3" d="M3981,1637l0,48-41,0 0,93c0,18 0,29 1,32 1,3 3,6 5,8 3,2 7,3 11,3 5,0 13-2 24-6l4,47c-14,6-29,9-47,9-11,0-20-2-29-5-8-4-15-9-19-15-4-6-7-13-8-23-1-7-2-22-2-43l0-100-29,0 0-48 29,0 0-44 60-35 0,79z"/> | |
| <path id="TX_2_4" d="M4082,1865l-60,0 0-228 56,0 0,32c10-15 18-25 26-30 8-5 16-8 26-8 14,0 27,4 40,11l-18,53c-11-7-20-10-29-10-9,0-16,2-22,7-6,5-10,13-14,25-3,13-5,38-5,77z"/> | |
| <use xlink:href="#TX_2_1" x="859" y="0"/> | |
| <path id="TX_2_6" d="M4466,1865l0-315 60,0 0,315z"/> | |
| <path id="TX_2_7" d="M4615,1784l-16-160 0-74 65,0 0,74-15,160zm-13,81l0-60 60,0 0,60z"/> | |
| </g> | |
| </svg> |
The screenshot below shows the resulting zoomed SVG file rendered in a web browser:
Exporting all Pages
TX Text Control allows you to export all pages of a document to SVG. The following code snippet shows how to convert all pages of the document to SVG by looping through the pages:
| using (TXTextControl.ServerTextControl tx = new TXTextControl.ServerTextControl()) | |
| { | |
| // Initialize the TXTextControl object | |
| tx.Create(); | |
| // Load the document (in WordprocessingML format) | |
| tx.Load("document.docx", TXTextControl.StreamType.WordprocessingML); | |
| // Loop through all the pages of the document | |
| for (int i = 1; i <= tx.GetPages().Count; i++) | |
| { | |
| // Convert the page to SVG (with all content and glyph outlines, at 96 DPI) | |
| string svg = tx.GetPages()[i].GetImage(TXTextControl.Page.PageContent.All | TXTextControl.Page.PageContent.GlyphOutlines, 96); | |
| // Save the SVG string to a file named based on the page number | |
| System.IO.File.WriteAllText($"page{i}.svg", svg); | |
| // Log a message to indicate the page was saved | |
| Console.WriteLine($"Page {i} saved as SVG."); | |
| } | |
| } |
Conclusion
Converting DOCX content to SVG is a powerful way to transform complex documents into web-ready graphics while maintaining layout and design fidelity. By exporting text or glyphs as SVG, you can create scalable graphics that look identical to the original document. TX Text Control provides an easy way to convert DOCX content to SVG, allowing you to create web-ready graphics from your documents.
