1

I'm trying to convert an SGV to PNG using the library svgToPng

This works great, other than the custom Google font I am using does not display properly.

What should look like this

enter image description here

Instead instead looks like this

enter image description here

Here is the complete code which includes the font as a base64 string, this renders fine in a browser, but when ran on nodeJS does not work. I've also tried having the font files with relative and absolute paths to the Google CDN, both of which do the same result.

I am wanting to run this as an Azure Function, so the option to install the font on my machine isn't an option which I have seen before in others answers.

var svgString = `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="800"><defs></defs><style>@font-face { font-family: 'Dokdo'; src: url(data:application/font-woff2;charset=utf-8;base64,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) format('woff2');    font-weight: normal;    font-style: normal;}</style><g><rect fill="rgb(80,80,80)" stroke="none" x="0" y="0" width="150" height="70"></rect><text fill="rgb(255,255,255)" font-family="Dokdo" font-size="50px" x="10" y="50">TEST</text></g></svg>`;

var buffer = await svg2png(Buffer.from(svgString));
var result = await buffer.toString("base64");
console.log(result);
user3284707
  • 3,033
  • 3
  • 35
  • 69

1 Answers1

0

If your SVG contains text and used on an <img> tag, web fonts will not render on all browsers due to security reasons, and will be displayed using system fonts (mostly Times New Roman).

You must embed the fonts first. Try https://vecta.io/nano to compress your SVG and download it as PNG. If it doesn't embed your fonts, use Sketch, Photoshop, ... to vectorize the font first.

S. Esteves
  • 415
  • 4
  • 14
  • But the font does render on SVG it's the PNG conversion that doesn't work. If you copy the SVG string from the source above it works. I am not fussed about IE as I do not support that and works on all the other modern browsers so i'm ok with that. I have already embedded the font within the SVG file in base 64 – user3284707 Jun 01 '20 at 13:57