Our great sponsors
-
-
draw-image-export2
The 2018 server-side PNG/PDF export implementation using Node, Puppeteer and Chrome headless
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
Foreign Object support in SVG is an optional part of the 1.1 SVG. Yes, it's true that only browsers support it in practice.
The reason for its usage is historic. Originally, this project was the underlying diagramming library only, that uses the SVG DOM for rendering. There was no application and no SVG export, that wasn't a function of the library.
FOs in SVG gave us the whole range of HTML in shape labels. So, as well as complex text formatting, we used it for tables, complex composites, etc. There a large legacy of shapes that use complex HTML for labels, we can't drop support for those.
The app itself came later and the SVG export function even later. It was fairly easy to generate because we can take it from the SVG DOM. But, converting HTML to SVG requires parsing the full HTML specification and generating the SVG to maintain compatibilty. This is an horrifically large task, it would require probably 5+ people full time, we don't have that resource.
I'm not sure calling it SVG is "tacky". It is part of the SVG 1.1 spec, albeit an optional one, it's not like it's isn't SVG at all. But yes, it causes confusion, thus the entry in the README [1], "It is not an SVG editing app, the SVG export is designed only for embedding in web pages, not for further editing in other tools."
Even using SVG for word wrapping alone, we've repeatedly asked critics how to do that without HTML for measuring the font metrics, we're yet to receive an answer how to do that in JavaScript. We've had plenty of comments pointing out this is wrong, we need a practical alternative thought out in detail.
[1] https://github.com/jgraph/drawio
The headless hacking isn't needed, there's a headless chrome/puppeteer PDF generation [1], it what we use for PDF generation at app.diagrams.net.
[1] https://github.com/jgraph/draw-image-export2
… except that no values for requiredExtensions were ever specified, so including this attribute will make some HTML-capable renderers use the fallback, and omitting it will cause all correct SVG renderers to use the (rendering nothing if they don’t support the HTML namespace) and ignore the . Quite why they preemptively didn’t declare XML namespaces valid extensions, I don’t know; not doing so rendered the entire feature uselessly broken for its main intended use case! (I dunno, maybe all browsers implement requiredExtensions="http://www.w3.org/1999/xhtml" now; the thread at https://www.w3.org/Graphics/SVG/WG/track/issues/2053 talks of Amaya emitting it and Firefox not liking it back in 2008, and https://github.com/w3c/svgwg/issues/138 talks of Firefox accepting it in 2016. I haven’t tested anything.)
—⁂—
To do manual word wrapping, you have two main choices:
(a) If it’s acceptable to use HTML at conversion time, Range does all you need, with Range.getClientRects on a range spanning an element returning more than one value if wrapping has occurred, and then you can do something like binary search on the process to find the point of line break, or you can get cleverer if you like to speed it up.
(b) If not, you’ll need to embed at least an OpenType font loader and shaper. HarfBuzz is a good choice for this, with a WASM version readily available (among other options); https://harfbuzz.github.io/harfbuzzjs/ demonstrates it. There are at least three pretty decent options in Rust, too (in alphabetical order: Allsorts, RustyBuzz, Swash), and a few immature libraries covering more to do with rich text formatting (including wrapping) rather than just stopping at shaping.
I’m pretty sure I’ve heard of at least one full HTML-to-SVG renderer that ran in the browser, too, used in such places as filing bug reports to take a “screenshot” of the page. HTML → PDF → SVG is very probably a more practical path for this in your case.
Since you mentioned dark mode in the article, here are some ideas: https://github.com/jgraph/drawio-github/blob/master/DARK-MOD...