Why text in exported SVG images may not display correctly

When you look at a diagram exported to an SVG image in IE or some SVG editors, the text may not display correctly.

diagrams.net uses foreign objects (foreignObject) in SVG to allow complex, HTML labels on shapes. To disable complex HTML labels by default, click here.

All modern browsers including Chrome, Firefox, Safari and Microsoft Edge support this functionality. Internet Explorer 11 and earlier versions of IE do not.

We can account for this dynamically if you use diagrams.net in IE11 or earlier. However, the exported SVG will not show all labels when the SVG image file is viewed in IE and most SVG editors (such as Inkscape and Illustrator), as well as some online services such as Wordpress. Instead, you will see a short version of the label and a warning Viewer does not support full SVG 1.1 at the bottom of the SVG export. This warning can be suppressed by using the svg-warning=0 URL parameter.

We are aware of the problem and have spent a considerable amount of time researching solutions. However, the subject is very complex and we don’t have a fix so far. We will continue to investigate it.

In the meantime, consider exporting your diagram to a PDF file as this is also a vector format, or disable formatted text and word wrapping for all labels in your diagram before you export it to SVG by following the steps below.

  1. Right click on a blank area of the drawing canvas, then choose Select All from the context menu.
  2. In the Text tab of the format panel, uncheck the Word Wrap and Formatted Text.

Note: When you disable these formatting options, you can still style the label text as a whole. You can not apply different formatting to parts of the label. When you disable word wrap you may have to add manual linebreaks to match the previous output.

Disable the Formatted Text and Word Wrap options before exporting to SVG to view it correctly in IE and SVG editors