nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

square.svg.zip

Find more posts tagged with

Accepted answers

BrettStokes

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

All comments

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,

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

BrettStokes

Hi Jing,

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

Brett

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.