Visio SVG Export Error

Visio is a powerful diagramming tool, with the capability to export drawings in SVG format, which has become the standard format for scalable graphics on the web.  Unfortunately, sometimes the export generates a malformed SVG that won’t render correctly.

The Problem

When opening an SVG image exported from visio, you get the following error:

error on line 136 at column 7: Opening and ending tag mismatch: g line 125 and svg

The Helpful Bit

This is apparently due to a bug in Visio dating back to at least 2007, and occurs when shapes in the diagram have their height set to zero.

As an example, consider this simple Visio drawing, containing a logo and, title, and text block.

Everything looks fine. When I export the diagram, as SVG, Visio attempt to open the file by default, but the browser shows an error and the diagram is not rendered correctly:

You may find that if you export only parts of the diagram, it works just fine.  So, what is happening here?

If you look at the raw SVG code, on the line specified (125 in this case), you’ll note that there are one or more missing closing </g> tags.

This error occurs when the height of a text shape is set to zero, which can also be seen in the SVG code above.  In Visio, the text will simply overflow and your drawing looks fine, but if you select the text in Visio, the text box will briefly appear as a thin horizontal line, followed by just the circular controls normally rendered at edges of the text box when manipulating it.

 VS

This issue was identified when working on a custom SVG Diagramming solution for the Power Platform. SVGs provided by the client didn’t render correctly. I reported the findings to MSFT in September 2023.  I suspect it likely occurs with other shapes, but it was specifically on text boxes that the issue was identified.  

Conclusion

If you get an error about an opening and ending tag mismatch when exporting a Visio diagram as SVG, check to ensure none of your shapes have their height set to zero. 

Drop me a line and let me know this helped. If it didn’t, we can dig into it further.

References:

• MSFT Technet Forum – Visio Bug: Visio 2007 generates bad SVG files which are not always displayed correctly: https://social.technet.microsoft.com/Forums/en-US/3e52f404-b4c6-44e6-8d3f-84a9034767a0/bug-visio-2007-generates-bad-svg-files-which-are-not-always-displayed-correctly
• MSFT Office Forum – VISIO Professional 2019: SVG generation contains errors:
  https://answers.microsoft.com/en-us/msoffice/forum/all/visio-professional-2019-svg-generation-contains/0a0fbedb-ea90-42ae-a638-f668d7c1c90d