How to Export SVG From Affinity Designer

When you begin working with SVG, it’s important to understand how to create, optimize, and then export SVG files from Affinity Designer.

Whether you need to export SVG for web design or to export SVG for Cricut, the process can be foolproof if you invest a bit of time in optimizing and understanding the settings.

However, before we start, one thing is very important. The optimization of an SVG file begins with its creation and continues all the way to export. This is exactly what you will learn today: the process from start to finish.

What You’ll Learn in This Affinity Designer SVG Tutorial

What is SVG?
How to optimize the SVG file for export
Export settings explained in detail
How to export SVG from Affinity Designer

1. What Is SVG?

SVG stands for Scalable Vector Graphics and is a graphics file type used for two-dimensional images.

SVG designs can be composed of a single object or shape, a compound path, or a layered graphic. They can be scaled up or down without losing their quality and remain sharp at any given size.

In Affinity Designer, you can create your own SVG designs and export them as SVG files along with various other file formats.

The best uses for SVGs are:

SVG for web design
SVG for Cricut or other cutting machines

SVG files are popular as cut files as they are very flexible when it comes to editing. They are easy to open with other vector programs and with your cutting machine software, making the process of using Affinity Designer to export an SVG for Cricut stress-free.

2. Prepare and Optimize the SVG in Affinity Designer

When you create a graphic which is intended for SVG export, you need to take some steps to make the final output properly optimized. Let’s explore them now.

Keep in Mind the Document Resolution

72 dpi for viewing on the web
96 dpi if your cutting machine requires it
300 dpi for printing purposes

Fit the Artboard for Drawing

If you want your SVG to be displayed or printed correctly, try to minimize the white space around your graphic if necessary (1).

Give Your Graphic a Structure

Since SVG is an editable format where you can select and manipulate individual elements separately, it’s important to give a meaningful name to each element as you make it. If you or someone else will open and edit the file later, everything will be recognizable and easy to use (2).

Simplify Your Shapes as Much as Possible

The more points a drawing has, the larger the file size and the more difficult it is to edit and maintain. Creating small, efficient files makes your life easier later. To achieve this, try to use the shapes (Rectangle Tool (M), Ellipse Tool (M), Triangle Tool, etc.) instead of drawing paths whenever possible (3).

Check the Position Coordinates

Ensure the design is sitting in an area of whole pixels (no decimal points) to keep the image crisp (4).

Convert Text to Curves (When Applicable)

Do not convert text to curves if the text in your graphic needs to remain editable for later editing or when opened with another software.
Convert text to curves if precise text printing or cutting is more important.

3. How to Export SVG From Affinity Designer

Once you have completed your design, the next and final step is to save it. At the top left of the screen, click File and select Export.

The Export Settings window will give you various file formats. Click on the SVG file format to select it.

Under Preset, choose SVG (for export) and then click More…

You should see the following panel. Let’s explore the options presented in more detail. In the left panel, you can see the default SVG Affinity Designer export settings, and in the right panel are the recommended settings for a better and optimized exporting process.

SVG Export Settings to use:

Rasterize: Nothing

Check Export text as curves, if applicable

Check Flatten transforms: when selected, transformed objects are ‘fixed’ in the exported file. This allows the file to be viewed more accurately across applications. If this option is off, objects remain dynamically transformed to allow for more flexible editing.

Check Add line breaks: when selected, the code in the exported file will be optimized for human viewing and reading. If this option is off, the image will be exported with code on a single line, which will make the file size significantly smaller.

Uncheck Allow JPEG compression

Uncheck Set viewbox: when selected, the exported file includes coordinates and dimensions which define the view box of the image. If this option is off, no view box data is included in the exported file. The export area is used to define the view box.

Once you’re done, hit Close, and you can go ahead and click Export in the main window. Choose a file destination and hit Save.

Congratulations! You’re Done!

You have successfully learned how to export SVG from Affinity Designer properly, and your SVG is now ready to be used in various projects.

The SVG file format will continue to gain more power. If you haven’t dived in yet, it will be a good decision to start learning it now.

Want to Learn More?

Be sure to check out more of our recommended tutorials:

Post date August 25, 2022

This content originally appeared on Envato Tuts+ Tutorials and was authored by Diana Toma

When you begin working with SVG, it's important to understand how to create, optimize, and then export SVG files from Affinity Designer.