TABLE OF CONTENTS

These are the primary contents covered in this article:
Step 1: Create a Mask File with Adobe Illustrator
Step 2: Create Path
Step 3: Export Mask File

This article will demonstrate how to create a Mask file from any image by using the Image Trace tool to create a vector from an image file. If you already know how to create vector files with AI tools, just skip step 1 and go straight to step 2!

STEP 1: CREATE A MASK FILE WITH ADOBE ILLUSTRATOR

1.1: Prepare:

To create a SVG Mask file using AI, you must first prepare a shape image for the Mask (with .png, .jpg, ... format)

1.2: Open Adobe Illustrator and create a new file with the dimensions 400x400 pixels

1.3: On the newly created AI file, open the star shape file from step 1.1.

Adjust the length of the largest edge = 400 pt, the remaining edge proportionally.

Hold down Shift and drag the corners to align it, so that the star is in the file area.
Convert image to Vector with Image Trace tool (select option Black & White). Click the Expand button to apply.

1.4: Ungroup layers

Ungroup the layers of the star vector. Then click on the white background and Delete.

1.5: Cut the file dimensions as close to the star shape as possible

Select the Artboard tool, then double click on the star shape layer to cut the file close to the shape.

STEP 2: CREATE PATH

Return to the Selection Tool (shortcut V), select the shape area and go to Object Menu > Compound Path > Make. Or press the keyboard shortcut Command+8 or Ctrl+8.

STEP 3: EXPORT MASK FILE

3.1: Check Path before exporting SVG file

Go to File Menu > Export > Export As


On the SVG Options window, select Show Code. Then check on the .txt frame, make sure you see the code "<path".

3.2: Export SVG files

In the Export As command box, click the OK button to start exporting the SVG file after you have made sure that the file contains the Path code.
We can check the Path code again in the exported SVG file by: Right-clicking on the SVG file and choosing Open with Edit Text or Notepad:



Please only use the Export command to export the Mask file, not the Save As command.

Read more about Define Design: Mask

Updated on: 28/07/2022