Creating Sf Symbols with Affinity Designer

Creating SF Symbols is supposed to be easy. Create a template using SFSymbols app. Modify the SVG and import in Xcode. It is all documented here.

SFSymbols template requires you to manually create and adjust images for all weights and sizes. This is fine if your image has lines that need to follow the weight. Many of them don’t or could auto scale.

Nevertheless I’ve made this Affinity Designer template that you can use. Open it, edit the one symbol it contains (called Template) and you are all set.

⬇ sfsymbol-template.afdesign

Unfortunately although Affinity Designer produces a perfectly valid SVG—and it will get validated by SFSymbols—Xcode does not like it.

This is what Affinity exports:

<g transform="matrix(1.22074,0,0,1.22074,498.674,600.389)">
   <g id="Ultralight-S">

This is what Xcode wants:

<g id="Ultralight-S" transform="matrix(1.22074,0,0,1.22074,498.674,600.389)"> 

Alright, let’s do Perl:

#!/usr/bin/perl
my $file = $ARGV[0];
open FILE, $file or die "Failed to open file: $!";
$/ = undef;
my $xml = <FILE>;
close FILE;
my @weight = (
  "Ultralight", "Thin", "Light", "Regular", "Medium",
  "Semibold", "Bold", "Heavy", "Black",
);
my @size = ("S", "M", "L");
for my $w (@weight) {
  for my $s (@size) {
    $xml =~ s/<g (transform=[^>]+?)>\s+<g (id="$w-$s")>(.*?)<\/g>/<g \2 \1> \3/s;
  }
}
print($xml, "\n");

This will finally transform the SVG into a format that Xcode will swallow.

⬇ fix-sfsymbol.perl