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:
- What Is Cricut?Kelly Rossouw23 Jun 2022
- How to Make a Stencil Font With CricutKelly Rossouw08 Aug 2022
- How to Turn a Picture Into an SVG for CricutZap Layden26 Apr 2021
- How to Curve Text in Affinity DesignerAndrei Marius07 Jul 2021
- How to Create Patterns in Affinity DesignerAndrei Stefan24 Jul 2020
- How to Use Affinity Designer to Design a LogoZap Layden23 Feb 2021
- Everything You Need to Know About Affinity Designer BrushesIvan Gromov11 Jul 2020
- A to Z of Affinity Designer: Tips, Tricks, and Hacks!Kezz Bracey24 Jun 2021