For the .svg, try the workflow here A Guide to Making SVG maps with MapShaper - Resources | Simplemaps.com
Also see this post for a general guide on their usage in S123 Work with SVG files—ArcGIS Survey123 | Documentation
The output will be all black, so open it in Illustrator and edit it there for colors. Do not save in Illustrator; this will overwrite your id paths entirely. Instead, export it.
Afterwards, open it up in notepad or another text editor, and find/Replace all instances of "id=_" with "id=" and you should be good to go.
Be warned as well with SVGs; S123 will only show them to a max size of about 750 px high, even if you resize them or the questionheight parameter. So if your features are too small, you might not be able to select everything you want.
A possible solution is dividing up your area into regions, and then concatenating the answers to all the regions into one field for the final data. Another thing I recently did was creating a second question that had all the options as the SVG, but filtered itself based on what was selected in the SVG question. I then had my following questions filter based on the two questions, or off of a hidden question that combined both choices.
Questiontype | Name | label | Relevant | Choice filter |
select_multiple Streets | Streets | Streets | | |
select_one YesNo | StreetsYes | Are the streets on the map too small to be selected? | selected-at(${Streets},0) This makes it only appear after you've selected one choice already | |
select_multiple Streets | Streets2 | Streets | ${StreetsYes} = 'Yes' | (not(selected(${Streets}, name))) If you are combining with another filter clause, the not() statement must be completely wrapped in parentheses, as above, or else your filter will not work correctly. |
I will also say I don't know how to edit them well enough to put labels on them, or a basemap, so if you can figure that out, I'd love to know how to do it.