Add `viewBox` attribute to SVG

[sidharthv96]

Is your feature request related to a problem? Please describe. As the SVG is lacking viewBox attribute, scaling the output is a bit tricky.

https://github.com/mermaid-js/mermaid-live-editor/blob/cba9a6754dd0a33a0073ec50167efef35289ac72/src/lib/components/View.svelte#L122-L126

Describe the solution you'd like In addition to height and width, a viewBox property is also added. Also, if an option to specify an ID for the generated SVG is there, that would make the post-processing easier.

Additional context https://github.com/mermaid-js/mermaid-live-editor/pull/1457

[sidharthv96]

Btw, you can try out the feature in https://deploy-preview-1457--mermaidjs.netlify.app

[fskpf]

I think that the output SVG should mimic the behavior of the input SVG.

So if the input uses a viewBox with percentage width/height, then the output should do the same. Likewise, if the input SVG comes with a defined size, the output should keep this size, without switching to a more "responsive" viewBox.

IMO this would be the expected behavior because the output SVG would behave the same as the input SVG in different contexts.

I'll look into it when there's time to spare.