SVG images often render incorrectly

[rasteric]

Checklist

• I have searched the issue tracker for open issues that relate to the same problem, before opening a new one.
• This issue only relates to a single bug. I will open new issues for any other problems.

Describe the bug

The SVG rendering in Fyne is fairly limited. For example, many of the SVGs in this package:

https://dribbble.com/shots/8934409-Diversity-Avatars

are rendered incorrectly. The corresponding PNGs work. I understand it is a very complex file format but if there is a way to bump up the 3rd party dependency responsible for SVG loading and rendering to a better version, it should be done. SVGs are clearly preferred (also in the docs) and superior to PNGs but only when they work. It shouldn't be like rolling a die whether an SVG works or not.

How to reproduce

1. Download https://dribbble.com/shots/8934409-Diversity-Avatars
2. Create an app loading and displaying the images in SVG format.
3. Compare to how they should look.

Screenshots

These are not supposed to look like this (though the second one is kind of entertaining):

Example code

package main

import (
	"fyne.io/fyne/v2"
	"fyne.io/fyne/v2/app"
	"fyne.io/fyne/v2/canvas"
	"fyne.io/fyne/v2/container"
	"fyne.io/fyne/v2/dialog"
	"fyne.io/fyne/v2/storage"
	"fyne.io/fyne/v2/theme"
	"fyne.io/fyne/v2/widget"
)

func main() {
	a := app.NewWithID("svg-test")
	win := a.NewWindow("SVG Test")
	img := canvas.NewImageFromResource(theme.AccountIcon())
	card := widget.NewCard("image", "", img)
	button := widget.NewButton("Load SVG", func() {
		dlg := dialog.NewFileOpen(func(in fyne.URIReadCloser, err error) {
			if err == nil {
				img := canvas.NewImageFromReader(in, "file.svg")
				if err != nil {
					dialog.ShowError(err, win)
					return
				}
				img.FillMode = canvas.ImageFillContain
				card.SetContent(img)
			}
		}, win)
		dlg.SetFilter(storage.NewExtensionFileFilter([]string{".svg"}))
		dlg.SetConfirmText("Change Image")
		dlg.SetDismissText("Cancel")
		dlg.SetFileName("some.svg")
		dlg.Show()
	})
	bd := container.NewBorder(nil, button, nil, nil, card)
	win.SetContent(bd)
	win.Resize(fyne.Size{Width: 400, Height: 400})
	win.ShowAndRun()
}

Fyne version

2.5.2

Go compiler version

1.22.0 linux/amd64

Operating system and version

Linux Mint 22 Cinnamon

Additional Information

No response

[andydotxyz]

This issue would help from being more specific.
There are already open tickets to report that text and gradients are not currently working.
Additionally CSS properties are not supported.
From the large icon set referenced it is not clear if there is anything outside of that list which is newly reported so that we can hunt down the cause and fix it.

[rasteric]

I understand the concern. I've provided a link to an icon set that mostly doesn't work and a minimal program to test the images in it. Unfortunately, I don't know enough about the SVG format to be of more help. I certainly can't identify why these don't work in particular. Perhaps someone else can explain why they don't work.

If you plan to keep to support for SVGs partial for the time being (which is how I interpret your remark above), then I would suggest you mention the limitations in the docs, perhaps add a function to determine whether an SVG file is interpretable, or perhaps remove the recommendation to use SVG images from the docs.

As I said, right now it's like rolling a dice. Some images work, others don't, and there is no function in Fyne to determine programmatically which will work and which get displayed as mangled garbage. That makes the format almost unusable for some purposes (e.g. for user-provided images).

[andydotxyz]

There are some fixes on the release branch - would be good to check against v2.5.3-rc6 just in case :)

[stevens515]

I have a svg picture also dosen't work.

[stevens515]

the first svg can't be displayed。 the second is fine.

[andydotxyz]

The first image you pasted is a PNG image embedded in an SVG file.
We don't support bitmap content in the vector files - it breaks the point of using scalable graphics!

[andydotxyz]

@rasteric I downloaded and run against the develop branch (with file "Artboards_Diversity_Avatars_by_Netguru-05.svg"):

Unless you have a specific file that doesn't work and I got lucky then I think this may be resolved in the upcoming release

[stevens515]

The first image you pasted is a PNG image embedded in an SVG file. We don't support bitmap content in the vector files - it breaks the point of using scalable graphics!

thanks！