foreignObject and xhtml

[eKoopmans]

Hi there, nice-looking project! I'm new to SVG. I've been investigating this approach of rendering HTML inside an SVG element, using:

<foreignObject>
  <div xmlns="http://www.w3.org/1999/xhtml">
  </div>
</foreignObject>

From what I can tell, you don't support <foreignObject>, is that right? It seems like it would be impossible to support. In any case, it might be worth adding to your "Unsupported" list on the readme!

[alafr]

Yes it's not supported and out of the scope of this repository (it's not SVG). However if you know any good html -> PDF converter I could add a way to use it with a callback every time a foreignObject/xhtml is encountered. In the meantime I add it to the unsupported list.

It is possible to save an image from the canvas and insert the image in PDFKit (but it will pixelise the text and increase the size of the PDF file).

[eKoopmans]

Great, thanks. I've been working on an html2pdf tool, but it wouldn't be able to plug-and-play with SVG-to-PDFKit without modifications. It uses html2canvas to render the HTML to an image - you could use that, but it has its problems (one of the reasons I'm looking for alternatives).

[rebeccaswebsite]

Hi there, do you know of a way that I can convert foreignObject elements inside an svg into a format which is compatible with this library, like a text tag? I'm currently using this library to export some charts into a pdf and I'm losing the labels in the process, as they're in a foreignObject.

[rebeccaswebsite]

update for anyone finding this: I've managed to change the foreignObject elements into text elements using JavaScript so the labels are displaying properly now

[alafr]

Hi, i don't know any solution other than converting them to images with canvas (as said above it could be done with a callback function called when a foreignObject is detected).
If the foreignObjects are very simple and have always the same syntax it might be possible to use a 'replace' with some regex to convert them before using svg-to-pdfkit.

[idrisadetunmbi]

update for anyone finding this: I've managed to change the foreignObject elements into text elements using JavaScript so the labels are displaying properly now

Hi @rebeccaswebsite, please what approach did you take in solving this?