How to create a custom SF Symbol using Affinity Designer

Question

Created 1w

Replies 1

Boosts 0

Participants 1

When I first tried to create a custom SF Symbol using Affinity Designer, I encountered difficulties because of two problems which have cumulated:

SVG files created by Affinity Designer cannot be directly imported into the SF Symbols app because Affinity Designer totally recreates the content of tag <g id="Notes">, making so the file incompatible for later import into the SF Symbols app. So I had to manually fix that tag via a text editor in order to make the file compatible with the SF Symbols app.
Because I was so focused on fixing manually the SVG file, I did not see that the actual content of my SVG file did not follow all Apple recommendations. As a consequence, I have posted this question on the forum:

Struggling creating a custom SF Symbol: The provided variants are not interpolatable

Finally I have found a way to create an SVG file compatible with SF Symbols using Affinity Designer, meeting the Apple recommendations, and at last perfectly suitable for further use in Xcode.

You will find the solution in my reply to this post below which is actually a quasi copy/paste of my final own reply to my original post.

Marc

Boost

Answer 1

MarcLaffitte OP

1w

Accepted Answer

The method I have found to create a custom SF Symbol using Affinity Designer is to:

First of all, follow all Apple recommendations. I have exported the "variable" version of the Circle SF symbol, not the static one, for later modification in Affinity Designer:
Duplicate the file custum.circle.svg exported from the SF Symbols app and open the copy with Affinity Designer (you will need the original version later)
When your design is complete, while exporting the file to SVG from Affinity Designer, be sure to:

Keep the default Preset "SVG (for export)"
For the Raster DPI option, choose 72
Check the option "Export text as curves for font independence" — Actually you should have no text element in your document, so you should not need this

Open the newly created SVG file in a text editor
Replace the content of tag <g id="Notes"> by the original one from custum.circle.svg and save the file.
Now you should be able to import the SVG file into the SF Symbols app for verification and possibly reexport the symbol from SF Symbols after you made annotations.

You can then add your custom SVG file to your xcassets folder in your Xcode project and the symbol should also appear correctly there, ready to be used in your app.

That's it! Hope this helps,

Marc

0