subtracted shape exported to svg

[IsabelAracama]

 

Hi

Could someone explain to me why when I apply a subtract operation to a shape, and then export this shape to svg and finally open it in a different vector software (in this case it was Illustrator), the subtract boolean is not there anymore? Example attached of what I do in AD and what I see when I open the exported svg in Ai. I guess this is related to the nature of svg itself, but when I do the same in Illustrator and then open it in AD, it respects the operation.

Thanks for the help.

[Old Bruce]

Has to do with the fill mode, winding vs alternate, the inside gets fill with one but not the other.

[v_kyr]

Always also check how a webbrowser (Firefox, Chrome etc.) shows things up here and how the the plain generated SVG code looks like inside an Texteditor then. That will give you some indication and hints of what might go then wrong here between apps.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 800 600" version="1.1" 
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" 
     style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g transform="matrix(1,0,0,1,89.3302,32.4528)">
        <path d="M283.706,84.779C371.258,84.779 442.339,157.502 442.339,247.077C442.339,336.652 371.258,409.375 283.706,409.375C196.153,409.375 125.072,336.652 125.072,247.077C125.072,157.502 196.153,84.779 283.706,84.779ZM283.706,136.177C347.634,136.177 399.536,185.87 399.536,247.077C399.536,308.284 347.634,357.976 283.706,357.976C219.777,357.976 167.875,308.284 167.875,247.077C167.875,185.87 219.777,136.177 283.706,136.177Z" style="fill:rgb(231,231,231);"/>
    </g>
</svg>

 

[IsabelAracama]

Hi Old Bruce

Interesting! Thanks. Been checking and trying. Now I realised it is only with the donut shape I created by subtracting that it doesn't work, cause if I apply a different subtract op to say, create a crescent, it works.

So I guess there's nothing I can do to make it work on a donut shape? 

Thanks v_kyr you too !

[Alfred]

If you’re subtracting a smaller circle from a bigger one to make a donut shape, try converting the smaller circle to curves and reversing it (Node Tool > Reverse) before performing the subtraction. In this particular case I would just use the Donut Shape Tool, but I’m guessing that you’re looking for a more general solution to the problem.

Edit: ‘Horizontal Flip’ as suggested by @G13RL is better than ‘Reverse’ because you don’t have to convert to curves first.

Edited February 23, 2021 by Alfred
Added info

[G13RL]

Hi @IsabelAracama,

Try rotate the outer shape by -90° and "Horizontal Flip" the inner shape before subtracting.

[IsabelAracama]

Thanks Alfred and G13RL both worked very well!

Yes more of a general solution to a problem.. But now.. why this? I cannot get to understand why if reversing or flipping it works? Some mathematical explanation that will send me bog eyed? 🤯

[Alfred]

I’m sure there’s a mathematical explanation, Isabel, but all I know is that when working with the contours/curves for the glyphs in a font it’s a standard thing to reverse the direction when you want to create a counter (or ‘hole’) for something like the middle of a letter O.

[IsabelAracama]

Thanks everyone! 

Anyways if there was a mathematical explanation I'd be just pretending I get it when explained to me ahhahah 

[v_kyr]

See this related topic, which is about pretty much the same ...

• Why won't Designer Boolean DIFF this very simple shape?

Or even better this one ...

• Fill Mode Winding (Non Zero)

There are often situations where you have to tricks around a little bit in order to get the results you possible want. - Another one here is for example exporting from Affinity a simple rect shape as a SVG path when needed and not as the default SVG rect object. It's not adhoc possible with a rect shape from Affinity also not just with a convert to curves here, you really have to explicitely add some help node with the node tool here to the rect (makes it 5 vector points instead of the default 4), so a rect gets exported as a polygon and as paths then. - There are other such SVG generation dependent things which need some tweaking in order to be written out in a wanted SVG manner.

[iconoclast]

I can't test it with Illustrator, but I made a donut-shape with Designer, exported it as svg and opened it in Inkscape without any problems. I'm a Windows-User. So could it be a Mac-Problem?

[IsabelAracama]

12 hours ago, iconoclast said:

I can't test it with Illustrator, but I made a donut-shape with Designer, exported it as svg and opened it in Inkscape without any problems. I'm a Windows-User. So could it be a Mac-Problem?

