svg wont display linked image

[crtgirl]

i think i found another SVG bug!

i am working on transferring my cbdq bot over to bbdq and i ran into a snag. i have a svg code that pulls an image from a github repo and places tracery generated text over it. I cannot get the image to render for the life of me. the relevant code looks something like this:

{
"origin": [ "{svg <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" width=\"800\" height=\"600\" style=\"position: relative;\"><image x=\"0\" y=\"0\" width=\"800\" height=\"600\" xlink:href=\"https://raw.githubusercontent.com/mxquinn/shaxxvibecheck/master/maslow_1.png\"/><foreignObject width=\"800\" height=\"600\"><p xmlns=\"http://www.w3.org/1999/xhtml\" style=\"position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: auto; padding: 5px; width: 45% ; font-size:40px; line-height:1.2; color:rgba(0, 0, 0, 1); font-family:'sans'; text-align:center; text-anchor: middle; 0; word-wrap: break word; \">test</p></foreignObject></svg>}"] }

on the website the image doesn't display but the text part of the svg (the word "test" in the above block) does. on bluesky it just posts a blank white image. i've gotten it working in other online tracery editors, which is what makes me think it's a bug. let me know if you need more detail from me!

[olafmoriarty]

Hmm, thanks. It does indeed appear that tags aren't loaded properly when converting an SVG to an image. And strangely, that's the case both for the preview and the backend image conversion, despite those being completely different approaches.

Not really sure how to fix that... I'll have a look at it.

[olafmoriarty]

[Note to self] I can get the preview images to work by replacing the URL with the entire base64-encoded image. Unfortunately, this does not appear to work on the backend. May be the first step to making it work, though.

[olafmoriarty]

Current status

Solution found (not implemented yet). Wrote a function that replaces images from URL with base64-encoded images that are embedded directly into the SVG. That works - only for images with xlink:href, but that's a LOT better than not working at all, and I can figure out a way to auto-add xlink:href to SVGs missing that at a later point.

Next step is baking this into the upload_blob_from_svg() function and adding similar functionality to the preview images in the frontend.

Will probably not have the time to complete this today, but is confident the fix will be out in a day or two.

[olafmoriarty]

Linked images should now work.

However, working on your code I noticed that the <foreignObject> tag does not work either, and it that I would have to make some very big changes to everything about my code to get it to work. So while the image will now load, the text will.

I don't know a lot about SVGs, but am crossing my fingers that you can get some of the same functionality out of the <text> tag.

[crtgirl]

rad!! thank you so much!

yeah. i am hopeful that will do the trick. i think i was using foreignobject on cbdq because i wanted a specific font and that was the way i got it to work.

wish me luck!