Possible to stop vector lines from becoming shapes when importing SVG files?

[audiohack1]

Hi,
New user here again with another question. I've been importing SVG files that I created in Affinity Designer into Moho. It's working pretty well, but quite a few of my vector lines end up being converted into shapes. I'd like to keep them as vector lines. Is it possible to convert the shapes back into lines without redrawing them in Moho? Or better yet, is it possible to prevent the lines being converted into shapes in the first place?

The easy solution is to create all my vector art in Moho and avoid the import. But I'm not ready to give up the convenience of being able to create vector art on the go with my ipad. Hopefully, I'm missing an obvious solution. Thanks.

[Greenlaw]

Can you post screen caps of what the art is supposed to look like vs. how it appears in Moho? I'm guessing you want to see are shapes with visible strokes and what you're seeing are only the fills with no strokes, but it's a little unclear from your description. If this is the case, all you need to do is enable Stroke in the shape's Style settings. And if you don't want to see the fills at all and only the strokes, just disable Fill and enable Stroke in the Style settings.

Using another program for vector art is a valid method, and the SVG format seems to preserve/convert the number of points, placement and curvature pretty accurately. Certainly much better than using the old .ai export format. I use this method mainly for technical art that would be difficult to draw in Moho, and it works quite well.

For organic character art that I will be deforming with bones, I personally find it easier to draw paths in Moho that will be more optimal for rigging and animating with Smart Bones. That said, you should be able to edit the paths imported from the SVG inside Moho just like paths created inside Moho.

Hope this helps.

[Greenlaw]

Additional info: It's been a while since I last used this feature, and it seemed there was a trick to getting exactly the right stroke and fills, so I took a look just now.

I don't use Affinity Designer but I know that in Adobe Illustrator I need to use the Save As... command (in other words, not the Export... command,) and choose .SVG as the format. Then, from the settings window that appears when you click Save, choose SVG Tiny 1.2.

Using this specific .SVG format will save the shapes with their fill and stroke properties for Moho, and any of the earlier format will not. I'm going to assume the same rule applies to Affinity Designer's SVG exporter.

Hope this helps.

[Greenlaw]

Correction: I took another look at SVG import this morning, and the version doesn't have anything to do with this: 1.0 to 1.2 from Illustrator works fine in Moho. The difference is in which command you use.

[Export As....SVG] will export only the shapes and it does not preserve properties like Stroke and Fill. Avoid this method.

[Save As..SVG] will export the shapes along with Stroke and Fill properties. Use this one.

I'm not sure how this relates to Affinity Designer, if at all.

[audiohack1]

Thanks for your detailed replies. I did some more testing. It looks like it's only happening to the vector lines that were created in Affinity Designer using AD's Vector Brush tool. Vector lines made with AD's Pen Tool and Pencil Tool import into Moho exactly as drawn and with the same, or very similar, node placement.

Lines created with AD's Vector Brush Tool, however, are a different story. The line imports in to Moho and looks like the original, but Moho adds extra nodes around the perimeter of the line causing it to behave like a shape when editing it further in Moho.

I'm using File=>Import=>Vector File=>SVG File in Mogo to bring the SVG file in from Affinity Designer.

(Sorry for the large size of the screen caps, first time posting images on a forum)

[synthsin75]

That's to be expected. Vector brushes generally mean that, under the hood (even if not displayed), the entire boundary of the brush is made of vectors...instead of just a center line.

[Greenlaw]

Wow...that IS weird. I see is three things going here: Moho is tracing the outline of the path in addition to including the centerline path, plus it's auto closing the centerline path. I've never seen this before but, as mentioned, I've never used Affinity Designer. The result is kinda like a combo of the Brush and Blob Brush tools in Illustrator, but weirder. (Hmm...I wonder what happens if I use Illustrator's Brush or Blob tools for Moho.)

As for the extra 'curly' knot, I sometimes see that when using Moho's Freehand tool.

