make SamsaGlyph.prototype.svg dynamically sized and responsive

[wentin]

update SamsaGlyph.prototype.svg function so the exported SVG's width and height is set dynamically with font.unitsPerEm this helps with fonts with non-standard canvas size. use viewBox instead of width and height to make the svg responsive

[Lorp]

I don’t think a viewBox based on font.unitsPerEm is the way to do it, because all glyphs are scaled by 1000/unitsPerEm by a group in the SVG.

BTW the reason I am not scaling the entire SVG is that I want to keep the sizes of UI elements (cartesian axes, point icons, arrows, outline stroke thickness) consistent for any value of unitsPerEm.

[wentin]

@Lorp scaled by 1000/unitsPerEm by a group makes sense to me, in that case, the SVG width height should be hardcoded 1000. However I don't see the group being scaled when I call the glyph.decompose(tuple).svg(). I made a simplified Codepen to demostrate the issue I see. My test font unitsPerEm is 240, and the glyph is rendered based on the unitsPerEm inside the 1000 by 1000 svg https://codepen.io/wentin/pen/eYeEZww?editors=1011

[Lorp]

The svg() method has an optional style argument. Try supplying {transform: "scale(${1/font.unitsPerEm})"}. This is how the web app calls the method.

SamsaGlyph.prototype.svg = function (style={}) {
...