SVG Font sizes

… as you can tell I’m doing some work with SVG ATM!!

Certain fonts seem to be coming out a different size from their rendering in Illustrator. Here’s an example svg:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="TestLayout001" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" width="200px" height="200px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
  <rect id="slider4" x="35" y="34" style="fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;" width="27" height="145"/>
  <rect id="slider3" x="66" y="34" style="fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;" width="27" height="145"/>
  <rect id="slider2" x="97" y="34" style="fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;" width="27" height="145"/>
  <rect id="slider1" x="128" y="34" style="fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;" width="27" height="145"/>
  <text id="JustText" transform="matrix(1 0 0 1 8.5 23)" style="font-family:'BrandonGrotesque-Regular'; font-size:12px;">Some simple sliders</text>
</svg>

It comes out like this with JUCE on the left and Illustrator on the right:

This uses a font with a custom typeface (although I’m not sure if that makes a difference yet). If I change the font to Arial in Illustrator it looks as close as I can expect:

Even though the SVG cites the font size in px I wonder if it should be points so I tried this change in the font returned in SVGState::getFont():

...
        static constexpr float defaultFontSize = 12.0f;
        
        return (family.isEmpty() ? Font (defaultFontSize, style)
                                 : Font (family, defaultFontSize, style)).withPointHeight (fontSize);
    }

And this is better with my custom font:

And the same with Arial:

I might be opening a can of worms in terms of px vs pt in the SVG spec here but this seems to work with system fonts on macOS at least.

Cheers Martin, that sounds like a good plan to me too - will push something shortly.

1 Like