SVG conversion via Canvas API with foreignObject does not work properly

Question

I would like to publish my app beside Android on Apple devices as well. Unfortunately I have a problem with the "porting" that I just can't solve. My app is running great on Android.

The problem is I have an SVG which needs to be converted to an image. The starting point for the SVG is a mindmap with several nodes. Each node is a <foreignObject> in this SVG and contains various data. Among other things this can also contain a small base64 encoded image. The SVG is displayed completely correctly in the browser. For exporting the mindmap I have to convert it to an image. For the conversion I use the Canvas API. This works great on Android but on Mac and Iphone it always exports the mindmap without the images. I have tried everything possible. But can't get any further.

Who is rendering the graphics? Is it possible that the Canvas API on Safari is a different version and may not be able to do things that are supported in Chrome? Could it have problems with the base64 encoding? Because otherwise it shows everything but the images are missing.

Does anyone have an idea and could help me? It hangs really only on the one thing and I do not get it. :(

Or are there any good alternatives to the Canvas API? With which I can achieve better results here?

Thanks a lot.

Here is a simple example with two nodes. Root and N1.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="300" height="300" viewBox="263 376 444 166">
    <defs xmlns="http://www.w3.org/1999/xhtml">
        <style type="text/css">@font-face { font-family: FontAwesome; src: url("http://localhost:3333/fontawesome-webfont.eot?#iefix&amp;v=4.7.0") format("embedded-opentype"), url("http://localhost:3333/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("http://localhost:3333/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("http://localhost:3333/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("http://localhost:3333/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg"); font-weight: normal; font-style: normal; }.mmp-container_node:not(.hidden) { cursor: pointer; }.mmp-container_branch { stroke-width: 2px; stroke: rgba(0, 0, 0, 0.1); }.node-container { display: table; box-sizing: border-box; padding: 3px; border-radius: 8px; color: rgba(0, 0, 0, 0.75); background-color: rgba(0, 0, 0, 0.06); }.node-container.root { padding: 8px; }.node-container.root:not(.selected) { background-color: rgba(0, 0, 0, 0.1); }.node-container.root .node-box { border-color: rgba(0, 0, 0, 0.4); }.node-container .node-box-container { display: block; background-color: rgb(255, 255, 255); max-width: 200px; width: max-content; }.node-container .node-box { display: grid; grid-template-columns: 50px 1fr 5px auto; grid-template-rows: auto auto; overflow: hidden; padding: 2px; border: 3px solid rgba(0, 0, 0, 0.2); background-color: rgb(255, 255, 255); }.node-container .node-box.image .node-text, .node-container .node-box.icon .node-text { grid-column-start: 2; grid-column-end: span 2; }.node-container .node-box-container, .node-container .node-box { border-radius: 4px; }.node-container .node-text { grid-column-start: 1; grid-column-end: span 3; grid-row-start: 1; grid-row-end: span 2; overflow-wrap: break-word; align-self: center; display: block; max-width: 200px; font-size: 13px; padding: 4px 8px; }.node-container .node-image { align-self: center; grid-column-start: 1; grid-column-end: auto; grid-row-start: 1; grid-row-end: auto; width: 50px; height: 50px; border-radius: 2px; background-size: cover; background-position: center center; }@font-face { font-family: mdzRoboto; src: url("http://localhost:3333/Roboto-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("http://localhost:3333/Roboto-Regular-webfont.woff") format("woff"), url("http://localhost:3333/Roboto-Regular-webfont.ttf") format("truetype"), url("http://localhost:3333/Roboto-Regular-webfont.svg#robotoregular") format("svg"); font-weight: 400; font-style: normal; }@font-face { font-family: mdzRoboto; src: url("http://localhost:3333/Roboto-Light-webfont.eot?#iefix") format("embedded-opentype"), url("http://localhost:3333/Roboto-Light-webfont.woff") format("woff"), url("http://localhost:3333/Roboto-Light-webfont.ttf") format("truetype"), url("http://localhost:3333/Roboto-Light-webfont.svg#robotolight") format("svg"); font-weight: 300; font-style: normal; }@font-face { font-family: mdzRoboto; src: url("http://localhost:3333/Roboto-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("http://localhost:3333/Roboto-Bold-webfont.woff") format("woff"), url("http://localhost:3333/Roboto-Bold-webfont.ttf") format("truetype"), url("http://localhost:3333/Roboto-Bold-webfont.svg#robotobold") format("svg"); font-weight: 700; font-style: normal; }* { font-family: Roboto, mdzRoboto, sans-serif; }</style>
    </defs>
    
    <g transform="translate(0,0)">
        <path class="mmp-container_branch mapVizContainer_branch p_root" id="d975782c-d5d9-26b7-d540-287ca3999278_branch" d="M353.5,459C455,459,455,459,588.5,459" style="fill: none;"/>
    
        <g class="mmp-container_node mapVizContainer_node right" id="root" transform="translate(353.5,459)">
            <foreignObject x="-40.5" y="-26" width="105" height="52" style="padding: 0px 12px;">
                <div xmlns="http://www.w3.org/1999/xhtml" class="node-container root">
                    <div class="node-box-container">
                        <div class="node-box">
                            <div class="node-text">Root
                            </div>
                        </div>
                    </div>
                </div>
            </foreignObject>
        </g>
    
    
        <g class="mmp-container_node mapVizContainer_node right" id="d975782c-d5d9-26b7-d540-287ca3999278" transform="translate(588.5,459)">
            <foreignObject x="-44.5" y="-33" width="113" height="66" style="padding: 0px 12px;">
                <div xmlns="http://www.w3.org/1999/xhtml" class="node-container">
                    <div class="node-box-container">
                        <div class="node-box image">
                            <div class="node-image" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAFcCAYAAAA+mUwJAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAB9KADAAQAAAABAAABXAAAAAA3ORrXAAAOqklEQVR4Ae3VgQkAIRADQbX/nlWwCpd5vgAzF8jcY9zfR4AAAQIECPwssH5+vLcTIECAAAECT8CgawIBAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgYNB1gAABAgQIBAQMeuCIIhAgQIAAAYOuAwQIECBAICBg0ANHFIEAAQIECBh0HSBAgAABAgEBgx44oggECBAgQMCg6wABAgQIEAgIGPTAEUUgQIAAAQIGXQcIECBAgEBAwKAHjigCAQIECBAw6DpAgAABAgQCAgY9cEQRCBAgQICAQdcBAgQIECAQEDDogSOKQIAAAQIEDLoOECBAgACBgIBBDxxRBAIECBAgcABP4AS2ajGNXwAAAABJRU5ErkJggg==&quot;);"></div>
                            <div class="node-text">N1</div>
                        </div>
                    </div>
                </div>          
            </foreignObject>
        </g>
    </g>

</svg>