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