Adding background to SVG.

[ufonzak]

This is a demonstration of how it would look if we use SVG background. Albeit, we can use this too.

I find the margin a little too small. But it's pretty difficult to add the margin since the background comes from SVG itself. It's either background or margin but not both. Alternatively, I could size the iframe using the data from SVG element, but that's super sketch, haha.

[mukrop]

Interesting solution. I did not realize you could add a background in this way (I expected reexporting all SVGs would be necessary). Neat! Conclusions of my investigating below:

• Visually, I'm OK with this solution. Yes, margins could be a tiny bit bigger, but this is the content of the image in the text so it's OK. If we decided, it could be solved in the same way we do it for infographics: The underlying file would have margins but embedding in the web would cut them away.
• However, even though the file no longer seems to be "stretched out" over the screen visually, in reality, it is. This means that clicking in the "dark" area to get out of the lightbox works outside the stretch area (at the side of the screen) but not in it (next to the image). But since there is no extra white space, you cannot say the difference would be there and it mostly seems it doesn't work to exist the lightbox by clicking in the dark area. (Was that understandable or should I add a screenshot?)
• Zoom button (upper right) is still not supported for SVGs (though works OK for bitmaps).

All in all, especially taking into account the latter two points above and #136, I'd probably suggest setting up the the PDF->PNG+SVG conversion process for all PDF figures as well. It would solve all our problems: we'd display PNG of an appropriate resolution, clicking out of the lightbox would work, fancybox would be consistent everywhere, zooming would work and we could implement a download button with multiple formats even for explainer figures made by us.

Makes sense? What do you think?

[ufonzak]

Interesting solution. I did not realize you could add a background in this way (I expected reexporting all SVGs would be necessary). Neat! Conclusions of my investigating below:

• Visually, I'm OK with this solution. Yes, margins could be a tiny bit bigger, but this is the content of the image in the text so it's OK. If we decided, it could be solved in the same way we do it for infographics: The underlying file would have margins but embedding in the web would cut them away.
• However, even though the file no longer seems to be "stretched out" over the screen visually, in reality, it is. This means that clicking in the "dark" area to get out of the lightbox works outside the stretch area (at the side of the screen) but not in it (next to the image). But since there is no extra white space, you cannot say the difference would be there and it mostly seems it doesn't work to exist the lightbox by clicking in the dark area. (Was that understandable or should I add a screenshot?)
• Zoom button (upper right) is still not supported for SVGs (though works OK for bitmaps).

All in all, especially taking into account the latter two points above and #136, I'd probably suggest setting up the the PDF->PNG+SVG conversion process for all PDF figures as well. It would solve all our problems: we'd display PNG of an appropriate resolution, clicking out of the lightbox would work, fancybox would be consistent everywhere, zooming would work and we could implement a download button with multiple formats even for explainer figures made by us.

Makes sense? What do you think?

I'll look into it.