Creating Sf Symbols with Affinity Designer

Sat, 18 Jul 2020 19:54:10 +0200

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

Gulf color theme for Xcode

Thu, 30 May 2013 14:37:42 +0000

I have started teaching myself some Objective-C which also means that I have to use something else than my beloved Qt Creator.

As to feel a bit at home I have ported my Gulf theme over to Xcode. The choice I have made in creating this theme is to conserve all of the colours from the original (e.g. Types and Classes are greenish, while attributes are blueish).

Sadly Xcode does not provide different colours for global and local variables. However, all externally imported classes, types and functions are marked in italics, so you can easily know what belongs to you.

Here is a quick look at the theme:

And here is the download link, enjoy:

Gulf theme for Xcode

Xcode on yozy//NET

Creating Sf Symbols with Affinity Designer

Gulf color theme for Xcode