ladybird icon indicating copy to clipboard operation
ladybird copied to clipboard

SVG rendering as a black box

Open van-sprundel opened this issue 6 months ago • 6 comments

Summary

One of the SVGs on the site is a black box

Operating system

macOS

Steps to reproduce

  1. go to given URL (or use given SVG)
  2. open in ladybird
  3. result should be a black box

Expected behavior

The first screenshot shows what the SVG should look like

Actual behavior

The result is a black box

URL for a reduced test case

https://backend.teifi.ca/uploads/image_2_00e451c2f1.svg

HTML/SVG/etc. source for a reduced test case

<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="42" height="42" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_2_328" transform="scale(0.0192308)"/>
</pattern>
<image id="image0_2_328" width="52" height="52" xlink:href="data:image/png;base64,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"/>
</defs>
</svg>

Log output and (if possible) backtrace

No logs relevant as far as I can see.

Screenshots or screen recordings

Image Image

Build flags or config settings

N/A

Contribute a patch?

  • [ ] I’ll contribute a patch for this myself.

van-sprundel avatar May 07 '25 21:05 van-sprundel

The issue you're encountering—an SVG rendering as a black box in the Ladybird browser—is likely due to incomplete or incorrect support for embedded image patterns and xlink:href references in Ladybird’s SVG rendering engine.

The SVG uses a filled by an embedded tag with a base64-encoded PNG:

<rect width="42" height="42" fill="url(#pattern0)"/>

<image id="image0_2_328" width="52" height="52" xlink:href="data:image/png;base64,..."/>

This works in browsers like Chrome or Firefox because they support xlink:href and data: URLs inside SVG patterns.

Ladybird is still under development, and it likely does not yet support rendering images embedded via base64 inside patterns, or xlink:href specifically inside tags pointing to elements.

Possible causes:

  • Incomplete support for referencing in patterns
  • Missing or incorrect implementation of xlink:href resolution
  • Lack of support for data:image/png;base64,... in tags
  • Fallback behavior renders the rect as black without the pattern applied

Workarounds: Convert the base64 PNG to a standalone image and reference it via a standard URL.

eavukat avatar May 08 '25 18:05 eavukat

@eavukat This is a Ladybird bug report. Suggesting that they change the website is the exact opposite of what we want.

Also, you need to wrap HTML tags in `` otherwise they're invisible.

If your message was LLM-generated, please read our contributing guidelines on that before doing so again.

AtkinsSJ avatar May 08 '25 18:05 AtkinsSJ

Ironically this did get me a bit closer to the answer. After checking the SVG impl it doesn't seem like pattern is supported yet (since there's no pattern tag in ENUMERATE_SVG_TAGS, hence the black box. I could be wrong though

van-sprundel avatar May 08 '25 18:05 van-sprundel

I've gotten far enough to implement a basic setup for SVG Pattern Elems and do stuff like change the color but it's becoming a big rabbit hole and I lack the knowledge to work on this :P

van-sprundel avatar May 12 '25 19:05 van-sprundel

Honestly, very basic support for patterns that just handles colours would be great to PR. You absolutely don't have to do an entire feature in one go. (And I think it'd be your first contribution, right? So it's extra good to start small.)

AtkinsSJ avatar May 12 '25 19:05 AtkinsSJ

Nice, i can submit something later today

i was struggling with importing the base64 impl in libweb, seems like that wasn't allowed

van-sprundel avatar May 13 '25 06:05 van-sprundel