Inkscape svg - path offset from image in Survey123

[Jing_Sun]

When using image-map to display svg images created by Inkscape, the clickable areas always offset from the underlying image, while Adobe Illustrator's product doesn't have this issue. 

The viewBox parameters were set up correctly according to the blog Using the image-map appearance in Survey123

I presume the issue is caused by a transform statement added by Inkscape automatically when saving the image, simply editing this statement (either delete or set to '0, 0') will relocate the underlying image. 

I wonder if this is because I am doing something wrong or Survey123 doesn't work well with Inkscape svgs, thank you. Brett Stokes

[BrettStokes · Accepted solution]

Hi Jing,

You're not doing anything wrong! Inkscape is adding that transform function because you have your layer selected when relocating your graphics on the screen (as opposed to the <path> itself which just updates it's 'd' values).

You can check this for yourself by creating a new SVG in Inkscape and draw a new path. Save your SVG without adjusting it at all - don't move, scale etc. You won't get a transform function added to the layer group. Likewise, you can draw a new path, make sure the path is selected (not the parent layer), adjust it by moving etc and you still won't have a transform function applied. 

I guess the key is to make sure you're not applying transforms to groups when editing your image.

Brett

[Jing_Sun]

Hello Brett,

Thanks a lot!

Your are correct that moving the path doesn't trigger [transform], the operation that triggered [transform] in my case was actually 'Resize Page to Selection'.

Then I realize that Inkscape does [transform] when resizing canvas.  

By default it opens a portrait A4 page, changing the page size or orientation to any other value will add a transform statement. Below is an empty portrait A5 page outputted by Inkscape. 

Does that mean we can't resize the page when using Inkscape to create svgs for Survey 123? 

I also found that by default, Inkscape outputs svg with width, height & viewBox parameters in the unit of (mm), while Survey 123 treats those values as (px), meaning clickable areas will be dramatically resized in Survey 123. The solution is to change those units to (px) and define Scale to 1. 

Cheers,

Sun

[KerryKang1]

I had some issues with clicking svg in the app, but could fix the issues after regenerating svg file in px and scale 1 setting. Thanks for sharing your tips!

Cheers,