either I’m doing something wrong, or I’ve found a reproducible bug. The embedding of SVG graphics isn’t working properly.
Description:
If I embed two different SVG graphics into a note and then want to view this note in the preview, it doesn’t display two different graphics but instead shows the same graphic twice. It doesn’t matter whether I embed the graphics using ^include or copy them directly into the note—neither approach works.
The attached TBX illustrates the issue.
Does anyone have a solution, or is this indeed a bug?
I wondered at first glance why you were using so much code but I see it is because Tinderbox doesn’t natively support SVG images pages into $Text (I think you get a bitmap thumbnail but it doesn’t export). See Image formats for embedding.
So you are pasting the raw SVG code into $Text and using template ^text^† to render it. But you have given both SVGs the same ID that the HTML export adopts from the SVG. As the second image re-uses the first ID, the HTML is clever enough to know they are the same image and reuse the first set of image data.
If you change both occurrences of Image1 in the second image’s SVG to Image2 you get the expected result.
I would never have found the reason myself. In fact, I didn’t assign the ID; the graphics program did. I’d also prefer to use pixel images, but then I’d have to worry about which folder they’re in, and besides, SVGs adapt better to different screen sizes (I build websites with Tinderbox).
Yes! Especially for complex graphs in academic papers.
I’m wondering what tool made the SVG in the test. I notice that rather than being actual SVG, oddly it is a PNG inside an SVG wrapper, so it doesn’t scale well. If you expand Grafik1 a bit you’ll see pixelation at the top.
If you look at my test doc, images #3 and #4 are PNG icons found on my hard drive. They are more complex than your tests yet have far less code including the unneeded (I believe!) extra code with the problematic IDs.
Just an aside - I use Affinity Designer as well for some graphics, and have seen no pixelation effects on exported SVG’s, no matter the export settings I use.
I see the file data in the $Text with the wrapper around the 640x480px png as pointed out by @mwra, of course. FWIW, the svg’s I export from Designer don’t contain this kind of code (if it helps - all elements I work with are vector files, and I always export at the highest settings, with rasterization disabled).
Just wondering if there’s another way for OP to export the svg without bounds, and leave the sizing to the html in some way.
I run a website where I occasionally publish images (mostly screenshots from diagrams or letters). I create the website using Tinderbox. Since handling SVG in Tinderbox is simpler than handling pixel images and they also adapt better to different screen sizes, I convert pixel images into SVG images (as far as it makes sense—naturally, it’s not practical for some images, like photos).
Solely for this reason, I also used PNG images converted to SVG in this test. For images like the ones used in the test, you would typically create an SVG directly, for example, in Affinity Designer, and the resulting file would likely be different and significantly smaller than a converted PNG image. However, that doesn’t match my use case, which is why I followed the above approach (which might seem confusing at first glance).
Thanks for the useful clarification. The duplicate image ID is likely because if the PNG->SVG is done one at a time, the creation app starts at 1 each time.
You can prune some cruft from the SVG you’re getting. This still seems to work and is more concise (line breaks only for clarity, base64 value omitted for brevity):
Interestingly, fiddling with Inkscape (not my area of expertise) to make a square(-ish) shape I got slightly less verbose export (line breaks as per source but could be removed):
I don’t think Inkscape has a ‘code’ export but it may have a plugin. also there are probably light weight utilities for shape → minimal SVG code, as in code for use like in this demo.
