Drawing the design’s icons from their SVG paths

Span’s design uses its own line icons, written as SVG paths. On iOS, the easy option is SF Symbols, Apple’s built-in icon set. They look good, but they would not match the design, and on a tool that is meant to look precise, mismatched icons stand out.

So the app has a small SVG path parser. It reads the original path data from the design and turns it into a SwiftUI Path, so every icon is identical to the design.

What an SVG path is

An SVG path is a list of drawing commands for a pen. M moves the pen, L draws a line, C draws a curve, A draws an arc and Z closes the shape. A capital letter means an absolute position on the grid. A lowercase letter means a position relative to where the pen already is.

Most commands map directly to SwiftUI. Arcs were the hard part. SVG describes an arc by its two end points and its radius, but drawing code wants its centre and angles. The conversion between the two comes from the SVG specification, and it was the one part I could not guess my way through.

One lowercase letter

Some icons were made of several paths, and I merged each icon’s paths into one string. One of them came out like this:

M12 3v12 m7 8...

That lowercase m means “move relative to where the pen is now”. It only behaves like an absolute position when it is the very first command of a path. After merging, it was no longer first, so it moved the pen relative to the end of the previous line. The arrow on the share icon, and parts of two others, would have been drawn in the wrong place.

I caught it by reading the merged strings back, before it showed on screen. A test now checks that every icon stays inside its 24 by 24 grid, which would catch this kind of mistake.

Where the platform still wins

There is one place I could not use the design’s icons. Control Center buttons on iOS must use SF Symbols, so Measure, Level and Scan room there use the closest system icons. Android has a similar limit in its Quick Settings tile. Neither platform can fully match a custom icon set in those small system surfaces.