I'm trying to use rsvg-convert
as a command line tool to convert svgs to pngs, and it works except for the fonts. None of the ways I've tried to link or embed a font into the svg seem to work for libRsvg to see it in the rendering process.
The way I set things up at first had the font as a local woff2
file linked in the css @font-face
. This worked as I was using a web browser (macOS Safari) to view the svgs in progress. But now I want to convert to png, this method doesn't seem to work.
For completeness, here's a minimal example:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 20 20" width="100px" height="100px">
<style type="text/css">
@font-face {
font-family: "Valkyrie";
font-style: normal;
font-weight: normal;
font-stretch: normal;
font-display: auto;
src: url("./.font/valkyrie/valkyrie_ot_a_regular.woff2") format("woff2");
}
text {
font-family: "Valkyrie";
}
</style>
<text x="0" y="0" font-size="10" text-anchor="middle" dominant-baseline="central">ABC</text>
</svg>
Second, I tried embedding the font in base64 form; same as above but with the @font-face src
attribute line as this (where "[...]" is replaced with the base64 text converted via this tool):
src: url("data:application/octet-stream;base64,[...]") format("woff2");
This, again, works in the browser but not in conversion.
At this point I'm not sure where in the process I'm going wrong.
Further information: I'm on macOS, using librsvg
via Homebrew, and I have other formats (otf, ttf) for the fonts I'm using, in case woff2 doesn't work here.
What ended up working was:
Remove the whole @font-face
declaration and install the otf
version of the font at the macOS level. This lets librsvg
see the font in a way it couldn't with the local font file, it seems.