Thanks iconoclast. Not sure if you mean you tried with an actual Donut shape from the pre-made shapes or you did this with the method I mentioned, which is using a subtract boolean to create the donut  - not that I didn't know there was the pre-made donut shape, but more of a technical thing I wanted to understand cause it seemed strange AD was not behaving as Illustrator and other program were. So I imagine this is just a behaviour that is the same for both mac and win. Thanks a lot for the contribution though. 

[IsabelAracama]

12 hours ago, v_kyr said:

See this related topic, which is about pretty much the same ...

• Why won't Designer Boolean DIFF this very simple shape?

Or even better this one ...

• Fill Mode Winding (Non Zero)

There are often situations where you have to tricks around a little bit in order to get the results you possible want. - Another one here is for example exporting from Affinity a simple rect shape as a SVG path when needed and not as the default SVG rect object. It's not adhoc possible with a rect shape from Affinity also not just with a convert to curves here, you really have to explicitely add some help node with the node tool here to the rect (makes it 5 vector points instead of the default 4), so a rect gets exported as a polygon and as paths then. - There are other such SVG generation dependent things which need some tweaking in order to be written out in a wanted SVG manner.

Thanks for the links! I'll look at them now. Yeah, workarounds are good friends of mine hhh, but I don't always get to understand why some of them worked out when applying them, like in this case... it's a bit of a mystery to me, but I get it's an svg so I'll just take it as is, cause it worked and that's enough.

[iconoclast]

8 minutes ago, IsabelAracama said:

Thanks iconoclast. Not sure if you mean you tried with an actual Donut shape from the pre-made shapes or you did this with the method I mentioned, which is using a subtract boolean to create the donut  - not that I didn't know there was the pre-made donut shape, but more of a technical thing I wanted to understand cause it seemed strange AD was not behaving as Illustrator and other program were. So I imagine this is just a behaviour that is the same for both mac and win. Thanks a lot for the contribution though. 

Hi Isabel!

I created a donut outoff two circles made with the ellipse tool. One big circle and a smaller one. And I subtracted the small one from the big one. Then I exported the shape as an svg and opened it in Inkscape. That worked without problems. Sorry, didn't think about that there is a Donut Tool in the Shapes Menu.

[IsabelAracama]

3 minutes ago, iconoclast said:

Hi Isabel!

I created a donut outoff two circles made with the ellipse tool. One big circle and a smaller one. And I subtracted the small one from the big one. Then I exported the shape as an svg and opened it in Inkscape. That worked without problems. Sorry, didn't think about that there is a Donut Tool in the Shapes Menu.

Ok, good to know! I now am diving deeper into this issue and learnt by readin the links v_kyr left in this thread that it works just fine by changing the fill attributes into Illustrator. All solved and clear now. Not that it didn't work, just a small tweak when importing the svg into other software.

[firstdefence]

Ok I just tried making donuts; I'm so hungry for some reason lol, anyway, I used the donut tool and then did a subtract with two ellipse shapes, then exported both to an SVG and open that SVG in Illustrator, both donuts looked fine and imported correctly as compound paths.

The blue is the donut tool.

 

In Affinity.

[IsabelAracama]

@firstdefence -thanks for the help

I then imagine you have this option just as I have it now in Illustrator ... At the very beginning I had the icon on the left selected. When I changed to the other, It worked fine  -  Ididn´t even need to flip the circle in Ad or anything. Just touching that.

[firstdefence]

Yes I had that already set to the right icon: even/odd fill rule.

[FrankSSt]

wow, this is so cool. I ran into the same problem, opened a new thread for it and Alfred was kind enough to point me to this thread. this fixed it for me and I learned a lot.

...but what is even cooler: Before I posted my question, I did a Google- search on 'subtracting shapes' and came across a YouTube Tutorial by Isabel. Little did I know she ran into the same issue and asked about it here in the forum at almost the exact same time I watched her video 

regards

frank

[IsabelAracama]

@FrankSSt - haha indeed! To make things fantastic, I like to think this is some kind of synchronicity or even better... it's....

 

hahah 😅

[iconoclast]

My suspicion? You're conspirators for a clever marketing campaign. 😉

[IsabelAracama]

@iconoclast hahaah well... clever and marketing are a total oxymoron at least when you talk me... But I am open to ideas! hahaah