SVG: how to scale font sizes when scaling SVG document?

Question

Questions like this , this , this , this , and this on SVG scaling did not help.

What's the best way to scale font sizes when scaling SVG documents?

Assume an original SVG document of 500x1000. To fit into our design viewport, we scale the document to 250x500 and allow users to do some editing like repositioning and changing text. When editing is done, we scale back to 500x1000 before exporting as a PNG image.

Currently, we manually recompute the font sizes with each scale. If the font size was 20 at the original 500x1000 size, we change the font size to 10 when scaling down to 250x500.

We're leery of using the scale transform attribute as users may reposition or rotate elements while editing the 250x500 version.

We need the 500x1000 version to look proportionally like the 250x500 version.

Is there a better way to scale font sizes? Ideally, we could use percentages for font sizes like with an element's width and height, but this doesn't work.

Or is manually computing and setting the font sizes the best way?

Answer 1

Using javascript you can change the font size accordingly

document.getElementById('svgID').style.fontSize = "25px";