SVG to PNG Conversion Issue: Text Distortion with Sharp Library

[ab-etemadi]

Issue Description:

The issue is that when converting an SVG image to PNG using the Sharp library, the text inside the SVG is not correctly converted. Instead of the expected text "Ab Etemadi," the converted PNG shows "[][][][][]" in place of the text.

Steps to Reproduce:

1. Use the provided SVG code:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 252 144" style="width:100%;height:100%;display:block" xml:space="preserve">
  <text id="text1" font-family="'Arial'" transform="translate(17.864 39.929)" >Ab Etemadi</text>
  <text id="text2" font-family="'sans'" transform="translate(18.346 52.351)" style="fill:#1f222d;;font-size:7px">Web Developer</text>
</svg>

2. Use the following code with Sharp version 0.30.2:

async generateThumbnail(svg): Promise<PrintAsset> {
    const objectId = generateBase64Uuid();
    return (
      sharp(Buffer.from(svg.Document.toString(), 'utf-8'))
        .png()
        .toBuffer()
        .then((buffer) => this.uploadToS3(objectId, buffer, 'image/png'))
        .then(() => ({ objectId }))
    );
}

Expected Result: The generated PNG should correctly display the text "Ab Etemadi" and "Web Developer," matching the original SVG.

Actual Result: The converted PNG displays "[][][][][]" instead of the expected text.

[lovell]

Please see the following documentation for help debugging font discovery:

https://sharp.pixelplumbing.com/install#fonts https://www.freedesktop.org/software/fontconfig/fontconfig-user.html#DEBUG

Please also upgrade to the latest version of sharp.

Watch out for quotes around font names. Some platforms interpret quotes as being part of the font name. (The issue template asked you to provide information about your platform but this was ignored/deleted.)

[ab-etemadi]

Thanks @lovell , I think the problem is with Pango Docker: node:16-alpine

[lovell]

It looks like you've got a problem with fonts on this machine in general. How are you installing fonts? Via apk? Which packages?

Are you able to try a less-minimal Linux container e.g. one built on Debian instead of Alpine?

[lovell]

@tt-abetemadi Were you able to make any progress with this?

[ab-etemadi]

Apologies for the delay, @lovell .

Our application runs on Docker node:16-alpine as the host. In local environments, it utilizes OS fonts. However, by default, node:16-alpine does not include any fonts. Therefore, we need to install the required font during the Docker image-building process to resolve this issue.

Thank you for your attention to this matter ❤️