Fonts missing from SVG file when placed in <img> data URI or <canvas>

Question

I am checking the use of fonts in SVG and the Canvas (html5). I have translated a svg file in urldata. I got this result:

data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjYxMiIgaGVpZ2h0PSIzOTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8ZGVmcz4KICA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPkBpbXBvcnQgdXJsKGh0dHA6Ly8xMjcuMC4wLjE6ODAwMC9WZWdhRWRpdG9yL3N0YXRpYy9Nb2RlbGVQb2wvRGVzeXJlbC5jc3MpPC9zdHlsZT4KIDwvZGVmcz4KIDxnPgogIDx0aXRsZT5DYWxxdWUgMTwvdGl0bGU+CiAgPHRleHQgdHJhbnNmb3JtPSJtYXRyaXgoMi42NDI4NiwgMCwgMCwgMi41MzMzMywgLTQ2MC41MiwgLTIxNi45NjcpIiBmaWxsPSIjMDAwMDAwIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMCIgeD0iMjc2Ljg1ODExIiB5PSIxNTQuNjA1MjYiIGlkPSJzdmdfMiIgZm9udC1zaXplPSIyNCIgZm9udC1mYW1pbHk9IkRlc3lyZWwiIHRleHQtYW5jaG9yPSJtaWRkbGUiIHhtbDpzcGFjZT0icHJlc2VydmUiPmhlbGxvPC90ZXh0PgogPC9nPjwvc3ZnPg==

When I copy and paste on the address brosser all that ( Firefox, Chrome par example) I can display the word "hello" using the Desyrel font (If you tried that, you won't display the Desyrel font). On the other hand, I have tried to use the same urldata dans le canvas (html5) using this code:

.............
                        var imageObj = new Image();

                imageObj.onload = function() {

                    context.drawImage(imageObj, 0, 0);

                 };
...........
         imageObj.src=urldata; 

In the Canvas (html5) I can display also "hello" but the font Desyrel is missing. I tried other fonts and the result is the same.

Does anyone know how to display in a html5 canvas the font required? I tried also imageObj.src=myfile.svg; And again the font is not taken in account. I think the html5 canvas can display svg images but is there a problem about the fonts? Thansk for your answer, any solution?

Answer 1

An image must be self contained to prevent privacy leaks. Your base64 encoded image contains this:

<style type="text/css">@import url(http://127.0.0.1:8000/VegaEditor/static/ModelePol/Desyrel.css)</style>

This won't work as it tries to access data outside the image file. You'd have to url or base64 encode the css file and embed it into the image as a data url just as you did with the image itself.

Once all of the data for the image is in the one file it should work.

Answer 2

I had this problem too and I wanted to better understand Robert's answer so I put together this jsfiddle demonstrating how one can base64 encode the font face "Geogrotesque" and embed it within the svg so that when the svg is serialized into a string and set as the source as the img, it will maintain the font face in the img so that it then can be drawn in the canvas.

<defs>
<style>
@font-face {
font-family: 'geogrotesque_mediummedium';
src: url(data:application/font-woff2;charset=utf-8;base64,d09GMg...[place encoded data here];
}
</style>
</defs>