SVG Font-family does not apply after convert to png(Splash screen)

[denhaandrei]

Description

Font 'Poppins' after conversion does not apply to the result PNG files: obj\Debug\net7.0-android\resizetizer\r\drawable (any folders)

I'm using the following SVG file:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="413.852" height="808.197" viewBox="0 0 413.852 808.197">
  <defs>
	<style>
		@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@800');
		.st0{fill:#223F3B;}
		.st1{fill:#5AC87A;}
	</style>
	  <pattern id="pattern" x="0" y="0" width="30" height="31" viewBox="0 0 30 31" patternUnits="userSpaceOnUse" >
		  <rect x="0" y="0" width="30" height="31" fill="#ffffff"/>
		  <path d="M-12.627,0H-21.6a1.07,1.07,0,0,0-1.062,1.075A1.071,1.071,0,0,0-21.6,2.152h7.908v7.975A1.069,1.069,0,0,0-12.627,11.2a1.068,1.068,0,0,0,1.061-1.076V1.075A1.068,1.068,0,0,0-12.627,0" transform="translate(24.996 9.291)" fill="rgba(82,190,41,0.1)"/>
	  </pattern>
  </defs>
	<rect x="0" y="0" width="413.852" height="808.197" opacity="0.999" fill="url(#pattern)"/>
  <g transform="translate(87.526 250) scale(1.5)">
	<g id="Text" transform="translate(77.589 0)">
		<text y="70" font-family="Poppins" font-size="15" fill="#404D3A" text-anchor="middle">Test message with font</text>
		<text y="90" font-size="15" fill="#404D3A" text-anchor="middle">Test message without font</text>
	</g>
  </g>
</svg>

Steps to Reproduce

1. Create a MAUI App solution
2. Paste the following svg to existing splash.svg
3. Change in proj file:
   to
4. Clean bin and obj folders if build project previously
5. Run on the Android 10 where full screen splash supported or see result png in folder: \obj\Debug\net7.0-android\resizetizer\r\drawable-xxxhdpi
6. The result png and opened svg are not the same, font-family does not apply

Please note

1. the same issue for iOS font do not apply after publish to test flight
2. the same when I use @font-face {
   font-family: 'PoppinsBoldBase64';
   src: url('data:font/truetype;base64,AAEAA...... and font-family="PoppinsBoldBase64"

Link to public reproduction project repository

https://github.com/denhaandrei/BadSvgConverter.App

Version with bug

7.0.49

Last version that worked well

NOT work

Affected platforms

iOS, Android

Affected platform versions

I think all Android/IOS, because issue with convert svg

Did you find any workaround?

No response

Relevant log output

No response

[PureWeen]

@denhaandrei did this work in 6.0 ?

[ghost]

Hi @denhaandrei. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[denhaandrei]

denhaandrei did this work in 6.0 ?

Previously not tested. Miss question "Last version that worked well"

After the test, it does not work at 6.0 too.

[moljac]

This is not directly maui issue. namely managed libraries used by resizetizer
have issues converting some (complex) SVG images to PNG.

Workaround would be to convert SVG to PNG using reliable converters.

• original

  ! OK - github does not render font correctly
  splash.svg
  

• resizetizer

  ! OK - font
  resizetizer-splash.png
  

• Chrome browser - screenshot MacOSX

  OK
  

• inkscape

  ! OK - font
  

Online Converters

• https://svgtopng.com/

  OK
  svgtopng.com-splash.png
  

• https://cloudconvert.com/

  ! OK
  cloudconvert.com-splash.png
  

• https://convertio.co/svg-png/

  ! OK
  convertio.co-splash.png
  

• https://ezgif.com/svg-to-png

  ! OK
  ezgif.com-splash.png
  

I work on collecting reported issues in MAUI repo, so I can open issues on GitHub in relevant repositories.

[denhaandrei]

Hello, @moljac

I understand that the issue is not dotnet/maui, but MAUI uses some packages to convert .svg automatically.
Thanks for your help. Wait and check it after the update packages.

Unfortunately, we can`t use the converter on the splash screen, because the application can have different resolutions on different devices. So we continue to use .svg without font applying.

Please note, only "Chrome browser - screenshot MacOSX"(windows the same) is expected.

Thanks,
Andrew

[moljac]

I understand that the issue is not dotnet/maui, but MAUI uses some packages to convert .svg automatically.

I understand you completely. There are expectations which are not fulfilled.

My suggestion is: please open issue in Svg.Net repo too (with svg that has issue and expected png output).

Thanks for your help. Wait and check it after the update packages.

You re welcome. This is the reason we are here.

Unfortunately, we can`t use the converter on the splash screen, because the application can have different resolutions on different devices. So we continue to use .svg without font applying.

I understand. This must be fixed. Only the problem is where and how fast. Rewriting everything could cause more issues.

Please note, only "Chrome browser - screenshot MacOSX"(windows the same) is expected.

Thanks for the info. It was quite confusing when I saw several online converters having issues (similar incorrect output)

[moljac]

Issue created in Svg.Net repo

svg-net/SVG#1068

Closing this issue.