skip to Main Content

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.

2

Answers


  1. Chosen as BEST ANSWER

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

    SvgFontManager.PrivateFontPathList.Add
    

  2. 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