SVG, short for scalable vector graphics, is a file format traditionally used for two-dimensional images. These files are easily adaptable and optimized to use on the web or with cutting machines. Affinity Designer is an editor for vector graphics, but can you open an SVG file in this application?

Affinity Designer can open SVG files. This application works differently from its competitors, like Inkscape or Illustrator, in that it imports these files as embedded documents. Therefore, additional steps will be taken to edit the file.

In order for you to edit an SVG file that is imported as an embedded document in Affinity Designer, you will need to release the vector properties into individual layers first. This process can be a bit tedious and frustrating, so keep reading for step-by-step instructions on importing and editing SVG files in Affinity Designer.

How to Import SVG Files into Affinity Designer

When an image is embedded, all the contents of the file or document have been locked into a single layer. Releasing them from the embedded layer allows you to edit the image elements; otherwise, you could only rotate or scale the file once it’s been imported.

Whenever you open a vector file into Affinity Designer, the application imports it as an embedded document. Here are a few simple steps to import your SVG file into Affinity Designer and make it editable:

1. Open Affinity Designer and navigate to File > Place.
2. Select the file you want to import and click Open.
3. Select the image on the canvas, and click on Edit Document in the toolbar at the top of the canvas. The application will open the image in a new tab.
4. In the panel to the right of the canvas, you’ll see the layer; click on the arrow to the left of the Layer 1 icon.
5. Now you should see the series of individual layers; select them all by pressing CTRL + A.
6. Right-click the layers to open up a menu and select Release. Each element of the image should be on an individual layer.
7. With the layers still highlighted, right-click on the layers and Select Copy.
8. Go onto your canvas, right-click and select Paste.

Now you should have an editable image on your canvas with each object in its own layer. Other file formats that will require these steps to import and edit are PDF, EPS, and AI.

How to Create An SVG in Affinity Designer

Now that you know you can open an SVG file in Affinity Design and the steps to make it editable, you might be wondering if it’s possible to make a two-dimensional SVG in Affinity Designer.

You can make an SVG as basic or complex as your understanding of the application will allow. It primarily depends on how well you know some of the functions. Let’s cover a few in this simple SVG design to help you become acquainted.

Create Your Shape

This series of instructions will focus on starting your new design and creating your first basic function. It will help you become acquainted with the Shape Tool and get to know the functions in the Layer Panel.

1. Open Affinity Designer and select New Document on the Welcome Page
2. Select the size of the document, then click Create.
3. In the lower right-hand corner of the Layers Panel, select Add Pixel Layer
4. From the Shapes menu, select a Shape Tool to use
5. Draw out the shape; shift + click will keep it uniform

Duplicate Your Shape

This series of instructions will teach you how to duplicate and position shapes to create a slightly more complex and elevated design.

1. If you want to duplicate the shape, click on the shape and select Duplicate (CTRL + J).
2. Select the copy and click Transform and one of the following options
   • Rotate Left
   • Rotate Right
   • Flip Horizontally
   • Flip Vertically
3. Repeat the Duplicate step as many times as needed.

Combine Your Shapes

Now that you’ve created various shapes, you must combine them to create one compound shape. Affinity Designer has a few basic shapes to choose from in the Shape Tools, so learning to duplicate and combine allows you to create more unique shapes for your design.

1. If you want to combine your shapes, select all the shapes and navigate to the menus at the top left-hand corner of the screen, select Layer > Create Compound. Your shapes will now be grouped together
2. Resize, reposition and change the color as desired.

Set Your Background

You can choose to leave your compound shape as a solid color and move on to exporting your SVG, but if you would like a more dynamic design, set a background. Once you’ve done that, bring your design to placeit.net and mock it up on some merchandise.

1. If you want to set a background, open a design of your choice, select File > Open
2. If your background has multiple elements, select Layer > Ungroup
3. Right-click the layer in the Layer Panel and select Copy
4. Return to your original shape design and right-click anywhere on the canvas to Paste
5. You can duplicate, resize, reposition or change the color of any of the elements.
6. Once the background image is positioned, select the top and bottom layer in the Layer Panel while holding the Shift key.
7. At the top right-hand corner of the screen, select the Intersect Icon.
8. Repeat the previous step for any other layers in the design

Export Your SVG Design

All that is left to do is to export your new SVG design. You can do so by following these quick and easy steps:

1. Navigate to File > Export
2. Select the SVG File Format
3. Choose the SVG preset
4. Click Export
5. Choose a folder to save your design and select Save

Conclusion

Opening an SVG is the tip of the iceberg of what you can do in Affinity Designer. Now you have the tools to create an SVG in the application. Play around with the functions you learned in this article and see where you can take your design.