Unexpected Result while converting an svg to font

[alapanbagchi]

I was trying to convert a bunch of svgs to font using this code but it has led to some weird results

const uploadPath = path.join(__dirname, `../temp/svg/${userid}`)
const fontPath = path.join(__dirname, `../temp/fonts/${userid}`)

const options: SvgToFontOptions = {
            src: uploadPath,
            dist: fontPath,
            fontName: name,
            useNameAsUnicode: true,
        }
        await createSVG(options)
        const ttf = await createTTF(options)
        await createWOFF(options, ttf)
        await createWOFF2(options, ttf)
        await createEOT(options, ttf)

Ths is the original svg used

This is the result obtained

[jaywcjlove]

@alapanbagchi If you convert to fonts, you can only use <path>, many tags of svg cannot be used.

[alapanbagchi]

Hi, thanks for clearing that up I managed to fix that issue by converting it into one long single <path> which fixed the above mentioned issue. However I encountered a new problem.

So, here is the new svg

and this is the resulting font

As you can see it has lost its transparency. I dont know how to fix that Thanks

[jaywcjlove]

In fonts, fill-rule="evenodd" for svg is also not supported.

[alapanbagchi]

That makes sense, thanks for your help

[schmidt-oliver]

Hi @alapanbagchi, please try using SVGFixer to outline the icons before converting them to font. It worked like a charm in my case.

[Opty1712]

Hi @alapanbagchi, please try using SVGFixer to outline the icons before converting them to font. It worked like a charm in my case.

confirm it works!

await SVGFixer(resolve(process.cwd(), 'svg'), resolve(process.cwd(), 'tmp'), {
  showProgressBar: true,
  throwIfDestinationDoesNotExist: false,
}).fix();