如何将 svg 中的字体真棒图标导出为 png？

Question

I am trying to export mermaid to png. I have been successful to an extent, however, I am stuck exporting the font awesome icons in the svg. They are called simply via fa class, and usual canvas export is not considering them in the export. In below MWE, you could see car icon is missing in PNG output. Kindly help.

My understanding is, everything has to be inline in svg for canvas export to work, but I could not find a way how to do that, because in mermaid, one could insert any font awesome icon as he needs for the graphs.

MWE

function drawInlineSVG(svgElement, ctx, callback)
{
    var svgURL = new XMLSerializer().serializeToString(svgElement);
    console.log(svgElement);
    // console.log(svgURL);
    var img = new Image();
    img.onload = function ()
    {
        ctx.drawImage(this,0,0);
        callback(this);
    }
    // img.src = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svgURL);
    img.setAttribute( "src", "data:image/svg+xml;base64," + btoa( svgURL ) );
}

Output:

I have only included the export function from svg to png above, for brevity. The complete code is available in Jsfiddle : https://jsfiddle.net/parthi2929/r6wb9ka5/6/

• Note car is missing above output (png part). Also note change of font. I want to export png exactly as seen in svg.
• One could also note in jsfiddle, i have tried few more methods including using canvg , rasterizeHTML but former, not even renders any font, while latter gives same result with car missing.

I could not reproduce in SO's own snippet area as it was throwing error, so kindly excuse on that.

Answer 1

I had exactly the same question and Google took me here. I'm surprised you did not get a reply earlier. I found the site faToPng that provides a converter (to .PNG, .JPG or base64) which you can use to do that. Unfortunately it does not support FA4.

Update 2021 : the site I linked to is no more, the domain now points to something unrelated to our subject.

In the process I also came across this site which is an online SVGtoPNG-Converter that helped with some other files I was dealing with.

Alternatively, here's a Chrome plugin that can be used for the same purpose.