About SVG output of diagrams.net

README.md

Optimize SVG output of diagrams.net

draw.io, available at https://app.diagrams.net, is an easy-to-use diagramming tool. However, the exporting of *.drawio files needs to be taken care of most of the times.

As for PNG exporting, currently the default setting may generates blurring image. Fortunately, this can be fixed by scaling the diagram into a larger one. ¹

As for the SVG, things become a bit complicated.

When user viewing the software exported SVG files in a web browser, everything seems just fine. But when they try importing these SVGs into softwares like Word or Inkscape, users may see a "Viewer does not support full SVG 1.1" (now changed to "Text is not SVG - cannot display") text on their image.

Usually this is because draw.io uses HTML code to markup text (and maybe other items) in textboxes and directly embeds them into SVG's <foreignObject> tags. Unfortunately, these "foreign" HTML code cannot be understood by SVG-specific softwares like Inkscape. So, the dev of draw.io insert a info text to prompt the user when the <foreignObject>s are not supported.

As you can see, it's not that these viewers "not supporting full SVG 1.1", but the SVG file contains non-SVG parts which can't be interpreted by softwares other than web browers.

Actually, it is the SVG code that is foreign to the Web browsers.

As for the fallback, draw.io simply trims these text whether the text is too long or broken into multiple line manually by the user, at least for now.

Workarounds

One current workaround provided by draw.io is that user can manually disable 'Word Wrap' and 'Formatted Text' of all textboxes, and draw.io will produce clean SVG on exporting.

See Why text in exported SVG images may not display correctly (diagrams.net).

There are some relative discussions, which happened at:

• Issue #774 · jgraph/drawio;
• Inkscape "Viewer does not support full SVG 1.1" - Using Inkscape with Other Programs - Inkscape Forum (Also mentioned about XSLT)
• Truly Headless Draw.io Exports - Hacker News (ycombinator.com) (Also mentioned about exporting, darkmode, etc.)

Note that after disabling "Word Wrap", user needs to manually break long text into multiple lines. Also, the text's style must be adjusted as a whole in a textbox when "Formatted Text" is disabled.

---

Since draw.io is easy-to-use, I'm trying to find or develop a solution to get native SVG code from its exported SVG or original .drawio file.

For now, we have these desirable solutions:

• For simple SVG diagrams (which doesn't contain complex formatted text), just follow the methods mentioned above (or try my silly Python Script below...);
• Try exporting the SVG to PDF (using web broswers), then use Inkscape to generate SVG from PDF.

The script does:

• remove <switch> for 'unsupporting' text
• remove all <foreignObjects>

References

• xml.etree.ElementTree — The ElementTree XML API — Python 3.10.4 documentation
• 20.5. xml.etree.ElementTree — The ElementTree XML API — Python 3.6.3 documentation
• Is SVG tag with xmlns required? - StackOverflow XML - Declaration - tutorialspoint.com
• How to create <!DOCTYPE> with Python's cElementTree - StackOverflow
• Write XML file with default namespace - StackOverflow
• Saving XML files using ElementTree - StackOverflow

Others

These articles might be useful:

• Things you need to know about working with SVG in VS Code (freecodecamp.org)

• How I use draw.io at the command line | Tom Donohue and comments:

  • Diagrams as code: Structurizr;
  • A web-based editor of PlantUML: http://www.plantuml.com/plantuml;
  • ...

• Dealing with compressed .drawio file (can be turned off in 'properties'): Text-editing a draw.io file exported as SVG with embedded drawing - Stack Overflow

• 4. Multiline SVG Text - SVG Text Layout [Book] (oreilly.com);

• SVG element reference - SVG: Scalable Vector Graphics | MDN and <text> element;

Footnotes

1. Export a diagram as a higher resolution PNG image : draw.io is becoming diagrams.net ↩

run.py

import xml.etree.ElementTree as ET

svgxmlnsuri = 'http://www.w3.org/2000/svg'

ET.register_namespace('', svgxmlnsuri)

ns = {'svgns':svgxmlnsuri}

fname = 'P64-12-3.18a.drawio.svg'

# define custon tree builder

class CustomBuilder(ET.TreeBuilder):
    def doctype(self, name, pubid, system):
        self.doctypeString = f'<!DOCTYPE {name} PUBLIC "{pubid}" "{system}">\n'
        print(self.doctypeString)


target = CustomBuilder()
parser = ET.XMLParser(target=target)  # custom parser

# parse

tree = ET.parse(fname, parser=parser)

root = tree.getroot()

# delete 'unsupported' text switch
root.remove(root.find('svgns:switch', ns))

# replace inline font family, if necessary
style = ET.Element('style')
style.text = \
'''
    text {
    	font-family: "Times New Roman", SimSun, sans-serif;
    	font-size: 12px;
    }
'''

# root.insert(0, style)

# Fix lost comment

comment = ET.Comment('This file was generated by diagrams.net')
root.insert(0, comment)

# remove <foreignObject>s

for tg in root.find('svgns:g', ns).findall('svgns:g', ns):
    if tg[0].tag == f'{{{ns['svgns']}}}switch':
        # move dedicated tag out of switch
        tg.append(tg[0][1]) 
        # remove switch
        tg.remove(tg[0])


outfilename = 'out.svg'

with open(outfilename, 'w', encoding='utf-8') as f:
    xml_declaration = '<?xml version="1.0" encoding="UTF-8"?>\n'
    f.write(xml_declaration)
    f.write(target.doctypeString)
    f.write(ET.tostring(
        root, encoding='utf-8',
        xml_declaration=False,  # Manually write declaration
    ).decode('utf-8'))
    f.write('\n')