svg animation

Create a new SVG animation now!

New project

Creating masks in Adobe Illustrator

The object you want to use as a mask must be placed in front of the other element. In this case, we will use the blue circle to mask the orange star. Select both objects, right click, and choose “Make Clipping Mask”.

svg animation

Make sure you rename the <Clip Group> from the Layers panel with something similar as in the image below. Untitled groups and layers will not be exported.

svg animation

To export, go to File, Export, Export as…

svg animation

Choose SVG format and select the destination folder

svg animation

Set the export options from the SVG Options panel like in the image below and click OK.

svg animation

Import the SVG file into SVGator. It should look like this:

svg animation

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.

Unfortunately, currently you can't create masks in SVGator, but future updates will include this feature as well. If you are planning to use masks in your animation, make sure that you've created them in your vector editor, before you would import the file.

More articles:

Creating masks in Gravit Designer

Creating masks in Affinity Designer


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