Appearance 'image-map' and SVG types

Support
1

1. What is the problem? Be very detailed.
SVG behaviour is different in Enketo and ODK Collect and default SVGs don't work properly.

  • Enketo
    • Using the SVG code from the docs, only the path (blob) is selectable in Enketo
    • Creating an SVG in Inkscape behaves the same, rectangle/ellipses can't be selected. Putting them in a one element group and applying the ID to the group does result in the label displaying and opacity changing on mouseover but it's still non selectable
  • Collect
    • With the SVG code from the docs, all elements are selectable, and all revert to original colour when selection changed
    • Creating an SVG in Inkscape has selectable elements (including non paths), however changing the selection changes the previously selected element as a solid black fill
    • Putting an element in a group does allow it to be selected but doesn't change the colour on select or deselect so visual confirmation is less positive

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

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

  • When saving the SVG, use 'optimised SVG' with these options selected
    • Options
      • Shorten colour vales
      • Convert CSS attributes to XML attributes
      • Collapse groups
      • Create groups for similar attributes
      • Work around renderer bugs
    • SVG Output
      • Remove the SML declaration
      • Remove the metadata
      • Remove comments
      • Embed raster images
      • Enable viewboxing
      • Format output with line-breaks and indentation

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

  • As above in (1)

5. Anything else we should know or have? If you have a test form or screenshots or logs, attach below.

(3) fixed the issue for me, but if there is additional documentation / guidance on best practice for SVG creation for ODK use I would be keen to understand it better.

I couldn't find much on this by searching so I hope it helps someone else with the same problem in the future.

3 Likes