Hi,
I’m not quite sure if I’m correct here but I’ll try my luck. 
What is the easiest way to convert this string into an image or PDF in my Angular project (Ionic, Cordova) ? Exporting the string as .svg works but all attempts to export it as an image fail on iOS. Does anyone have an idea with which library I could implement this quickly and easily?
I would probably have to draw the string on the canvas and then take a picture of it and export it, right?
Or are there any libraries that can interpret this and create an image or PDF directly from it?
SVG-String (Base64 characters change to XXX)
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1394" height="1000" style="-webkit-transform: translate(0px,0px)" viewBox="28.5 196 494 200">
<defs xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">@font-face { font-family: FontAwesome; src: url("fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("fontawesome-webfont.woff?v=4.7.0") format("woff"), url("fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("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; border: 2px solid transparent; 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: 6px auto 1fr 6px; grid-template-rows: 6px auto auto 6px; grid-template-areas: ". . . ." ". e1 e2 ." ". r1 r1 ." ". . . x"; overflow: hidden; padding: 0px; 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-row-start: e2; grid-column-start: e2; grid-row-end: e2; grid-column-end: e2; }.node-container .node-box-container, .node-container .node-box { border-radius: 4px; }.node-container .node-text { grid-row-start: e2; grid-column-start: e2; grid-row-end: e2; grid-column-end: e2; 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-row-start: e1; grid-column-start: e1; grid-row-end: e1; grid-column-end: e1; width: 50px; height: 50px; border-radius: 2px; background-position: center; background-size: cover; }@font-face { font-family: mdzRoboto; src: url("Roboto-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("Roboto-Regular-webfont.woff") format("woff"), url("Roboto-Regular-webfont.ttf") format("truetype"), url("Roboto-Regular-webfont.svg#robotoregular") format("svg"); font-weight: 400; font-style: normal; }@font-face { font-family: mdzRoboto; src: url("Roboto-Light-webfont.eot?#iefix") format("embedded-opentype"), url("Roboto-Light-webfont.woff") format("woff"), url("Roboto-Light-webfont.ttf") format("truetype"), url("Roboto-Light-webfont.svg#robotolight") format("svg"); font-weight: 300; font-style: normal; }@font-face { font-family: mdzRoboto; src: url("Roboto-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("Roboto-Bold-webfont.woff") format("woff"), url("Roboto-Bold-webfont.ttf") format("truetype"), url("Roboto-Bold-webfont.svg#robotobold") format("svg"); font-weight: 700; font-style: normal; }* { font-family: Roboto, mdzRoboto, sans-serif; }
</style>
</defs>
<g transform="translate(-163,-290) scale(1)" style="-webkit-transform: translate(0px,0px)">
<path class="mmp-container_branch mapVizContainer_branch p_root" id="6bfbb80e-8fe4-0b25-2954-159327ce0afb_branch" d="M163,290C264.5,290,264.5,290,398,290" style="fill: none;"/>
<g class="mmp-container_node mapVizContainer_node right" id="root" transform="translate(163,290)">
<foreignObject x="-84.5" y="-44" width="185" height="100" style="padding: 0px 8px;">
<div xmlns="http://www.w3.org/1999/xhtml" class="node-container root">
<div class="node-box-container">
<div class="node-box image">
<div class="node-image" style="background-image: url("data:image/png;base64,XXX;);"></div>
<div class="node-text">Test Map 1</div>
</div>
</div>
</div>
</foreignObject>
</g>
<g class="mmp-container_node mapVizContainer_node right" id="6bfbb80e-8fe4-0b25-2954-159327ce0afb" transform="translate(398,290)">
<foreignObject x="-58.5" y="-39" width="133" height="90" style="padding: 0px 8px;">
<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("data:image/png;base64,XXX");"></div>
<div class="node-text">test</div>
</div>
</div>
</div>
</foreignObject>
</g>
</g>
</svg>
All previous attempts have resulted in a strange problem. When I try to export an image, the images of the nodes in my mind map sometimes simply disappear. In the view in the app itself, everything is OK. But when exporting, I draw the string on the canvas and then take a picture of it. This also works, so the structure is there but the images are not. Only after 3 or 4 exports are the images visible. This only happens in the Safari browser or the WebView that Cordova uses for iOS. In Chrome and my Android app, everything is OK. I’ve already tried everything possible… Must be something with Safari. But anyway, if anyone has an idea for a simple and effective form of implementation, that would be cool.
Thanks a lot!