Some SVG resources don't update appearance correctly with the theme

[dweymouth]

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

I have some SVG resources that aren't displaying properly with the NewThemedResource wrapper. Rather than updating the fill color appropriately, it seems that the fill is becoming transparent and the SVG is not drawing at all. They draw normally without the themed resource wrapper but using the original fill color.

How to reproduce

run the example app and switch the OS theme from light to dark. observe that the Fyne app updates its theming but one button themes correctly and the other doesn't show its icon at all

Screenshots

Example code

package main

import (
	"fyne.io/fyne/v2"
	"fyne.io/fyne/v2/app"
	"fyne.io/fyne/v2/container"
	"fyne.io/fyne/v2/layout"
	"fyne.io/fyne/v2/theme"
	"fyne.io/fyne/v2/widget"
)

var ResDiscSvg = &fyne.StaticResource{
	StaticName: "disc.svg",
	StaticContent: []byte(
		"<svg fill=\"#000000\" version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" \r\n\t width=\"800px\" height=\"800px\" viewBox=\"0 0 547.74 547.74\"\r\n\t xml:space=\"preserve\">\r\n<g>\r\n\t<g>\r\n\t\t<path d=\"M273.87,547.74c151.256,0,273.87-122.617,273.87-273.87S425.126,0,273.87,0S0,122.617,0,273.87\r\n\t\t\tS122.614,547.74,273.87,547.74z M354.122,46.31c40.318,14.217,75.723,38.847,102.987,70.662L356.255,219.99\r\n\t\t\tc-9.939-15.166-23.954-27.421-40.487-35.208L354.122,46.31z M314.626,35.144l-11.539,143.704\r\n\t\t\tc-5.33-1.625-10.783-2.794-16.288-3.498L268.062,31.824C283.656,31.429,299.256,32.543,314.626,35.144z M273.87,228.735\r\n\t\t\tc24.927,0,45.135,20.208,45.135,45.135s-20.208,45.135-45.135,45.135s-45.135-20.208-45.135-45.135\r\n\t\t\tS248.943,228.735,273.87,228.735z M211.709,350.22c14.18,11.53,31.294,18.854,49.269,21.246l-49.177,135.519\r\n\t\t\tc-40.481-10.799-78.015-32.045-108.291-62.229L211.709,350.22z\"/>\r\n\t</g>\r\n</g>\r\n</svg>\r\n"),
}

var ResFilterSvg = &fyne.StaticResource{
	StaticName: "filter.svg",
	StaticContent: []byte(
		"<svg fill=\"#000000\" version=\"1.1\" id=\"Capa_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" \r\n\t width=\"800px\" height=\"800px\" viewBox=\"0 0 971.986 971.986\"\r\n\t xml:space=\"preserve\">\r\n<g>\r\n\t<path d=\"M370.216,459.3c10.2,11.1,15.8,25.6,15.8,40.6v442c0,26.601,32.1,40.101,51.1,21.4l123.3-141.3\r\n\t\tc16.5-19.8,25.6-29.601,25.6-49.2V500c0-15,5.7-29.5,15.8-40.601L955.615,75.5c26.5-28.8,6.101-75.5-33.1-75.5h-873\r\n\t\tc-39.2,0-59.7,46.6-33.1,75.5L370.216,459.3z\"/>\r\n</g>\r\n</svg>\r\n"),
}

func main() {
	myApp := app.New()
	myWindow := myApp.NewWindow("Themed SVG bug")

	discSvg := theme.NewThemedResource(ResDiscSvg)
	filterSvg := theme.NewThemedResource(ResFilterSvg)

	content := container.New(layout.NewFormLayout(),
		widget.NewLabel("without themed wrapper"),
		container.NewHBox(
			widget.NewButtonWithIcon("", ResDiscSvg, nil),
			widget.NewButtonWithIcon("", ResFilterSvg, nil),
		),
		widget.NewLabel("with themed wrapper"),
		container.NewHBox(
			widget.NewButtonWithIcon("", discSvg, nil),
			widget.NewButtonWithIcon("", filterSvg, nil),
		),
	)
	myWindow.SetContent(content)
	myWindow.ShowAndRun()
}

