The problem exists in Mike’s Saving SVG notebook pointed to by the OP. If you hit the “Save as PNG” button in that notebook, a PNG file downloads but is empty and the console gives the following error:
document.requestStorageAccess() may not be called in a sandboxed iframe without allow-storage-access-by-user-activation in its sandbox attribute.
There’s also a comment on that cell about this issue from Dave Kirkby that’s been resolved but not responded to.
Strangley, I use it in a number of my own notebooks without problem - here, for example. Now that I check, I get the same error message but the image downloads as expected.
… but to answer your actual question: You would have to wrap the HTML in a <foreignObject> and inject it into the SVG. And many programs will likely not be able to handle this construct.
Your best bet is probably to generate the legend as an SVG element, e.g. by converting the HTML legend via a library like dom-to-svg (which I haven’t used myself yet).
Note also that you can put SVGs in your SVGs because <svg> elements can be nested. So you may be able to combine your custom SVG legend and the plot SVG into a new SVG without having to modify the plot.
I also faced a similar issue recently. One part of the problem solved by using nested SVG like @mootari pointed out. I had to generate SVG based legend. The colour legend generated by Plot is not SVG. The notebook linked below has some code to generate SVG colour legend.
Another problem I faced was, D3 charts which get updated after initial render like wrapping labels or force directed changes. For this, I didn’t find a good solution. But for my use case, a user action-based export worked.
I needed to wrap the image of the chart with some title, attribution text, and logo. So, when the use presses ‘export as …’ I clone the current SVG node (usually finished rendering) create another nested SVG with chart, title, and logo and save as SVG or PNG. I made use of DOM.download.