0

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.

Abhilab Das
  • 113
  • 2
  • 13
  • 1
    See following : http://svg-net.github.io/SVG/doc/Q&A.html?force_isolation=true#is-this-code-server-safe – jdweng May 26 '23 at 12:00
  • @jdweng : how is this helping with fonts? can you help me out a bit. – Abhilab Das May 26 '23 at 12:19
  • 1
    I don't know. It looks like issue may have to do the System.Drawing Library. You need to find out what library is being used for the conversion. In VS if you right click on the method and go to source you will find the library. Once we know the library than we can find a solution. – jdweng May 26 '23 at 12:25
  • I am using Draw method, already shared the code in question. – Abhilab Das May 29 '23 at 17:28

2 Answers2

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>
stefan.seeland
  • 2,065
  • 2
  • 17
  • 29
0

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

SvgFontManager.PrivateFontPathList.Add
Abhilab Das
  • 113
  • 2
  • 13