CODEWITHSUNDEEP
javascriptjquerysvgcanvasfont-awesome
Parthiban Rajendran
Parthiban Rajendran

Reputation: 450

How to export font awesome icons in svg to png?

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:
enter image description here

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/

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

Upvotes: 2

Views: 7522

Answers (1)

MBaas
MBaas

Reputation: 7530

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.

Upvotes: 3

Related Questions