Displaying SVG in Collect (not image-map)

I can't seem to find any reference to this elsewhere, sorry if it's been covered already.

1. What is the problem?
Is there a way to include SVGs for notes or selects for use in Collect, and will this also allow pinch-zooming of them, which can't be done with JPGs

When adding images to selects or notes, I cannot use SVG images, as these are not shown in Collect, but they do display in Enketo. The form uploads with no validation errors.

2. What app or server are you using and on what device and operating system? Include version numbers.

ODK Central 1.3.3 (client 1.3.2), Windows 10 Enterprise 1909, Edge Version 96.0.1054.43 (Official build) (64-bit), Chrome Version 96.0.4664.45 (Official Build) (64-bit))
ODK Collect 2021.3.2, Android 11, Samsung Galaxy Tab S6
Inkscape Linux v1.1.1, Windows v0.92.

3. What you have you tried to fix the problem?

Tried different SVGs

4. What steps can we take to reproduce the problem?

Create a form with a widget type note and add the SVG filename under the image column or widget type select_one and add the SVG filename under the image column on the choices sheet. Load the form in Collect and Enketo

Hi @ahblake
displaying svg is not supported indeed. I created an issue in our repository (https://github.com/getodk/collect/issues/4953) so that we do not forget about it and hopefully fix it soon.

1 Like

SVG image support is available in the latest Collect beta. If you get a chance, please give it a try and verify that it does what you expect.

1 Like

I've tried two ways of using SVGs in Collect beta, as a note and a select_one, in both, the SVG displays, but cannot be pinch zoomed or panned like it can in an image-map appearance.

I think that an SVG for a select_one is a pretty unusual use case, but the ability to have a note that shows one that can be zoomed is useful, eg a detailed map/layout.

I attempted to get most of the way to the above by creating a select_one item with image-map appearance and a read_only flag. In Enketo the SVG is shown, albeit strangely - as if it was no longer an SVG, a bit paler & fuzzier, but in Collect the read only flag supresses the SVG from being shown at all.

Removing the read only flag and setting the choice to something that doesn't match an ID in the SVG and making it an optional answer does display a zoomable SVG but won't accept any input.

BTW. in Collect, (including image-map) the SVGs appear to be drawn inside a fixed square box, but Enketo they aren't. So if they're wide and short images there's a lot of whitespace on the app screen.

I can see that, and I wish we had asked a bit more about your use case. We’ll explore some other possible improvements for a future release.

I should have been clearer on why the lack of an SVG was an issue. If it was a feature request I would have elaborated further.

Given I can get most of the way there with an unanswerable question, it's lower on my priority list compared to things like fixing the image filesizes and a default markup colour

1 Like

That's our general approach that works in the same way for all widgets. The rule is: if question is read-only and there is no answer hide the whole answer container (if you added default answer it should be displayed). In case of selects with image-map appearance - that container holds the svg.
We had multiple problems in the past with different behaviors across different read-only questions and finally we were able to work out one common approach (the one I described) so I think we don't want to change it.

It looks like you don't need to display hat svg as a part of other widgets (different question types like selects text widgets etc) like we do with images/audio/videos that we can add to every question type. You just want to have a question type that only displays svg and nothing else (something like the note question). Am I right?

Yes, that's right, if it was possible to display an SVG in a note that is able to be zoomed/panned it would be useful as a reference as I am building up a library of vector maps/drawings/etc.

The non-mandatory, no selectable ID approach in a select-one does get the job done for now though.

(On the topic - for JPG/PNGs displayed as notes - there isn't a way to zoom/pan these is there, or have I missed how to accomplish this?)

ok so maybe please create a new topic in Features for that.

For normal images you can add big-image with the same value. Unfortunately it's not supported in pyxform (see https://github.com/XLSForm/pyxform/issues/34) so you would need to edit the xml form manually adding a similar line to the one I highlighted below:

see: http://getodk.github.io/xforms-spec/#supported-media-types

By default, itext “image” values are not clickable. However, if you also include a “big-image”, the image displayed by “image” will be clickable and will display a pannable, zoomable view of the file specified by “big-image”. The user interface must provide a way to go back to the form after opening a “big-image”. Specifying “big-image” alone has no effect, you must always include “image”.
Files referenced by “image” and “big-image” may be the same; however, for performance reasons, it is recommended to create smaller thumbnail images to be referenced by “image”.