Line breaks cause the exported svg file to be corrupted

[webarchymeta]

If one insert <br/> into the label of a node in the flowchart graph, it works on the live editor. But when one export the graph to an svg file, then the file can not be correctly displayed

It appears that the <br/> inserted in the editor is changed to <br>, which is the legal line breaker in html, in the output svg file, which causes the problem because svg is more like xml than html.

[kohenkatz]

I see this too. I have confirmed that when I open the downloaded SVG and replace <br> with <br/>, it works properly.

[oravecz]

node(<div>first line</div><div>second line</div>) 

may be a workaround

[KevinWhalen]

I think this is because HTML has void elements, whereas XML and SVG do not. Using the XMLSerializer on the innerHTML might be enough to fix this.

In src/components/Preview.js the following:

event.target.href = `data:image/svg+xml;base64,${Base64.encode(this.container.innerHTML)}`

would (roughly) become:

event.target.href = `data:image/svg+xml;base64,${Base64.encode(new XMLSerializer().serializeToString(this.container.innerHTML))}`

Off-hand, I do not have a great way to test this beyond a browser console (where it appears to be fine).

References

• https://hackernoon.com/to-close-or-not-to-close-4365d24853ff
• https://stackoverflow.com/a/14021633/3003133

[cmwshang]

UPDATED COMMENT to include code syntax so the brs won't be interpreted Not being able to render line breaks is a showstopper since we cannot convert any of these into images (SVG or PNG) with the line editor so we can't create our output documents (PDF) to embed images nor just create an image for someone else to view. I have tried the <div></div> or <p></p> suggestions and still have issues. Basically if some form of <br> can be used, that would be the best solution. From my research (which you can use the example graph on the live editor to test) I have found:

If you use <br> in the chart and then convert to SVG or PNG, it correctly inserts a linefeed in the chart view, but breaks the SVG conversion since SVG does not accept <br> as proper syntax. It does accept <br /> BUT, if using Safari, <br /> is displayed directly in the chart instead of being converted to a linefeed although it does change it to <br /> in the SVG which does not cause a syntax error - if using Firefox with the plugin, the live editor correctly doesn't display <br/> but it is then being converted to <br> for SVG, so it still breaks.

Use of <br> or <br/> will not render a PNG at all. In Safari, if use <br /> it displays in the live editor and in the PNG output as <br />, if use Firefox, the <br /> is not displayed in the chart, but it still wont render a PNG and it is still converts it to <br> in the SVG which again causes a syntax error.

You can easily try this with the example graph - below I have added <br /> but you can try any combinations:

graph TD
  A[Christmas] -->|Get money| B(Go shopping)
  B --> C{Let me<br />think}
  C -->|One| D[Laptop]
  C -->|Two| E[iPhone]
  C -->|Three| F[fa:fa-car Car]