Jump to content
You must now use your email address to sign in [click for more info] ×

subtracted shape exported to svg


Recommended Posts

 

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.

Screenshot 2021-02-23 at 19.38.27.png

Screenshot 2021-02-23 at 19.37.46.png

Link to comment
Share on other sites

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>

 

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

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 !

Link to comment
Share on other sites

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 by Alfred
Added info

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.4.1 (iPad 7th gen)

Link to comment
Share on other sites

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? 🤯

Link to comment
Share on other sites

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.

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.4.1 (iPad 7th gen)

Link to comment
Share on other sites

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

Or even better this one ...

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.

☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan
☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

12 hours ago, v_kyr said:

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

Or even better this one ...

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.
image.png.f4a2fca138b56dabe2901e51e30f7960.png

 

In Affinity.
image.png.fce2ab28fcc95f38e143311d1801caae.png

iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9  
B| (Please refrain from licking the screen while using this forum)

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Link to comment
Share on other sites

@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 :D -  Ididn´t even need to flip the circle in Ad or anything. Just touching that.

Screenshot 2021-02-24 at 10.43.06.png

Link to comment
Share on other sites

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

image.png.22a9f3f4bdb607b911b27ab55f49e5d0.png

iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9  
B| (Please refrain from licking the screen while using this forum)

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.