Skip to main content

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.

Simple explanation : The exported SVG is only designed to be displayed in web pages, we didn't design the output to be editable in SVG editors. The warning that Text is not SVG - cannot display isn't actual SVG, so SVG editors cannot display it.

Technical explanation : The draw.io editor uses foreign objects (foreignObject) in the SVG data to allow complex HTML labels on shapes.

For example, in the following diagram, some of the shapes have bold and italic words in the label text - they use formatted text.
You can use different formatting options inside a text label - on part of the label only

Convert labels to SVG per cell​

You can convert individual labels from HTML foreignObject elements to native SVG text directly in the editor, without exporting. This is a per-cell style property.

  1. Select the shape(s) whose labels you want to convert.
  2. In the Text tab of the format panel, enable the Convert to SVG checkbox.

This sets the convertToSvg style property on the selected cells. When enabled, the label is rendered as native SVG <text> elements instead of foreignObject, making it compatible with SVG editors and platforms that don't support foreign objects.

Note: The Convert to SVG option is only available for formatted text labels that use supported HTML tags (headings, paragraphs, bold, italic, etc.). Labels containing tables, lists, links, or elements with background colours are not supported and the checkbox will be disabled.

See the GitHub discussion on converting labels to SVG for more details.

Export to SVG with text settings​

When you export a diagram as a SVG image (File > Export as > SVG), you can enable Embed Fonts to include fonts in the exported SVG file in case the viewer doesn't have the font installed.

You can also export your diagram to a PDF file yourself, and then import that PDF into a tool like Inkscape. This will result in SVG labels in the diagram in the SVG file.

Disable formatted text and word wrap​

You can also 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 line breaks 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

Disable complex HTML labels by default​

So that the output doesn't contain foreign objects, click here to disable complex HTML labels by default. This sets the JSON configuration in the browser that you load it in. That is why a warning is shown. If you accept, the line:

"simpleLabels": true

is added to your configuration. You can see that (after reloading) under Extras, Configuration (or Preferences, Configuration, depending on your theme).

All modern browsers including Chrome, Firefox, Safari and Microsoft Edge support foreign objects.

The exported SVG will not show all labels when the SVG image file is viewed in 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 Text is not SVG - cannot display at the bottom of the SVG export. This warning can be suppressed by using the svg-warning=0 URL parameter.