Text in SVG does not use proper font when drawn to an img element in Chrome

Question

When using font-family to render text in SVG, Chrome 32.0.1700.107 will pick an appropriate font. But if I use the same SVG as an input to an img element, an incorrect font is used. If I specify a specific font that I know is on my system, then the font is rendered properly in both the svg and img elements. A simple example:

<svg id="scalingSvg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">
    <rect width="99%" height="99%" fill="white" stroke="black"/>
    <text id="myText" x="50%" y="50%" font-family = "monospace" font-size = "24">M~</text>
</svg> 
<img id="svgImage" x="0" y="0" height="100" width="100"/>

var xml = (new XMLSerializer).serializeToString(svg);
img.src = "data:image/svg+xml;charset=utf-8,"+encodeURIComponent(xml);

Here it is on jsfiddle. The pulldown has generic font-families, but also specific fonts. In particular, if you set the pulldown to Courier New, the result is what I expect - the font is properly rendered in both images. But if you change the font to "monospace", the SVG element will correctly find Courier New, while the img element is rendered in an incorrect non-monospace font.

IE, Firefox, and Safari all work as I'd expect - an appropriate font is found for the font-family in both the svg and img elements. Have I found a bug in Chrome, or is there a subtlety to specifying fonts that I'm just not getting?

Seems like it probably is a bug in Chrome. You should report it. — Paul LeBeau

Foo Bar Foo Bar · Accepted Answer · 2014-10-09T16:58:54

This looks related to "Issue 231572: Hebrew text doesn't render in SVGImage (does render in SVG DOM)". SVGImage has source restrictions that the inline SVG renderer does not:

Comment #3: SVGImages are disallowed from loading external resources, but I guess they're not disallowed from loading cached resources?

Comment #4: Do we consider fonts as external resources? I suppose we do. This test does not work if included in the html as embed or object either.

Text in SVG does not use proper font when drawn to an img element in Chrome

1 Answers