Skip to main content

Export a diagram to an SVG image

SVG images load quickly, especially when compared to loading diagram images in other formats. You can embed an SVG image exported from draw.io in a website, document or even a WordPress site if you have installed a plugin that support the upload of SVG files.

SVG or Scalable Vector Graphics is a file format that defines vector-graphics using the XML markup language, similar to the .drawio file format used for diagrams created in draw.io. SVG images can be enlarged or shrunk without losing quality or introducing pixellation, unlike .JPG, .GIF and .PNG image formats. Because SVG uses XML code, non-image code can be embedded in these files, which has resulted in them not being supported on certain platforms without third-party plugins.

To make sure your SVG diagram displays correctly when embedding it in an online platform that does not support foreign objects in SVG files (like WordPress), disable Text Formatting and Word Wrap on all text elements in your diagram.

Tip: If your diagram has animated connectors, make sure you export it to a SVG file to preserve this animation.

Prepare your diagram for export​

  1. Right-click on an empty spot of the drawing canvas, and click on Select All in the context menu to select everything in your diagram (or press Ctrl+A on Windows, Cmd+A on MacOS).
  2. In the Text tab of the format panel on the right, make sure the Formatted Text checkbox is deselected.
  3. Next, select all of the vertices in your diagram - right-click and choose Select Vertices (or press Ctrl+Shift+I on Windows, Cmd+Shift+I on MacOS).
  4. Again in the Text tab of the format panel, make sure that the Word Wrap checkbox is deselected.
Prepare your diagram for exporting to SVG in draw.io by disabling word wrap and text formatting

Export your diagram to SVG​

  1. Click File > Export As > SVG.
  2. Change the export settings to suit your requirements.
    • Choose the Zoom factor, set a Border width around your diagram.
    • If you only want to export the shapes and connectors that are currently selected, enable the Selection only checkbox. This only appears if you have selected part of your diagram.
    • Select whether to export the entire Diagram (default) or just a single diagram Page from the Size drop down list.
    • If you want to force your diagram to appear in dark or light mode on a dark background, select it from the Appearance drop down list.
    • Enable the checkboxes if you want a Transparent Background or to include a Shadow on your shapes.
    • Make sure the checkbox to Include a copy of my diagram is selected if you want to be able to open your diagram and edit it again when you import the SVG file into draw.io. Choose whether you want to include the entire diagram (default), or just the current diagram page.
    • Enable Embed Images to include image components, such as clip art, into the SVG.
    • Enable Embed Fonts for complex formatted text labels (see troubleshooting below).
    • By default Links will open following the viewer's browser preferences. Select a different behaviour if you want links to always open in a new tab or a new browser window.
      Choose the export settings for the SVG image
  3. Click Export and select the location to save your SVG file.

Troubleshooting​

If your SVG viewer or online platform does not support foreign objects in SVG files, you have several options:

Note: SVG 1.1 and formatted text labels​

draw.io and our free online editor exports SVG 1.1 by default. Some older SVG viewers have trouble when text contains a variety of formatting information.

Usually, a warning is embedded in the raw SVG data that only displays when your SVG viewer doesn't support SVG 1.1. You can convert individual labels to native SVG text by enabling Convert to SVG in the Text tab of the format panel for the affected cells. See why text in exported SVG images may not display correctly for details and the GitHub discussion on converting labels to SVG.

Adaptive colours in exported SVGs​

Colours in your draw.io diagram automatically adapt by default when you switch between light and dark mode.

The light-dark() function is used to define two colour values for each element in a diagram - one for light mode, and one for dark mode. SVG elements have a color-scheme: light dark CSS property. This means a static SVG will adapt to the color scheme of the operating system.

Change the adaptive colours settings on a diagram in draw.io via the Extras menu or the Style tab in the format panel when nothing is selected
The new SVG export is on the left, the old is on the right

Note: Diagrams exported to SVG from draw.io will show light colours as a fall-back for browsers that don't support light-dark() function.

Learn more about adaptive colours in draw.io