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

Question

Created 2d

Replies 3

Boosts 0

Participants 1

Hi, I am trying to create a custom SF Symbol from an SVG file created with Affinity Designer but, even though my SVG file look perfect in Firefox for example compared to the exported custom.circle.svg file (as recommended in Apple's documentation), I fail to get rid of this error: "The provided variants are not interpolatable"

My creation process using Affinity Designer is:

Export as SVG file
Duplicate the custom.circle.svg file exported from the SF Symbols app
In the new file, replace the 3 "path" tags in the "g" sections "id="Black-S", "Regular-S", "Ultralight-S" with the paths from the SVG file exported from Affinity designer
Set the 3 transform matrices to "matrix(1 0 0 1 0 0)" for the 3 variants to be generated at the correct location.
Verify in an SVG viewer that the file looks correct.
Import the file via Drag&Drop into the SF Symbols app.

What is wrong with my file? Thank you in advance for any help, Marc

mySymbol.svg.txt

Boost

Answer 1

MarcLaffitte OP

2d

I just made a significant step towards a solution.

I have have exporting a custom symbol with "static" instead of "variable" option, have edited the file with Affinity Designer, added my new path into layer Regular-M, removed all original circle paths, paying attention not to remove the other layers, reexported as SVG and now SF Symbols, fixed manually the <g id="Notes"> sections, and I could import the new svg file into SF Symbols. However, even if the symbol is displayed in the right pane, it is not in the list of custom symbols. (See attached screenshot).

I guess that something is missing...

myCustomSymbol2.svg.txt

0

Answer 2

MarcLaffitte OP

1d

Because I am curious, I just tried to use "myCustomSymbol2" in my SwiftUI app. And... it can display it!

Then I have added a Bold-M variant, and again SF Symbols did not display the symbol in the list, but only in the right pane. However I can use it in my App.

Weird, but for now I'll settle for that, until some one finds out what is not correct with my file...

myCustomSymbol3.svg.txt

0

Answer 3

MarcLaffitte OP

1d

Accepted Answer

I got it!

The solution 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)
Duplicate the exported SVG file and open the copy with Affinity Designer (you will need the original version later)
When exporting the file to SVG from Affinity Designer, be sure to:
- Keep the default Preset "SVG (for export)"
- For Raster DPI, choose 72
- Check "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 the tag "<g id="Note>" by the original one from custum.circle.svg and save the file.

Now you should be able to import the SVG file in SF Symbols. Possibly after reexporting the symbol from SF Symbols after annotations, you can then add the file to your xcassets file in Xcode and the symbol should also appear correctly there.

That's it!

0