Fyne version

2.3.4

Go compiler version

go1.19.4 darwin/amd64

Operating system and version

Mac OS

Additional Information

No response

[matwachich]

I have the same bug with some SVGs (in addition to the non-correctly displayed at all SVGs...), and I noticed that svg with grayish stroke are OK, while black stroke no.

I don't know what does that mean though... Zero experience with SVG

[junmaqiang]

me too

[andydotxyz]

It would be helpful if you can provide more data, such as the icon you are trying to use. "Me too" doesn't help us fix the issue.

[junmaqiang]

Only use theme.xxxIcon() to correspond to the theme

is code demo

package main

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

func main() {
	myApp := app.New()
	myWindow := myApp.NewWindow("ico.demo")
	// me diy
	diySvgToContent := `<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 24C4 35.0457 12.9543 44 24 44V44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M36 24C36 17.3726 30.6274 12 24 12C17.3726 12 12 17.3726 12 24C12 30.6274 17.3726 36 24 36V36" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>`
	diySvgToResource := fyne.NewStaticResource("logo.svg", []byte(diySvgToContent))
	// copy fyne's home.svg filepath'code to svgContentToFyne : /gopath/pkg/mod/fyne.io/fyne/v2@v2.3.0/theme/icons/home.svg
	fyneSvgToContent := `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/><path d="M0 0h24v24H0z" fill="none"/></svg>`
	fyneSvgToResource := fyne.NewStaticResource("home.svg", []byte(fyneSvgToContent))
	//
	a := widget.NewButtonWithIcon("diySvg", diySvgToResource, nil)
	b := widget.NewButtonWithIcon("fyne's Icon", theme.DownloadIcon(), nil)
	c := widget.NewButtonWithIcon("fyne's Svg", fyneSvgToResource, nil)
	//
	layouta := container.NewHBox(a, b, c)
	layout := container.NewVBox(layouta)
	myWindow.SetContent(layout)
	myWindow.Resize(fyne.NewSize(600, 400))
	myWindow.ShowAndRun()
}

[junmaqiang]

I found a solution use "theme.NewThemedResource()" but only fyne's svg

c := widget.NewButtonWithIcon("fyne's Svg", theme.NewThemedResource(fyneSvgToResource), nil)

[andydotxyz]

That is how it is supposed to work, with ThemedResource.
It does not only work with Fyne SVGs - all icons I have tried from material design icon set work great.

[junmaqiang]

这就是 ThemedResource 应该如何工作的。 它不仅适用于 Fyne SVG - 我在材料设计图标集中尝试过的所有图标都效果很好。

In other words, fyne's icon is acceptable, but user-defined icons are not. The requirement is that user-defined icons must have the same effect to solve the problem.

[junmaqiang]

这就是 ThemedResource 应该如何工作的。 它不仅适用于 Fyne SVG - 我在材料设计图标集中尝试过的所有图标都效果很好。

Try how to make the icon here also successful
https://iconpark.oceanengine.com/official

[junmaqiang]

i found a problem stroke="#333" To "stroke="#fff"" will default to white

diySvgToContent := `<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 24C4 35.0457 12.9543 44 24 44V44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M36 24C36 17.3726 30.6274 12 24 12C17.3726 12 12 17.3726 12 24C12 30.6274 17.3726 36 24 36V36" stroke="#fff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>`

Explain that fyne's theme tool does not uniformly process the color of svg

[junmaqiang]

It seems that the way to deal with custom svg colors here needs to be adjusted. User-defined svg is not in the fyne framework, which is special

// Name returns the underlying resource name (used for caching).
func (res *ThemedResource) Name() string {
	prefix := res.ColorName
	if prefix == "" {
		prefix = "foreground_"
	} else {
		prefix += "_"
	}

	return string(prefix) + res.source.Name()
}

// Content returns the underlying content of the resource adapted to the current text color.
func (res *ThemedResource) Content() []byte {
	name := res.ColorName
	if name == "" {
		name = ColorNameForeground
	}

	return svg.Colorize(res.source.Content(), safeColorLookup(name, currentVariant()))
}