How to Make an SVG in Affinity Designer

Step 1 - Create your document in Affinity Designer

Open Affinity Designer and on the Welcome page click New Document. Choose your preferred document size and click Create. This will create a new blank document or canvas area.

New document Affinity

Step 2 - Add a Pixel Layer 

In order to start your project you need to first add a Pixel Layer. On the lower right at the bottom of the Layers menu is a page symbol with dots. Click on the icon.

Create Pixel Layer Affinity

Step 3 - Draw out a Triangle

Affinity Designer is preloaded with a wide selection of objects to start out with. But for this example we will make a Star from scratch. We will be using the Triangle Tool from the Shapes Menu on the left side panel. Shapes will automatically be added with their own pixel layer.

Click on the little white arrow on the Shapes Menu. Select the Triangle Tool at the top of the menu. On your workspace, draw out a Triangle. Shift + Click to keep it uniform if needed.

Triangle Tool Affinity

Step 4 - Duplicate the triangle and reposition

To create a simple Star we will duplicate the triangle 3 more times and rotate. Right click on the Triangle layer and select Duplicate or press Ctrl + J. With the duplicate layer still selected, right click, select Transform, click Flip Vertical.

Affinity Transform Tool

Shift the top triangle down.

Reposition triangle

Step 5 - Duplicate and Rotate

Select both of the triangles, press Ctrl + J or right click on the layers and click Duplicate. While the duplicates are still selected, right click, select Transform and click Rotate Left (or Right, either one is fine).

Duplicate and rotate

Step 6 - Make a Compound Path

We will combine the triangles by using the Compound Path option. Select all of the triangles and click on the Layer Menu at the top of the screen. Click Create Compound.

Make a compound path Affinity

The triangles are now grouped together. You can see the grouping under the layers menu on the right panel. The layer has a mini view of the shape with a downward arrow. Click on the arrow and you will see the individual triangles beneath.

Compound path object

You can reposition, resize and change the color as you wish without causing any distortion.

Combine design elements together

Now that you have created a basic design you can combine other vector designs.

Step 1 - Copy and Paste an SVG design

For this example a delightful Sunflower clipart svg was added to the Star vector as a design background. Open a SVG design of your choice. If the SVG contains multiple elements, go to Layer and Ungroup all. Next, go to the top of the screen and click on Add. This will create a single curve layer. Right click the layer and select Copy.

Turn SVG into a curve Affinity

Go back to the Star design, right click anywhere on the workspace and select Paste.

Paste SVG into workspace

Step 2 - Duplicate layers and resize SVGs

Reposition and resize the SVG so that it fully covers the Star. Under the Layers Panel, right click and Duplicate the Star layer. Do the same for the Sunflower SVG. Change the color of the duplicate Sunflower using the Color Panel top right. We changed our duplicate to black.

Click on the duplicate to activate the rotation handle at the top and rotate slightly. The layers need to be in the correct order for the Intersect option to work. We want the Star layers to be the first and second layer. Click on one Star layer and at the top of the screen (in the middle) click on Move to Front. Do the same for the second Star layer if needed.

Duplicate and rotate Affinity

Step 3 - Use the Intersect option 

The Intersect option will create a new object from the objects selected. Think of it as cutting the Star out of the SVG design. We will need to repeat this step twice for each SVG. First, under the Layers panel, click to select the top Star layer. Holding Shift, click to select the bottom most layer as shown in the image. At the top click on Intersect.

Use Intersect Affinity

Step 4 - Repeat the previous step

Once Intersect has been applied to the first set of layers we will repeat the same step with the next set of layers. Select the second Star layer and the Sunflower layer beneath it. Click on Intersect. What should remain is the Sunflower design in the shape of the Star.

Intersect result Affinity

Save the SVG design for use with other programs

Once you have completed your design, the next and final step it to save it. At the top left of the screen, click File and select Export. The Export option will open a menu with various file formats.

Affinity Designer supports a wide selection of file formats. Click on the SVG file format to select it, choose the Preset SVG (for export) and click Export. Choose a file destination. Save as Type should only show SVG as an option and click Save.

Export option Affinity