Improved SVG behaviour

Ideas
1

What high-level problem are you trying to solve?
This is a long one, sorry!

Documenting various inconsistent & unexpected behaviours that are preventing full use of SVG benefits. Some issues may be due to SVG XML that I'm unaware of.

  • The selected ID(s) in Enketo are not shown on screen vs Collect which has a comma delimited list of selection(s) at the bottom. ID will show above SVG when mouseovered in Enketo. Unsure of plan for webforms. If using to highlight items with read only would need to include a note as well.
  • SVG selected ID(s) colour in Collect (orange) is different to Enketo (light blue) and unsure of plan for webforms. Consistent colour across platforms would be good to allow using contrasting colours so choice is clear
  • Line segments select/fill strangely (SVG type related?)
    • Select the right angle line - closed polygon of vertices highlights
      • non optimised SVG selects the line only in Enketo but not Collect, once selected the polygon region can be used to deselect even if not filled
    • If there is any fill, even transparent, for the item in the SVG, anywhere in the polygon of vertices can be used to select
    • If there is no fill, only the stroke outline can be used to select, but the polygon of vertices will still all fill on select, then once selected anywhere in the stroke and fill can be used to deselect.
  • Deselecting items in Collect leaves them as pure black, not prior colour, Enketo returns to original colour. Changing screens and returning removes the black fill
    • documented elsewhere
    • Example SVGs were created in Inkscape, can be resolved by saving as optimised SVG, options at bottom of post
  • Objects can't be selected in Enketo but Paths can. Both can be selected in Collect. Unsure of plan for webforms
    • documented elsewhere
    • Can convert objects to paths if needed for Enketo.
    • Try to select the red rectangles or the green rectangle in Enketo - cannot
  • In Collect, portrait and landscape SVGs displayed via appearance image-map have different display areas depending on device screen size and orientation.
    • Enketo
      • Both take up full width of form area on screen. No ability to zoom SVG within this. Zooming screen (ctrl/cmd +) beyond 150% stops increasing size of SVG. Zooming screen with trackpad pinch will zoom much further.
    • Collect - 6" handset
      • portrait SVG, portait device: takes up most of width, inside a portrait rectangle
      • portrait SVG, landscape device: takes up ~3/4 width, inside an extremely wide rectangle, can only see 1/4 of image at once, less when zoomed to full width
      • landscape SVG, portrait device: takes up full width, inside a portrait rectangle so some area is unused until zoomed
      • landscape SVG, landscape device: takes up full width, inside an extremely wide rectangle, can only see 1/3 of image at once
    • Collect - 12" tablet
      • portrait SVG, portait device: takes all width, inside a ~square
      • portrait SVG, landscape device: takes up ~2/3 width, inside a very wide rectangle, can only see 1/2 of image at once, less when zoomed to full width
      • landscape SVG, portrait device: takes up full width, inside a ~square so area is unused until zoomed
      • landscape SVG, landscape device: takes up most of width inside a wide rectangle, can only see about 2/3 of image at once
  • A read only SVG select with image-map and no selections will not show the SVG in Collect (will show in Enketo)
  • Where IDs on an SVG are pre-selected to show for information, with read_only set, the SVG cannot be zoomed for detail or panned, combined with the display issues above parts of the SVG are unable to be seen at all.
    • Large device screens will make this worse - 12": portrait image on portait device cuts off bottom 1/3, landscape image on landscape device cuts off bottom 1/2, portrait image on landscape device cuts off bottom 2/3, landscape image on portrait device can see all of image.
  • An SVG with no background fill will be drawn on a white canvas as image-map even in dark mode but in dark mode as an image for a note it will be drawn on a black canvas, obscuring black elements
    • minor issue that can be solved with a background in the SVG
  • An SVG displayed as an image against a note or other question type cannot be zoomed or panned. It would be beneficial to be able to zoom/pan these
    • Option is to have an image-map select that has no valid IDs
  • Using an SVG as a big-image will only work if there is an app that can open them, these apps will likely not open rasters.
    • No need for this if a basic method of zoom-pan available
    • Enketo will enlarge but as before, cmd-ctrl +/- does nothing to change SVG size, pinch to zoom does zoom in
  • SVGZ support - Some of my SVGs are multiple megabytes in size. if they are SVGZ they can go down to ~150kb. Putting filename.svgz as the image does validate, Central asks for the svgz file, but Enketo says 'SVG image could not be found' and Collect 'SVG file does not exist'
    • If SVGZ support was added SVG storage volume would decrease by 10-20x
  • SVGs cannot be loaded to image widgets (not really an issue, just here for completeness)

Any ideas on how ODK could help you solve it?

Biggest issue is likely read-only preselects not being able to zoom on a small screen or even see the whole image on a large screen.
Having consistent selected colours for Collect and webforms would allow highest contrast between selectable and selected. Currently the two colours are complementary so maximising contrast in one minimises it in the other.
Nice to haves are being able to select a snaking line without it causing the strange fill effects and saving file size for sync.

These are the optimise settings that fixed deselect going black in Collect, haven't identified the exact option that fixes it, but filesize went down by 50% in the process.

image
image840×736 73.3 KB

image
image844×742 67.2 KB

image
image842×758 105 KB

Upload any helpful links, sketches, and videos.

SVG_issues.xlsx (580.3 KB)

SVG.zip (7.3 KB)

2 Likes