Raster & Vector SVGs with image-map appearance, for user select or dynamic pre-selection

[ahblake]

I already have an in depth thread about how the image-map appearance for selects works / errors in Collect & Enketo, but this is a more approachable guide to creating & using them plus an example form & SVGs.

Huge thanks to @Thalie for supplying some of the source SVGs - apologies it took me forever to get this demo together! All images have CC attribution within the form.

Showcase highlights;

• You don't need nice vector art to use image-map, an existing raster image/diagram or a simple sketch will work just as well, as you can embed a raster image within an SVG as the bottom layer, and then place partially opaque elements on top that are the choices. This avoids the need to convert or create vector artwork and can still result in very compact files.
  • With aggressive lossless PNG compression these files can be quite small - a 500kb vector PDF became a 47kb SVG (example 1) and a 2.1mb raster-vector SVG became a 58kb SVG (example 3). Even a many colour JPG illustration was only 227kb in SVG form (example 2).
  • Complicated vector PDFs can be vectorised but result in extremely large files (10-20mb in some cases), so an embedded raster of sufficiently high resolution is almost always 1-10% of the size and still legible when zoomed.
• image-map can be used as a user guide ("Go to this location"), not only an input ("Where did you go?") - if previous inputs / lookups return choice values, these can be calculated into a read_only select, and the focus item(s) will appear selected.

General tips when creating SVGs;

• When using vector art, if you are not using elements of the drawing as choices, it is best to place a partially opaque element beneath the drawing content that is to be the select. This works best for line drawings with text / fine art that is otherwise difficult to select due to the fine target size, refer the diagram in the first example.
• When using raster art, the elements must be placed above it to be visible and selectable, and need to be partially opaque so as not to totally obscure the drawing below. Refer the map in the second example.
• If the elements are filled orange or blue they will be difficult to see when they are selected in Collect or Enketo, respectively. Refer the 'Rarement' option in the fourth example in Collect.
• To make items more visible when selected in Enketo, set stroke paint to 'undefined' and stroke style width to a large value, then the wide outline will appear only when selected. (all examples)
• Shapes or paths must have fill as otherwise only the outine is selectable. This fill can have a very low opacity value so it doesn't appear, refer the circle below 'Rarement' in the third example.
• Groups of non contiguous elements can be selected if the group has the choice value. Refer the lakes in the second example.
• If possible, convert any items used as choices to paths. Collect can select paths, objects & groups. Enketo can generally only select paths, but sometimes also groups (see the Lakes in the map and C014 in the diagram ) and in this example, one object does work (see the 'Rarement' ellipse in third example ) while others don't (see the yellow element and C008-C015 in the first example )
• If possible, create artwork with an aspect ratio that matches your device orientation, and scale the canvas to match, otherwise it will have a lot of white space or require scrolling even when zoomed out in Collect
• Play with PNG encoding parameters, by reducing bit depth, colour type etc and testing different filter/deflate options file size can be drastically reduced with no quality loss. Much more here.

Form:
SVG_showcase.xlsx (86.3 KB)

Images:
images.zip (245.8 KB)

[ahblake]

As a followup - a quick guide to creating a raster based SVG using Inkscape. This assumes you already have your base image and have optimised it for size and clarity.

1. Download and install Inkscape
2. Create a new drawing and drag/drop your image in
   2.1 Be sure to select Embed
   
   
   
   2.2 Go to File, Document Properties and click Resize to content
   
3. Create new elements. Use the Rectangle, Polygon, Ellipse tool for regular shapes, or the Pen or Pencil tool for irregular point to point or free draw shapes
   3.1 Pen / regular Bezier path / Shape None
   
   3.2 Pencil / regular Bezier path / Shape None
   
4. Set their styling. I have found that these settings work well
   4.1 Fill: Flat colour, (in blue for maximum contrast when selected in Collect, or orange for max contrast in Enketo, otherwise green/pink as a compromise). 100% alpha, 50% opacity (so the art underneath is visible)
   4.2 Stroke paint: Undefined (so the wide stroke will appear on select in Enketo)
   
   
   
   4.3 Stroke style: something wide. I usually use 5mm, this is the stroke width that will appear on Enketo select
5. Check your ordering to ensure the image is at the bottom and objects are above
   5.1
6. Set the ID to match your choice name or __id value. Ensure you click Set after or it will not persist.
   6.1
   6.2
   
   
7. If you choose to draw rectangles/polygons/ellipses, select them and choose Object to Path so they will work in Enketo
   7.1
   
8. Save a complete version as your working copy (type Inkscape SVG or Plain SVG) - this version will likely not work properly.
9. Save as an Optimised SVG. You can likely leave all the options as is, this is usually enough to get the SVG to behave in Collect/Enketo.
10. Upload to Central and test your form!

For pure SVG images, instead of following (3), you can instead select an existing element or group of elements and modify their attributes and ID if you want them to be used as the selects, otherwise you can create additional elements under/above existing art, depending on opacity/art fineness.