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.

Bahena

See my answer for how you can create a new set of custom symbols. Then use the SF Symbol to validate or just create a Symbol Image set in Xcode11 and drag the revised svg file onto the rectangle. Let me know if you have further questions. – Epode

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.

Epode

Answer 2

Go back into the SF Symbols app after creating the SVG. Click on File - Prepare Custom Symbol for XCode.... Select your SVG and let the SF Symbols app do its magic.

The function is still rather buggy though. Sometimes the SVG gets altered. You also cannot overwrite an existing SVG when choosing the destination to save the modified file created by the SF Symbols app.

Otilia

This functionality doesn't appear to exist in the non-beta version of the SF Symbols app. – Osswald

This functionality is working again, now named "Validate Custom Symbol". XCode also got better at handling SF Symbols so it has become rare that you need this step, but it never hurts to validate before adding to XCode. – Otilia