By setting the appearance of a select one or select multiple question to image-map, the question will be presented as an image with selectable regions of the image as choices. This appearance requires an SVG file to be provided in the survey's media folder, and the name values of the choice list to match the path IDs for the SVG file's regions. The exact file name of the image file (including the .svg extension) must be entered in the media::image column of your survey worksheet.
Note:
image-map is not supported in the Survey123 web app.
Scalable Vector Graphics (SVG) is an XML-based language for 2D vector graphics. You can create your own SVG image using a vector graphics editor or a text editor. There are also many websites offering free SVG files and tools for converting raster images to SVG format. An SVG file can include one or more raster images in the background.
An SVG file can be modified in a text editor. The following example shows a simple SVG file depicting compass directions. Note the path IDs for each region.<svg
xmlns="http://www.w3.org/2000/svg"
height="180"
width="180">
<g style="fill:#A9A9A9">
<path id="North" d="M 75,75 90,0 105,75 Z"/>
<path id="South" d="m 75,105 15,75 15,-75 Z"/>
<path id="West" d="M 75,75 0,90 75,105 Z"/>
<path id="East" d="m 105,75 75,15 -75,15 Z"/>
</g>
</svg>
Minimum requirements for SVG files
The following are the minimum requirements for an SVG file that can be used with image-map in Survey123:
- It must contain at least one <path> element that has an id value. Other elements such as <rect>, <ellipse>, <circle>, <image>, and <text> cannot be used for selecting choices. A <path> element cannot be used for selecting choices if it does not have an id value.
- It cannot contain empty groups. Groups are enclosed by the <g> and </g> tags. If your SVG file contains one or more empty groups, none of the image's regions will be selectable.
- It can have only one group per nest level. Your SVG file can have many nested levels. However, if a level contains more than one group, none of the <path> elements will be selectable.
- It must have a defined height and width (viewport). If your SVG file does not have a viewport, the selectable regions may become offset from the underlying image.
- It can include an optional viewBox attribute if it matches the viewport. If the viewBox attribute differs from your height and width values, the selectable regions will be offset from the underlying image.