SVG import from Affinity Designer

[AxeWizard]

Hi folks,

I've just recently bought Moho and I've hit my first major stumbling block. Whenever I try to import from Affinity to Moho using an SVG, I get a bunch of odd shapes. Some are fine (everything on the head is OK), some go wonky (legs, arms, part of the collar). See attached image.
My workflow is to draw as I want it to look, then separate all the pieces, convert everything to curves, export the vector shapes as SVG and the custom brush details as PNG's.
My SVG settings are pretty basic. I've noticed the wonky shapes are worse when I have "use relative coordinates" checked.
I've read forum posts here, and watched a few youtube videos but they're all for older versions of moho/affinity so something might have changed in the meantime.
Anyone here work regularly with Affinity and Moho who might know what is going on and how I can fix it?

I know the first answer is going to be "redraw the shapes in moho". Moho's drawing tools are a frustrating nightmare for me. I'd like to avoid using them as much as possible. But at the end of the day, if that's my only option I guess I'll do it.
The only other format I've had success with is PSD, but that rasterizes everything, which is not ideal. EPS won't import at all. No option for AI export.

Thanks in advance for your help!

[slowtiger]

I don't really see what you're complaining about, the only shapes which seem odd are the thighs, and that can be fixed in a minute in Moho. Everything else looks fine, in fact much better than what we have to deal with other import sorces.

[AxeWizard]

In that screenshot the following need fixing: right collar, right upper arm, right and left elbow pads, right and left thighs and right kneepad. Also the overlaps for the top and bottom arms should be perfect circles, but they've been squashed in Moho.
It seems to be random what goes wonky every time I import the SVG. Previously I've also had both the top and bottom sections of the arms do the same thing the thighs, and parts of the face as well. That's not an insignificant amount of things that need to be fixed.

I don't think it's unreasonable to want to know why this is happening, and if possible, how to prevent it.

[slowtiger]

No, I didn't see any of them.

I'd ask myself if any of this would a) cause any trouble in animation and b) be visible to anyone. I only adjust for a). Have you even tested the imported stuff for correct behaviour when bound to bones and moved/distorted?

And no, there's no way to prevent this since Affinity and Moho each use a different Beziér point model. Any translation is only approximately. This is why we always advise to design critical parts directly in Moho.

[Maestral]

Aside from 'Relative coordinates', have you tried 'Flatten transforms'? This would reduce the transform data within svg and might help in preserving the imported shapes.
Also, try to use 'pure' symmetrical beziers and try to avoid asymmetric ones (should not be much of a problem due to your style).
Check for close (doubled) curved points,
Open paths,
Clipping,
Trims,
Cuts,
...etc.

The usual vector file tightening usually does enough in regards to preserving the original vectors.

[AxeWizard]

To answer your points:

a) I would say that yes, concave elbow pads that don't align with the edge of the arm would cause trouble in animation. Particularly when the arm bends. And although I haven't gotten to the point of testing yet, I would still assume that on something like the collar, where the line is meant to be straight, the rogue bezier might do strange things. Which leads in to b)

b) would this be visible to anyone? I say yes. The style I'm using is very geometric. Simple shapes, simple curves, simple angles, straight lines, precise alignment and so on. This means that when part of a shape doesn't conform to that geometric style, I believe it will stick out like a sore thumb.

And no, there's no way to prevent this since Affinity and Moho each use a different Beziér point model. Any translation is only approximately. This is why we always advise to design critical parts directly in Moho.

Thanks for the info. That's not something I was aware of. I've done some more googling and some more tests based on this tidbit. Seems this is a common problem with affinity and SVG exporting. One person had some success exporting to PDF, opening the PDF in Affinity, then exporting that to SVG. I tried the same and got a much better and consistent result.
The only parts behaving strangely were the elbow/knee pads and the sole of the foot. Given that the pads are identical, I'd really only have to redraw 2 objects in Moho now. And now that I'm looking at them, I think I might have to make them bleed off the edge and mask the layer anyway. In any case, 2 object redraws is way more reasonable. Maybe I got lucky, and the next thing I make will come out 90% crazy with this PDF trick.

Still, if anyone else has any 100% accuracy solutions I'd love to hear the-

have you tried 'Flatten transforms'?...
Check for close (doubled) curved points, Open paths, Clipping, Trims, Cuts, ...etc.

Flatten Transforms. That did it. 100% perfect import. I can't believe it. I thought I had tested every option but I must have missed that one, or combined it with relative coords or something.
And as a matter of course, I did go through and check for those other things you mentioned. Everything looked OK.

Thanks slowtiger and maestral. You guys are lifesavers!

[slowtiger]

As a more general advice, always design with the animation abilities of your chosen platform (Moho) in mind. In your case, I'd make the elbow and knee patches complete ovals and use the arm or leg as a mask, to ensure that no matter how strong I deform the arm or leg, the patch will always touch the sides.

[uncle808us]

I am using Affinity Designer and Anime studio pro 11.
Where is the Flatten Transforms. Option?
In Affinity Designer or MOHO Animestudio Pro11?

[AxeWizard]

Where is the Flatten Transforms. Option?

In Affinity Designer. But you'll have to use the export persona (top left next to pixel persona button).
Select the layer/group you want to export in the layers panel, then right click and create a slice.
Then in the slice tab you should be able to bring up the settings. Set it to SVG, and you should see a bunch of options like in my screenshot above. Make sure you have the same settings I have there, as well as "flatten transforms". So only "hex colours" and "flatten transforms" should be checked.
Hit the export button in the bottom right of the slices panel.

EDIT:
Some other things to be aware of:
only curves will import correctly. If your objects have (pixel) or the name of a shape (eg. Rounded Rectangle) you'll have problems.
Basically, you'll need to select every object and hit ctrl-enter (on PC) to convert to curves.
This is destructive, so maybe make a copy before you do that.
Pixel layers get imported as giant black squares. Avoid using them, or export/import them as PNG/PSD.

[uncle808us]

Thank you AxeWizard. I understand.

[jediha]

Just for anyone who comes at this post.
Install this script: https://mohoscripts.com/script/ss_svg_import
It really works well with affinity SVG export to keep all you folder/groups!