Problem with multiple svg-graphics: only one graphic is shown

Hello,

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?

S.M.

The following images illustrate the problem:

That is the note, including the graphics:

graphic 1:

graphic 2:

preview result: two time the same graphic (graphic 1), instead of two different graphics ( (graphic 1 and graphic 2):

TBX:
grafiktest.tbx (206.4 KB)

User Input error!

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.

So the problem was incorrect SVG data.

My test:
grafiktest-02.tbx (230.2 KB)

Note that there is no formal support for embedded SVG in $Text. So if using the trick above, take care with the code in your SVG.

†. I think ^value($Text)^ would be more sensible so none of the SVG gets accidentally detected as something needing HTML encoding.

1 Like

Thank you very much @mwra!

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).

Many thanks
S.M.

1 Like

Yes! Especially for complex graphs in academic papers. :slight_smile:

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.

I used Affinity Designer, but you´re right, there is pixelation and the file size is too big. I´ll try a different tool, maybe Inkscape.

1 Like

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.

1 Like

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).

2 Likes

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):

<svg width="100%" height="100%" viewBox="0 0 2667 2000" version="1.1" xmlns="http://www.w3.org/2000/svg">
   <use id="Hintergrund" xlink:href="#_Image1" x="0" y="0" transform="matrix(4.16667,0,0,4.16667,0,0)"/>
   <defs>
      <image id="_Image1" xlink:href="data:image/...base64 data .../>
   </defs>
</svg>

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):

<svg
   width="88.601181mm"
   height="78.42247mm"
   viewBox="0 0 88.601181 78.42247"
   version="1.1"
   id="svg1"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs1" />
  <g
     id="layer1"
     transform="translate(-42.036613,-40.218992)">
    <rect
       style="fill:#d40000;stroke:#000000;stroke-width:0.264583"
       id="rect1"
       width="88.336594"
       height="78.15789"
       x="42.168907"
       y="40.351284" />
  </g>
</svg>

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.

HTH.

1 Like