Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Setting font-family on SVG text element has no effect

See original GitHub issue

I’m unable to change the font of the text in the SVG. I tried to run FC_DEBUG and it looks like no matter what is selects Liberation Serif.

I have fontconfig version 2.12.6 installed on my system.

This is the SVG I’m using <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108 16" version="1.1"><text font-family="sans-serif" font-size="12px" x="54" y="12" fill="#000000" text-anchor="middle" >Fancy Text</text></svg>

'use strict';
const sharp = require('sharp');
const fs = require('fs');

let buffer = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108 16" version="1.1"><text font-family="sans-serif" font-size="12px" x="54" y="12" fill="#000000" text-anchor="middle" >Fancy Text</text></svg>';

sharp(Buffer.from(buffer))
    .toBuffer().then(buffer => {
        fs.writeFile('Sans-serif.png', buffer, (err) => { });
});

If I view the same SVG in the browser it looks correct.

– Esben N.

Issue Analytics

State:
Created 5 years ago
Comments:8 (4 by maintainers)

Top GitHub Comments

1reaction

lovellcommented, Jan 17, 2019

Perfect, thank you, it looks like you’ve run into https://gitlab.gnome.org/GNOME/librsvg/issues/319 that was fixed in librsvg v2.44.0. You can workaround this for now by wrapping the font-family names in quotes.