Embedded fonts have inconsistent text positions

[mkroening]

Creating two simple text boxes next to each other in draw.io, exporting to SVG and converting to PDF with svg2pdf works fine. It does not work fine as soon as I select “Embed Fonts” when exporting to PDF, though. Apart from the text being rasterized (which might not be avoidable), the text is rendered at different heights.

1. example.drawio:

   <mxfile host="Electron" modified="2024-02-05T13:57:42.198Z" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/23.0.2 Chrome/120.0.6099.109 Electron/28.1.0 Safari/537.36" etag="U_0CKBYFzwEo-Qb8ycZV" version="23.0.2" type="device">
     <diagram name="Page-1" id="Cfz2YbFhdFfE50NHESyt">
       <mxGraphModel dx="133" dy="84" grid="0" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="0" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
         <root>
           <mxCell id="0" />
           <mxCell id="1" parent="0" />
           <mxCell id="hu2bRimmB-T-eZgXSITk-1" value="Text" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=16;" vertex="1" parent="1">
             <mxGeometry x="170" y="185" width="60" height="30" as="geometry" />
           </mxCell>
           <mxCell id="hu2bRimmB-T-eZgXSITk-2" value="Text" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;fontSize=16;" vertex="1" parent="1">
             <mxGeometry x="220" y="185" width="60" height="30" as="geometry" />
           </mxCell>
         </root>
       </mxGraphModel>
     </diagram>
   </mxfile>

2. example.svg (with embedded fonts):

   

3. example.pdf

Thanks for your help! :)

[LaurenzV]

It's not a "bug", unfortunately.

draw.io and similar tools are sadly known to be a source of trouble for SVG output (see also typst/typst#1421). The reason being that they don't really create a "pure" SVG, but instead they rely on the foreignObject feature to embed HTML fragments into the SVG. As a result of this, you basically would need to have a full-blown browser engine to render their SVG, which we don't. And it's unlikely to ever be supported (because we rely on an upstream crate which is very unlikely to ever implement this, as it's not really part of the SVG specification).

Your SVG is basically saying "try to render this HTML fragment, and if this is not possible embed the image instead". For some reason, the two images have a different y position, which is also why they appear on a different height. That's not a bug from our side though, you can try opening the SVG in Inkscape (which doesn't support HTML either) and the result is exactly the same.

So I'm afraid there is not much we can do here. :( Other than blame draw.io for not producing proper SVG files.

[mkroening]

Ah, that makes sense. Thank you so much for the explanation! I opened an issue over at drawio-desktop: jgraph/drawio#4473