How to format customized SF-Symbols SVG files for import into Xcode11

Question

Has anyone figured out how to create customized SF-Symbols using the techniques outlined in the WWDC video, the only existing documentation that I can find on the subject? According to the video one can simply edit the exported SVG file and reimport it as a symbol set.

And while this does work for minor edits, I'm finding it very difficult to produce a working customized symbol file with more than a minor edit. The errors and/or bugs produced are numerous and I've tried many things to produce an acceptable file (removing strokes, converting to shapes, etc). Most imported files produce an error similar to:

The SVG file provided for the symbol image set ’doc.test3‘ is not suitable: Symbol image file '(null)' has glyph node Regular-M that is not a group got type:'2' expected:'1'"

Does anyone have any suggestions? I don't have a specific project goal here. I'm simply trying to learn the appropriate way to create a custom symbol in the absence of any documentation.

Answer 1

The overview documentation suggests that one take an existing symbol file and open it in Sketch or some other SVG editor. Specifically the documentation on creating a new symbol gives a bit of a walkthrough. I believe the workflow will be something like this...

1. Export any symbol from the SF Symbols app 1.0 (12) to an svg file
2. Grab an SVG file of your favorite image that you want to make a new symbol
3. Using an editor (eg. Sketch) drag the exported SF Symbol file onto an empty page (it'll show multiple images)
4. Make a second page in Sketch and drag in your new image
5. Using the layers in Sketch you will see that the SF Symbol has the shape defined within a layer with a name called Shape
6. For each Shape layer substitute (copy/paste) a comparable shape/path from the set of shapes/paths on a layer from your new image
7. Adjust the linewidth and positioning to match the corresponding shape contents within the SF Symbol
8. Remove the SF Symbol for the specified weight
9. When Finished modifying all shape/paths for the Symbol -> Export/Save the updated Symbol page as an SVG from Sketch.
10. You should then be able to add the svg file to the Assets container as a new symbol image set

Note - As part of my test, I noted that although the header of the SVG was different when I exported the symbol file from Sketch when I added the file to Xcode (drag/drop), the new symbols did appear.

Also, the font used in the edited File defaulted to Helvetica instead of the new SF font in the original exported SF Symbol file.