Question 190577 in Azure Question posted in
The official documentation to get you started can be found here.

Azure – Fonts not loading in PNG, JPG while converting SVGDocument to Bitmap

I am using SVG-Net for creating PNG,JPG files from SVG.

Problem I am facing is, fonts are not rendering in PNG,JPG from SVG, although when I view my SVG, font shows.
Following is my code:

var svgContent = svgDocument.ToString();
var mySvg = SvgDocument.FromSvg<SvgDocument>(svgContent);

mySvg.Height = new SvgUnit(SvgUnitType.Pixel, pixelHeight);
mySvg.Width = new SvgUnit(SvgUnitType.Pixel, pixelWidth);
mySvg.ViewBox = new SvgViewBox(0, 0, viewBoxWidth, viewBoxHeight);

Bitmap bmpSquare = mySvg.Draw(pixelWidth, pixelHeight);
bmpSquare.Save(FilePathJPG, jgpEncoder,myEncoderParameters);
bmpSquare.Save(FilePathPNG, pngEncoder,myEncoderParameters);

I have ttf files, it works on my local when I install the fonts on my machine locally in C:/Windows/Fonts.
But same is not feasible when my Azure Function App is deployed.
Can there be a way to install font on PaaS on Azure?

For SVG in added font-face and adding ttf file in base64 format.
or is there a way I can render the fonts in SVG-Net library I am using.
Following is the code I used in SVG:

<defs>
        <style>
            @font-face {
            font-family:Segoe Pro Bold;
            src: url("data:font/truetype;charset=utf-8;base64, bas64 conversion of my font TTF file") format('truetype');
            }
        </style>
</defs>

Using the above code shows the font on my SVG, but it renders default font when I convert Bitmap & save to PNG & JPG.

I am so close to my deadlines, I have completed the hardest of things but stuck with this critical issue.
Thanks in advance.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Issue resolved using the SVG.NET Library I was using for SVG to PNG,JPG conversion using the SvgFontManager.

    SvgFontManager.PrivateFontPathList.Add

  2. 0

    Embedding fonts is not supported by svg-net, and as far as I know, svg-net relies entirely on OS-based font resolving. However, you could utilize Azure VMs or container-based Azure App Service Web Apps to install custom fonts. Additionally, there is a preview of Azure Container Apps hosting of Azure Functions.

    For a container based function setup the docker file should look like this example

    FROM mcr.microsoft.com/azure-functions/dotnet:4 AS base
RUN apt-get update && apt-get install -y libgdiplus
RUN apt-get update; apt-get install -y fontconfig fonts-liberation
RUN fc-cache -f -v
COPY FunctionAppSvgToPngContainer/fonts/ /usr/shared/fonts
COPY FunctionAppSvgToPngContainer/fonts/ /usr/share/fonts/truetype
RUN fc-cache -f -v
# use "fc-list" in terminal to check the list of installed fonts
WORKDIR /home/site/wwwroot
EXPOSE 80

FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
WORKDIR /src
COPY ["FunctionAppSvgToPngContainer/FunctionAppSvgToPngContainer.csproj", "FunctionAppSvgToPngContainer/"]
RUN dotnet restore "FunctionAppSvgToPngContainer/FunctionAppSvgToPngContainer.csproj"
COPY . .
WORKDIR "/src/FunctionAppSvgToPngContainer"
RUN dotnet build "FunctionAppSvgToPngContainer.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "FunctionAppSvgToPngContainer.csproj" -c Release -o /app/publish /p:UseAppHost=false

FROM base AS final
WORKDIR /home/site/wwwroot
COPY --from=publish /app/publish .
ENV AzureWebJobsScriptRoot=/home/site/wwwroot 
    AzureFunctionsJobHost__Logging__Console__IsEnabled=true

    The sample svg renderd with svg-net in the azure function changes from enter image description here to enter image description here after the lines that install the font got added.

    Used example svg:

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  xmlns:xml="http://www.w3.org/XML/1998/namespace" viewBox="0, 0, 240, 80">
  <style>
    .small {
    font: italic 13px Liberation Serif;
    }
    .heavy {
    font: bold 30px Segoe Pro;
    }

    /* Note that the color of the text is set with the *
    * fill property, the color property is for HTML only */
    .Rrrrr {
    font: italic 40px Segoe Pro;
    fill: red;
    }
  </style>
  <text x="20" y="35" font-size="13px" font-style="italic" class="small">My</text>
  <text x="40" y="35" font-size="30px" font-weight="bold" class="heavy">cat</text>
  <text x="55" y="55" font-size="13px" font-style="italic" class="small">is</text>
  <text x="65" y="55" font-size="40px" font-style="italic" class="Rrrrr" style="fill:red;">Grumpy!</text>
</svg>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search