javascript - Including fonts when converting SVG to PNG - Stack Overflow

admin管理员组

文章数量:1287637

I am trying to generate some SVG and allow users of my website to download these SVGs as PNGs.
After reading this I get all my external images included in the downloaded PNG.
Now I am trying to get the fonts on the PNG correct. This seems to answer that and so I added:

<defs>
    <style type="text/css">
        @font-face {
            font-family: Parisienne;
            src: url('data:application/font-woff;charset=utf-8;base64,.....')
        }
    </style>
</defs>

Where ..... is base64 encoded woff2 font. And then used it in text like so:

<text x="55" y="55" stroke="red" font-family="Parisienne">Blah</text>

The font gets displayed in the browser correctly (I haven't installed it on my OS), however it is still not included in the PNG.
Do I have to add some additional processing to the script I used from the first link?
Thanks.

--EDIT--
I have been asked for a plete example, here it is:

<svg id="generated-svg" class="generated-svg" width="300px" height="500px"
    version="1.1" xmlns="" xmlns-xlink="">
  <defs>
    <style type="text/css">
      @font-face {
        font-family: Parisienne;
        src: url('data:application/font-woff;charset=utf-8;base64,.....')
      }
    </style>
  </defs>

  <rect width="300" height="500" fill="#222"/>
  <text x="55" y="55" stroke="red" font-family="Parisienne" font-size="20px">Test text</text>
</svg>

I haven't added the base64 encoded font as it's simply too big. But you can encode any font you like and replace the ....... I am using Parisienne.
Here is working jsfiddle with the actual font: / In my browser this is the output:

Whilst after using the download script above I would end up with:

I am trying to generate some SVG and allow users of my website to download these SVGs as PNGs.
After reading this I get all my external images included in the downloaded PNG.
Now I am trying to get the fonts on the PNG correct. This seems to answer that and so I added:

<defs>
    <style type="text/css">
        @font-face {
            font-family: Parisienne;
            src: url('data:application/font-woff;charset=utf-8;base64,.....')
        }
    </style>
</defs>

Where ..... is base64 encoded woff2 font. And then used it in text like so:

<text x="55" y="55" stroke="red" font-family="Parisienne">Blah</text>

The font gets displayed in the browser correctly (I haven't installed it on my OS), however it is still not included in the PNG.
Do I have to add some additional processing to the script I used from the first link?
Thanks.

--EDIT--
I have been asked for a plete example, here it is:

<svg id="generated-svg" class="generated-svg" width="300px" height="500px"
    version="1.1" xmlns="http://www.w3/2000/svg" xmlns-xlink="http://www.w3/1999/xlink">
  <defs>
    <style type="text/css">
      @font-face {
        font-family: Parisienne;
        src: url('data:application/font-woff;charset=utf-8;base64,.....')
      }
    </style>
  </defs>

  <rect width="300" height="500" fill="#222"/>
  <text x="55" y="55" stroke="red" font-family="Parisienne" font-size="20px">Test text</text>
</svg>

I haven't added the base64 encoded font as it's simply too big. But you can encode any font you like and replace the ....... I am using Parisienne.
Here is working jsfiddle with the actual font: https://jsfiddle/z8539err/ In my browser this is the output:

Whilst after using the download script above I would end up with:

• javascript
• svg
• fonts
• png

Share Improve this question Follow edited Jan 7, 2018 at 23:38 Daniel Gruszczyk asked Jan 5, 2018 at 0:16 Daniel GruszczykDaniel Gruszczyk 5,6221010 gold badges5252 silver badges8787 bronze badges 7

• "The font gets displayed on SVG correctly" – do you also have this font installed on your system? If you do, de-install it and check if it still works. That may rule out a few causes. – Jongware Commented Jan 7, 2018 at 21:52
• I haven't installed it on my system – Daniel Gruszczyk Commented Jan 7, 2018 at 21:55
• I have added an example – Daniel Gruszczyk Commented Jan 7, 2018 at 22:15
• Apologies for keeping asking questions – how do you exactly construct your HTML file? There seem to be different ways – and I get a fully blank PNG with some, no text at all. That makes your problem not quite locally reproducible ... – Jongware Commented Jan 7, 2018 at 22:53
• Not sure what you mean by "how i construct my html". Like everyone else? But here is jsfiddle for your convenience: jsfiddle/z8539err – Daniel Gruszczyk Commented Jan 7, 2018 at 23:31

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 8 +100

I'm able to include the font in the png itself with the following code, give it a try

var svg = document.getElementById('generated-svg');
var svgData = new XMLSerializer().serializeToString( svg );

var canvas = document.createElement("canvas");
canvas.width = 300;
canvas.height = 500;
var ctx = canvas.getContext("2d");

//display image
var img = document.createElement( "img" );
img.setAttribute( "src", "data:image/svg+xml;base64," + btoa( svgData ) );


img.onload = function() {
ctx.drawImage( img, 0, 0 );

//image link
console.log( canvas.toDataURL( "image/png" ) );


//open image 
window.location.href=canvas.toDataURL( "image/png" );
};

https://jsfiddle/user3839189/hutvL4ks/1/

A working proof of concept project on GitHub to address OP problem statement.

https://github./nirus/SVG-PNG-Convert

Built generic Javascript module that can be modified and used anywhere. Read the documentation. Give it a try!

本文标签： javascriptIncluding fonts when converting SVG to PNGStack Overflow