The deprecated `<font>` element should not be used in the generated SVG

[iherman]

Preflight Checklist

• [X] I agree to follow the Code of Conduct that this project adheres to.
• [X] I have searched the issue tracker for a feature request that matches the one I want to file, without success.

Describe the bug

When exporting to SVG, texts are rendered as foreign objects in HTML. Which is fine. But the generated HTML makes use of the <font> element, which is long deprecated, which means that the generated SVG may not pass conformance checkers and, eventually, browsers may also ignore it.

To Reproduce Steps to reproduce the behavior:

1. Create a shape with a text in it
2. Export to SVG
3. See error

Expected behavior If applicable and necessary, the span element should be used. In many cases the enclosing element already has the necessary CSS settings, ie, the font element may be dropped altogether

Screenshots

here is the drawio file:

<mxfile host="Electron" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/27.0.9 Chrome/134.0.6998.205 Electron/35.4.0 Safari/537.36" version="27.0.9">
  <diagram name="Page-1" id="VCU2_7XY7YOSpMuFFgP9">
    <mxGraphModel dx="2583" dy="1935" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="0" pageScale="1" pageWidth="1169" pageHeight="827" background="#ffffff" math="0" shadow="0" adaptiveColors="simple">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <UserObject label="&lt;i&gt;&lt;font color=&quot;#000000&quot;&gt;Presentation ABC&lt;/font&gt;&lt;/i&gt;" id="80YUNRsU_wij_iDbftCs-68">
          <mxCell style="ellipse;whiteSpace=wrap;html=1;fontSize=16;fillColor=none;strokeWidth=2;strokeColor=#336600;" parent="1" vertex="1">
            <mxGeometry x="-979" y="-684.61" width="147" height="39.22" as="geometry" />
          </mxCell>
        </UserObject>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

and the generated (formatted) SVG file

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" style="background: #ffffff; background-color: #ffffff; color-scheme: light;" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="149px" height="42px" viewBox="-0.5 -0.5 149 42">
    <defs/>
    <rect fill="#ffffff" width="100%" height="100%" x="0" y="0" style="fill: rgb(255, 255, 255);"/>
    <g>
        <g data-cell-id="0">
            <g data-cell-id="1">
                <g data-cell-id="80YUNRsU_wij_iDbftCs-68">
                    <g>
                        <ellipse cx="74.5" cy="20" rx="73.5" ry="19.61" fill="none" stroke="#336600" stroke-width="2" pointer-events="all" style="stroke: rgb(51, 102, 0);"/>
                    </g>
                    <g>
                        <g transform="translate(-0.5 -0.5)">
                            <switch>
                                <foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
                                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 145px; height: 1px; padding-top: 20px; margin-left: 2px;">
                                        <div style="box-sizing: border-box; font-size: 0; text-align: center; color: #000000; ">
                                            <div style="display: inline-block; font-size: 16px; font-family: &quot;Helvetica&quot;; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">
                                                <i>
                                                    <font color="#000000" style="color: rgb(0, 0, 0);">Presentation ABC</font>
                                                </i>
                                            </div>
                                        </div>
                                    </div>
                                </foreignObject>
                                <text x="75" y="25" fill="light-dark(#000000, #ffffff)" font-family="&quot;Helvetica&quot;" font-size="16px" text-anchor="middle">Presentation ABC</text>
                            </switch>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

draw.io version :

• draw.io version 17.0.9

Desktop (please complete the following information):

• OS: MacOS

Additional context