Skip to content

Font support when rendering to PNG #928

Open
@TommyN

Description

@TommyN

Description

I'm using the SVG.NET library to convert SVG to PNG and I have an issue with wrong font being picked.
Here is a simple example to explain my issue:

<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500');
  </style>
  <text font-family="Rubik" font-size="28px" font-weight="400" x="250" y="40" text-anchor="middle">Font-Weight 400</text>
  <text font-family="Rubik" font-size="28px" font-weight="500" x="250" y="100" text-anchor="middle">Font-Weight 500</text>
</svg>

I initially found out that the @import above isn't supported so I just got the default font. I worked around that by preprocessing the SVG-file looking for @import statements and downloading respective .ttf font files to a local folder.

The above import returns two files:

src: url(https://fonts.gstatic.com/s/rubik/v14/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4i1UA.ttf) format('truetype');
src: url(https://fonts.gstatic.com/s/rubik/v14/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-NYi1UA.ttf) format('truetype');

After downloading them I call:

SvgFontManager.PrivateFontPathList.AddRange(fontsJustDownloaded);

Then I convert the SVG to PNG. This works fine, but both lines in the SVG above are rendered using the same font style.

💡
While grabbing all relevant information for this issue I see that the .ttf files I've downloaded have different names when opening with the standard Windows file dialog (Rubik, Rubik Medium) and the PNG conversion works if I replace the font-family in the second line with "Rubik Medium".

I now think I see a workaround to the issue but I'm leaving the issue here for pointers in case I'm going about this the wrong way.

The file https://fonts.googleapis.com/css2?family=Rubik:wght@400;500 also contains weight information so I guess I can extend my pre-processing and replace the font-family based on the font-family and font-weight.

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v14/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4i1UA.ttf) format('truetype');
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/rubik/v14/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-NYi1UA.ttf) format('truetype');
}

So basically find the Windows font-name for each of the downloaded files and replace the font-family in the SVG with this name instead of the generic name.

Example data

Used Versions

Svg 3.3.0
.NET Framework 4.6.1

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions