Creating masks in Affinity Designer

Please note that you can also create masks in SVGator, so there's no need to use a third-party editor tool. To learn how to create one, watch the following SVG Masks Tutorial. If you would rather create the mask in Affinity Designer, please follow the steps below.

Similar to other vector editing softwares, in Affinity Designer the object you want to use as a mask must be in front of the other element. In this case we will use the blue circle to mask the orange star. In The Layers panel, right click on the blue circle (Ellipse) and choose “Mask to Below”.

creating mask affinity

Go to File and choose Export…

creating mask affinity

Select SVG format (the orange file icon at the top of the panel) and click Export.

creating mask affinity

Choose a name and the destination folder:

creating mask affinity

Import the SVG file into SVGator.

Please note that there's a browser compatibility error with Safari. In case you are running SVGator in Safari, the clipping mask will not be visible after the import. You can read more about this here.

More articles:

How to Create Masks in Adobe Illustrator | SVGator Help
The object you want to use as a mask must be placed in front of the other element. Select both objects, right click, and choose “Make Clipping Mask”.
Creating Masks in Gravit Designer | SVGator Help
The object you want to use as a mask must be in front of the other element. Select both objects, right-click, then choose “Mask with Shape”:

Still got questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can.