0

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?

Crashalot
  • 33,605
  • 61
  • 269
  • 439
  • 1
    I would say that you don't need to scale the font. To be sure I would need to see your code. A simplified version of it. What you need is a `vewBox` attribute for your `` element, for example `vewBox="0 0 250 500"`. A viewBox attribute is defining the size and the position of the SVG viewport in user units. When you resize the `` element from 250x500 to 500x1000 the viewport is still 250x500 user units. – enxaneta Jan 02 '19 at 08:48
  • If you have an `` one user unit is equivalent to 1px. If you do this: `` the width of the SVG is still 250 user units but one user unit is equivalent to 2px. The font size is defined in user units, although you define it in CSS like this: font-size: 16px – enxaneta Jan 02 '19 at 08:48

1 Answers1

-2

Using javascript you can change the font size accordingly

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

vic
  • 134
  • 1
  • 11