Learning Custom
SF Symbols
The Symbols
Apple has a great article on creating custome SF Symbols to add to your Xcode project. So I'm trying my hand at this graphic design language. It seems to start with understanding the SVG format. Which I do not know... but heck... it's just XML with a huge learning curve - what could go wrong?
Well after a long day of tedious text hacking the SVG file into 20 seperate files with just one symbol each... I had some first approximations of symbols to feed into Xcode. But first I had to convert my raw SVG into the SF Symbols expected format (which is not really known - Apple refers to it as a Template). But there is a tool for this on the internet (of course there is!). I downloaded CustomSymbols App and started importing and adjusting the margins... and exporting and getting SF-Symbolized-SVG files. Import into Xcode and drop into a simple view page to see how I did... well the symbol looks great, but there is a bounding box of white space (verticle padding) not desired. Wonder where that came from. Pondering on that ... I assume there is some "page" info that got inclued in the svg file. It is slightly different for some of the 20 icons I carved by laborous hand editing the path segments in the original svg file.
Note: this hand editing the SVG file is not the way to proceed!
This video is about version 1 of CustomSymbols App - Bret has upgrade it over the years. It now does bulk edit/imports/exports (ver 2.6).
Give it a try on App Store CustomSymbols.
After complete failure of my first attempt to hand edit the art work SVG file. And a quick consultation with Bret Lester (author of CustomSymbols App) about my SVG files being all wonkie - I decided on a new technique. I pulled up a PNG of the original art work and sliced and diced that image with Mac screenshots to make an image of each symbol. Then I used the free online tool PNG to SVG site. This generated simple and basic SVG path data for each symbol. Feeding this simple data into CustomSymbols resulted in much better SF Symbol exports. My problem with the viewBox element in the SVG files disappeared.
So the second attempted technique was way faster, and resulted in better raw data to feed the process. Yet, I'd not have learned as much SVG details had I not attempted bad technique number 1.
SF Symbols from Apple
There are a number of WWDC talks on building custom SF Symbols and the new Beta version 5 of SF Symbols seems to now be an editor tool - with ability to annotate/label the SVG paths for color and hierachary.
It didn't become obvious to me how/why I'd need to do all of that, so on this first attempt - I ignored all of this complication.
Complex -- Fast
Well this is getting complex very fast... seems the SVG file that defines a symbol - really is a definition of about 27 variants - luckly it appears that SF Symbols knows how to extract and interpalate many of those. The CustomSymbols app does this magic also.
Now an unknown issue is weather I should be using svg paths as my raw data or some kind of "stroke" thingy. I've not yet figured out the terminology for SVG. Maybe those are the same thing. And then like any complex onion - there are layers!
Symbol creation
The WWDC21 What's new in SF Symbols talk explained creation of symbols with paths - using enclosed shapes (lines & bienzer curves). With each instance (varent) having the same number of control points.
The SF Symbols App then interpolates the design to produce all 27 varents.
See WWDC21 Create Custom Symbols.
Custom symbol recap
Template overview (new in ver 3)
Editing custom symbols
Symbol annotation
Advanced techniques
Exporting and distribution
This talk answers my question - convert strokes to paths (which are prefered)!
Use SF Symbols for Layers
After importing the SVG file into SF Symbols you can add layer annontations to groups of paths. Paths may be in multiple layers - like the heart example used for the border and the red fill in the example.
Show the Color Sidebar Inspector in Gallary Mode to view custom symbols layers (you cannot view layers in Apples symbols - unless you duplacte them for customization).
Kaktovik Numeral Symbols
Here are my SF Symbols imported to Xcode for a simple test page of the "font" (symbols). I've still got some layout issues to decide upon - as the numerals have two verticle sections with the zero thru five on the bottom and the count of fives on the top. Making a true font from these symbols leads to some interesting design decisions... do the numberal above 5 get smaller - thereby taking the same bounding box in a font?
More learning to do... but now back to the basic app logic.