Jump to content

How to create properly destructive boolean operations, such as Subtract

Recommended Posts

I create and use SVG icon systems (with the <use /> method) a lot on the web, which means I often only 1 want completely combined path that includes having "holes punched out of it".


But, unless I'm missing something stupidly obvious, I don't appear to be able to do that in Affinity Designer.


If I draw a rectangle and then Subtract a circle out of it, the hole gets punched visually, and it renders fine if opened as a normal SVG, but, if I were to use it in an SVG icon system (or open it in Illustrator), the whole is not actually punched out of it, resulting in a solid image.


I only started using Affinity as Fireworks for some reason stopped being able to open SVGs, but it looks like I can't really use Affinity to do one of the primary things I need it for. If I export the Affinity file as an EPS, open that in Fireworks, punch the shape and export from there it works, but that's quite a long and clunky workaround, when I would prefer just to be using Affinity now as it has a lot of other nice features - and isn't badly broken on Mac, like Fireworks.


So what am I missing?


I've attached an example Affinity file for demo purposes, and I've created a demo on CodePen showing the difference between Subtracting/Punching in Designer and Fireworks, which you can see here http://codepen.io/stowball/pen/VmqvpP and in the attached screenshot.


Any help is greatly appreciated.





Share this post

Link to post
Share on other sites

Sorry for the delay in replying to this thread stowball.


You seem to be seeing the issue reported here which has been logged with our developers to be fixed/improved.

Share this post

Link to post
Share on other sites

I've just found a workaround for this: double-punch the shapes!




1. Duplicate the shape you want to punch

2. Select one of them and the base object

3. Punch

4. Select the duplicate and the base object

5. Punch


You can also combine all the shapes to be punched first and duplicate that then punch, but this does seem to produce slightly larger SVGs than punching each thing individually.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now