SUPPORT EMAIL ROUTING: A PROCESS DIAGRAM WITH EDITABLE LABELS Files for "Build a Process Diagram with Custom SVG Symbols and Editable Labels" on svgai.org. Made in October 2026. The support team and its process are fictional. FILES support-email-routing.svg: The final diagram. It is a draw.io export (plain SVG, labels as SVG ) with four additions typed in SVG AI's SVG Code Editor: a , a <desc>, role="img" with aria-labelledby and aria-describedby on the root element, and aria-hidden="true" on the group that holds the drawing. The composition and these edits were made by an AI coding agent. support-email-routing.drawio: The editable source, as saved by draw.io 32.5.8. Open it in draw.io (app.diagrams.net or the desktop app). index.html: The diagram on a web page: an image with a short alt text, followed by the steps as a visible list. It also works opened from disk. steps-and-labels.txt: The labels in document order, the connectors and both text alternatives. icons/: The three SVG AI icons in the diagram, unchanged: an envelope, a gear and a bell, generated on September 5, 2026 (Classic, one SVG each, transparent background). Their prompts are in the text-to-SVG tutorial: https://www.svgai.org/blog/text-to-svg/text-to-svg-ai-tutorial check-results.json: What was checked, and the results. TO CHANGE A LABEL Edit it in the .drawio file. A label you add in draw.io starts as formatted text: select it, and in Format panel > Text > Advanced turn off Formatted Text, then Word Wrap (if a box already shows unchecked, tick it and untick it again). Keep each label inside its card: plain-text labels don't wrap, so add a line break or widen the card. Then use File > Export as > SVG with "Include a copy of my diagram" off and, under Advanced, Appearance set to Light; the export should contain no <foreignObject>. A new export doesn't have the title, desc and ARIA attributes, so add them again (see steps-and-labels.txt), and update the visible list on your page. TESTED Chrome 155 and Edge 155 on Windows: element counts and label order, connector ends, contrast, image and inline rendering, label size at page widths from 320 to 1280 px, label fit with Verdana and Georgia, and the accessibility trees in DevTools and in Windows UI Automation (not a screen reader). draw.io 32.5.8 in Chrome, driven by scripts: the Text > Advanced steps and the Waypoints menu on a test diagram built from sidebar shapes and an imported icon file, with mouse and keyboard events; the exports through its Export as SVG dialog; the file opening and the label changes of the editing round trip through draw.io's own functions. Not tested: screen readers, Safari, Firefox, real phones, other diagram editors and printing.