SVG Font sizes


#1

… 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.


#2

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