visualisation-tool
visualisation-tool copied to clipboard
openownership
SVG downloads exactly as on screen, not necessarily full diagram
If a diagram has been moved or zoomed in and is then exported as SVG, the image produced represents exactly what was shown on screen at the time of downloading, rather than the full diagram as expected.
Using Firefox 98.0.1 (64-bit) on Windows 10. Data used for the image below: https://drive.google.com/file/d/1NRvc9Beupb3Xggq8HA7_zrdWeHMOu3IG/view
@Blueskies00 & I just discussed this. When the tool is embedded on the Open Ownership website with the SVG button, we think there should be accompanying text next to the button:
"The draw area of the SVG will be set to what is displayed in the viewport above. However the SVG file will always contain all elements within the diagram."
@StephenAbbott @Lathrisk - I'm not sure which of you will be dealing with the 'chrome' on the OO page, but we should probably address this issue, when we update that page.
@kd-ods @Blueskies00 Hmmm. Just tested this on the updated version embedded on the OO website using latest version of Chrome and it downloads the full diagram no matter what is in the viewport https://www.openownership.org/en/publications/beneficial-ownership-visualisation-system/bods-data-visualiser/
Could we test again to see if this is just a Firefox issue?
@StephenAbbott I've just tested on my personal machine - Chrome and Firefox reproduce the issue for me, while Edge doesn't interestingly.
Maybe it depends what program is used to view after download as well? I can see that the data for the whole image is available if I use Inkscape to open the second file, and that it's just the draw area that's been limited. But when viewing in browsers after download, or the standard Ubuntu image viewer, it definitely shows the cropped version.
Not sure if attaching my two downloads will help...
So - am I understanding right: different SVG viewers may or may not respect/use the canvas/draw-area properties of the SVG. In which case, it's not a problem with the BODS visualiser, right?
Those two examples I attached earlier were downloaded from different browsers - but that's how they both display if I open them in Chrome side by side. To me, that suggests that the visualiser is encoding draw-area properties on one form of download and differently the other. If I open them in Inkscape for example, I can explicitly see that it's just the draw-area that's different in the file.
That's why I'm curious as to how Stephen is viewing them after download - mine default to open in the browser I downloaded them through.
You could argue it's not a bug as the SVG does have all the key data - but from a user perspective if a user isn't familiar with SVG (like I'm not) then it may lead them to think the file is broken in some way. It's not ideal to have to make sure you have the correct viewer available for the occasions that the draw-area isn't reflective of the whole image if we're hoping for a wider use case for this tool.
Considering that all of the SVG data is within the file, I appreciate that this isn't high priority at this stage.
OK, that's interesting @Blueskies00 . We should do a diff on those two files and see exactly what is encoded differently. Depending on what we see in the diff, we could then re-title this issue "Differences in SVG encoding between browsers" and leave it for now.
@StephenAbbott - is it possible for you to add this line of text beneath the 'Download SVG' button on the OO website page:
"The draw area of the SVG may be set to what is displayed in the viewport above. However the SVG file will always contain all elements within the diagram."
Looking at the code for the svgsaver, this appears to be a version of the npm library of the same name, with some differences. It seems to use the page's canvas element to grab the SVG and PNG, so it will always work in the way described above, i.e. downloading as shown on screen rather than the whole diagram.
A workaround which seems to me like the best solution is for the diagram to zoom and scale to show the whole thing (as described in #73) just before downloading the image. This would ensure the whole diagram is downloaded without modifying the svgsaver library's code.