Sorry, my only suggestion is don't use the Brush tool, and stick with Pen and Pencil. Hopefully, you will find a more satisfying solution soon.

[audiohack1]

Thanks again for the replies. For now, I'll be avoiding AD's Vector Brush for stuff I plan on exporting and animating in Moho. Either that or be prepared to redraw/trace any AD Vector Brush strokes in Moho using the Freehand tool. Or better yet, start creating more art in Moho and really learn the ins and outs of the software.

[Greenlaw]

All that said, using any freehand vector tool (in Moho or in a third party program) to create character art that will be rigged with bones is not ideal because you don't have control over point placement. You can use freehand vector art of course but don't expect to get good deformations in the joints. IMO, It's better to plot optimally placed points with the click-and-drag method (in Moho or in another program.) Once you get the hang of it, you can draw very accurately this way and reasonably quickly. I admit this is not nearly as fast as freehand drawing but, for me anyway, getting predictable deformations with minimal fussing makes it worth the effort. The extra work upfront really pays off later during animation.

If you really need an 'organic' look, I think it's better to use bitmap art. (I often use a hybrid of vector and bitmap techniques in the same rigs.)

But it probably depends on the design/style choices you make and how you intend to animate them. Experiment with a a lot of different techniques and see which ones work best for you. And if you come up with a new technique, please share it here.

Years ago, when I started working on my first Moho project Scareplane, I thought I'd be creating all my art as vectors in Adobe Illustrator since that was what I was most familiar with for vector drawing. In the end, I scrapped everything I made in Illustrator and just drew all my character art directly in Moho using the Add Points tool. That's pretty much what I've done since for vector-based character art and it's worked out really well for me.

Of course back then, vector import to Moho (ASP 9.5 actually) was pretty bad, and it's come a long way since.

[audiohack1]

More great advice. Thank you! Especially this

...getting predictable deformations with minimal fussing makes it worth the effort. The extra work upfront really pays off later during animation. ....

And based on the Moho content in your Demo reels, it's pretty hard to argue that great looking character art can't be made 100% inside Moho.

[Greenlaw]

Thanks for the nice comments!

I've been working on a series of tutorial videos including one about drawing for rigging with Moho's vector tools. Hope to start putting these out over the upcoming holidays.

[SimplSam]

I have tested this in Affinity/Moho, and the only way that I can get it to fail, as in your example, is if I assign a Fill color to the Vector Brush - which is not normal.

Line and Fill

In this first example, I have Fill but with 80% and 100% Line opacity. With 100% Line the Fill is hidden, as it would be if the Fill was the same color as the Line.


Affinity - Fill with 80% and 100% Line opacity

Line Only

If I create with just a Line color (or remove Fill) then the shape is faithfully reproduced in Moho.


Affinity


Moho (imported SVG)

[Greenlaw]

Hi SimplSam,

Thanks for checking this out in Designer and explaining what you found. Good to know in case I ever drop Illustrator and switch to Designer.

@audiohack1, I suspect that in SimplSam's first example, if the line was curved, the fill would become visible even when it's the same color, so the best solution for an open curve is to not have fill enabled at all.

[audiohack1]

I have tested this in Affinity/Moho, and the only way that I can get it to fail, as in your example, is if I assign a Fill color to the Vector Brush - which is not normal.

Thanks for testing that. I can confirm your result regarding the fill (didn't realize I had a fill color assigned to the Vector Brush when I drew the original line in Affinity Designer). Unfortunately, I'm still left with an imported vector line without it's original "central spine" of nodes that I can easily reshape in Moho without having to deal with the nodes around its perimeter. But as Greenlaw pointed out, animating brush vector strokes can be fiddly compared to animating lines created with the Add Point/Pen or Pencil tool.

[SimplSam]

Groovy. The other thing to mention is that it is Affinity that changes the Vector Brush strokes from fat-line to shape during export to SVG. If you reopen the exported SVG file in Affinity - you will see a shape like that when imported to Moho.