Custom SF Symbol gets error "not interpolatable"

I'm trying to make a custom SF Symbol. I've made some new custom symbols successfully, combining existing SF Symbols, so I understand the process. But as soon as I use vector files from my previous work, I get the error, "The provided variants are not interpolatable." - even though it has shapes made with vector path.

  1. Template set up - Variable
  2. I use sketch to work on the template
  3. I have separate layers for Ultralight-S, Regular-S, Black-S

  1. File saved as SVG

What is wrong with my template?

Thanks!

Up vote post of JunoBerlin Down vote post of JunoBerlin
2.7k views
Posted by
JunoBerlin
Reply

  • I'm running in to the same issue using Figma and creating a custom icon. I try to create the different weights by adding a stroke to the custom icon and then outlining the stroke and flattening the icon. If I just add the icon in to the different weight groups without editing it then it works fine and validates. It's once I start editing the icon and try to make it thicker or thinner that I think it doesn't work. If you figure out what the solution is let me know.

    —
    bbmettler
Add a Comment

Replies

From my experiences so far, there needs to be a one-to-one relationship between vertices with the three weights. This way the engine can match up where to interpolate between the other weights. I'm still experimenting myself, but I wish there was an obvious way to manually set this relationship.

I seem to find success if I simply scale a path to make the shape appear thicker or thinner (command-K in Sketch). However, this does not always give a good result compared to say, "offset" of a path.

Posted by
jwarrent
Up vote reply of jwarrent Down vote reply of jwarrent
Add a Comment

Adding a "me too" here. Illustrator doesn't seem to handle floating point math particularly well, as you can edit an svg, save that svg, close the svg and reopen it, then just toggle a layer visibility on and off again, save again, and the svg's paths will all have magically changed. The result: a previously working SVG will no longer be exportable into SF Symbols due to some random new points added to a random subset of curves :(

I've yet to find a reasonable solution to this yet sadly, but I suspect it has to do with how floating point math and path computing is handled in SVG editors.

Posted by
featherless
Up vote reply of featherless Down vote reply of featherless
Add a Comment

One thing that seems to help is, both before and after you generate a new offset stroke, click the "Convert selected points to smooth" button one very anchor point that's meant to be smooth. This often results in a slight tuning of the anchor points, which causes offset strokes to be less error prone and more likely to stay up-to-date across file saves/loads

Posted by
featherless
Up vote reply of featherless Down vote reply of featherless
Add a Comment