This project has moved and is read-only. For the latest updates, please go here.

On Azure, Text Doesn't Render When Converting SVG to PNG

Mar 29, 2016 at 12:48 AM
Hey all;

Got a weird one here. Our application converts SVGs into PNGs. Locally, everything works hunky-dory, but when we push the code up to Azure (it's hosted on an Azure website), we have noticed that if the SVG included text, then the text does not convert. Even using very simple SVG markup, like the example from Mozilla:
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
     width="100px" height="30px" viewBox="0 0 1000 300">

  <text x="250" y="150" 
        font-family="Verdana" 
        font-size="55pt">
    Hello, out there
  </text>

  <!-- Show outline of canvas using 'rect' element -->
  <rect x="1" y="1" width="998" height="298"
        fill="none" stroke-width="2" />
</svg>
Locally, it will render fine, but on the server, it won't render the text. The code that I am using for the conversion is very minimal (the above XML is loaded in the xmlStream object):
using (var image = new MagickImage())
{
    image.Read(xmlStream, new MagickReadSettings { Format = MagickFormat.Svg });
    var outputStream = new MemoryStream();
    image.Write(outputStream, MagickFormat.Png);
}
Any idea why that wouldn't work on Azure App Services, but works just fine on a regular IIS machine? I have enabled the debug on Magick, and there are no glaring errors in the conversion.

Thank you! Any help is greatly appreciated.

Dave
Mar 29, 2016 at 8:13 PM
Edited Mar 29, 2016 at 8:13 PM
Magick.NET uses librsvg to read the svg files. And that seems to be using pango to draw text. Maybe this library cannot access the fonts in an Azure App Services due to security restrictions?

Are you able to draw text with something like this:
using (MagickImage image = new MagickImage("label:Text"))
{
  image.Write("test.png");
}
Mar 29, 2016 at 8:42 PM
Thanks Dirk;

That does work, both locally and on the Azure server, so you must be correct. I don't know if I can elevate permissions on the appropriate library, but I will try. If you have any thoughts, I would very much appreciate them.

Thank you!

Cheers,

Dave
Mar 29, 2016 at 8:48 PM
Edited Mar 29, 2016 at 8:49 PM
Are you able to specify the font? Or does it seem to be using only a default font?
Mar 29, 2016 at 8:54 PM
I've tried it both ways, even uploading a font file with the web site and using PrivateFontCollection to load it. All of them give me the same result, which is that it works locally, but not on Azure. I can't get any text to render in the Azure web site if it comes from an SVG.
Mar 29, 2016 at 9:13 PM
I meant when you use label:. You need to set the font property on the settings of the image first and then call .Read.
Mar 29, 2016 at 10:02 PM
Ahh, sorry, my bad. I've got it loading that way now, and I can specify different system fonts (Arial, Verdana, Times) using that mechanism (but not my custom font). I can get away with using a system font for this, so I am not entirely worried about not being able to use the custom one.
Mar 29, 2016 at 10:18 PM
Label uses the freetype library and that seems to be able to load the font. Pango uses GDI to draw fonts.

I found the following post about GDI issues: http://stackoverflow.com/questions/24921518/running-azure-webjob-with-gdi-requirements.
  1. Components rely on GDI API may not work on Azure Websites. The workaround is moving to Azure Web Role
No idea what this means but it might help you.

I should probably switch to FreeType with Pango but that means I will have to add fontconfig to the mix. I think I tried that earlier and that I was not able to get it working. I might give it another try some time.
Mar 29, 2016 at 10:27 PM
Thanks for your help, Dirk. That certainly looks to be the culprit. I'll see about moving our SVG processing to a web role. Much appreciated!

Dave