Display bug in fyne

[matwachich]

Hello.
After discussing with andy (main maintainer of fyne library), about my bug, we came to the conclusion that it should be poster here since fyne uses rasterx for SVG display.

Here are two SVGs that are not correctly displayed in fyne:


Code:

<?xml version="1.0" encoding="utf-8"?>

<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Calendar / Calendar_Days">
<path id="Vector" d="M8 4H7.2002C6.08009 4 5.51962 4 5.0918 4.21799C4.71547 4.40973 4.40973 4.71547 4.21799 5.0918C4 5.51962 4 6.08009 4 7.2002V8M8 4H16M8 4V2M16 4H16.8002C17.9203 4 18.4796 4 18.9074 4.21799C19.2837 4.40973 19.5905 4.71547 19.7822 5.0918C20 5.5192 20 6.07899 20 7.19691V8M16 4V2M4 8V16.8002C4 17.9203 4 18.4801 4.21799 18.9079C4.40973 19.2842 4.71547 19.5905 5.0918 19.7822C5.5192 20 6.07899 20 7.19691 20H16.8031C17.921 20 18.48 20 18.9074 19.7822C19.2837 19.5905 19.5905 19.2842 19.7822 18.9079C20 18.4805 20 17.9215 20 16.8036V8M4 8H20M16 16H16.002L16.002 16.002L16 16.002V16ZM12 16H12.002L12.002 16.002L12 16.002V16ZM8 16H8.002L8.00195 16.002L8 16.002V16ZM16.002 12V12.002L16 12.002V12H16.002ZM12 12H12.002L12.002 12.002L12 12.002V12ZM8 12H8.002L8.00195 12.002L8 12.002V12Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>

---

Code

<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.5 13.75C9.5 14.72 10.25 15.5 11.17 15.5H13.05C13.85 15.5 14.5 14.82 14.5 13.97C14.5 13.06 14.1 12.73 13.51 12.52L10.5 11.47C9.91 11.26 9.51001 10.94 9.51001 10.02C9.51001 9.17999 10.16 8.48999 10.96 8.48999H12.84C13.76 8.48999 14.51 9.26999 14.51 10.24" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 7.5V16.5" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22 12C22 17.52 17.52 22 12 22C6.48 22 2 17.52 2 12C2 6.48 6.48 2 12 2" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17 3V7H21" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22 2L17 7" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

[dweymouth]

Here's another one that doesn't seem to render: https://www.svgrepo.com/svg/124319/filter-filled-tool-symbol

[srwiley]

Thanks to you both for the examples. Any idea of why or what particular bit of the svg is causing the problem? Anything that would help us narrow the cause or causes down?

…

On Thu, May 11, 2023 at 6:12 PM Drew Weymouth ***@***.***> wrote: Here's another one that doesn't seem to render: https://www.svgrepo.com/svg/124319/filter-filled-tool-symbol — Reply to this email directly, view it on GitHub <#17 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AC4VOBZI3KDFEPHNAGS2L2LXFWFADANCNFSM6AAAAAAX575K3U> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[dweymouth]

I'm not sure, though for my example, it looks like the raw SVG actually works fine, but if you edit it before downloading it on that site, eg adding padding, it generates a bunch of additional stuff in the svg (this is the broken one):

<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800px" height="800px" viewBox="-48.6 -48.6 1069.19 1069.19" xml:space="preserve"> <g id="SVGRepo_bgCarrier" stroke-width="0"/> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/> <g id="SVGRepo_iconCarrier"> <g> <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 c16.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 c-39.2,0-59.7,46.6-33.1,75.5L370.216,459.3z"/> </g> </g> </svg>

for comparison, the original, which works:

<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800px" height="800px" viewBox="0 0 971.986 971.986" xml:space="preserve"> <g> <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 c16.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 c-39.2,0-59.7,46.6-33.1,75.5L370.216,459.3z"/> </g> </svg>

Note that it's NOT the viewBox change, because I tried copy-pasting the viewBox attribute from the broken one to the working one, and it still worked fine. It's something releated to the extra g nodes that SVGRepo is adding I guess

[dweymouth]

OK nevermind, it seems like it is actually the viewBox in my case, the negative values seem to throw it off. It's actually rendering but is being offset so far that it was clipped out of Fyne's display area. Also I'm not sure if this is Fyne's problem or rasterx

[matwachich]

Didn't make any modifications to svg for me.
I have absolutly no experience in svg, but I'll try to read some docs

[matwachich]

Some informations:

I tried to open the problematic SVG in inkscape, created a new empty document in inkscape, and I tried to copy the elements from the SVG to the new empty one. when copying the opened circle (recettes.svg), inkscape displayed it the same way as fyne: as a filled circle!