Survey123 custom SVG file

12-01-2022 09:14 PM
New Contributor II


I am attempting to create a custom clickable SVG file for a survey and am having issues. As a test I have created an image with two colour blocks in adobe AI. I have enabled compound paths and called them 'yellow' and 'red'. Below is the code and I have attached screenshots of the file in AI.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="RY" xmlns="" xmlns:xlink="" x="0px" y="0px"
viewBox="0 0 450 100" style="enable-background:new 0 0 450 100;" xml:space="preserve">
<style type="text/css">
<g id="colours">
<path id="red" class="st0" d="M216.09,100H0V0h216.09V100z"/>
<path id="yellow" class="st1" d="M216.09,0H450v100H216.09V0z"/>

It is set up in Survey123 Connect as a 'select_one ry' and with the appearance 'image-map'. The choices are 'red' and 'yellow'.


The survey shows the image and allows me to click however it does not sumbit a value so I assume there is something wrong with my ID or how I set it up in AI?  Does anyone have any advice on what I am missing in this process?



0 Kudos
1 Reply
MVP Regular Contributor

Did you by chance set bind::esri::fieldType to null?

I just did a quick test, and your SVG seems to work beautifully:


I just copy-pasted your above code as-is.

0 Kudos