While working on the third installment of Fun with FileMaker Button Bars, I was served a reminder of why it’s good to test the stuff you write about using the latest software updates (even if they just arrived that very morning).
I had written up two tips for designing good-looking FileMaker button-bar icons and decided I had room left for a third tip. I was just starting to write up a section about how to fix SVG icons created in Sketch so they properly mind FileMaker’s support of "non-zero" fill rule—Sketch defaults to the opposite "even-odd" fill rule—and naturally wanted to create an example to show in the blog post.
I opened Sketch, created a doughnut icon (one circle knocking out a "hole" in another) and imported it into FileMaker, without fixing for non-zero rule. I fully expected to see a solid circle rather than a doughnut, so I could grab a screenshot illustrating "The Problem." Lo and behold, what I got was a proper doughnut shape! What gives?
Check for Updates
Well, moments earlier, I had received an in-app Update notice in Sketch — Sketch uses the wonderful Sparkle in-app update framework — and I had gone ahead and clicked "Update." Could it be that Sketch had finally been fixed so that it properly handles the non-zero fill rule (without having to manually reverse the path direction every time)? A quick check of the Release Notes and there it was: "Improves SVG exporting by adding support for even-odd and non-zero winding rules."
With one click of an “Update” button, an entire section of my blog post was obsoleted.
The moral of the story: software evolves (usually in the right direction), so always check your assumptions with the current version. A secondary moral might be: Always look for the latest blog post, too!
Winding: Non-Zero vs. Even-Odd
Here is a bit of technical background, for those who are interested.
When an SVG is rendered under the Even-Odd Rule, a hole punched in a shape (as can be created in Sketch, Illustrator, and other illustration apps by creating a compound shape or using the "Subtract" or "Minus Front" functions), usually will appear properly as a hole:
But under the non-zero winding rule, the same compound shape can sometimes appear solid, losing the knock-out:
Therefore, because FileMaker adheres to the non-zero winding rule only, an icon can sometimes lose its hole, and hence most of its detail.
But, what is this "sometimes" about? Without going into too much detail, the fill patterns in non-zero rendering depend on path direction. Each circle above, or each component shape in a more complex icon, has a path "direction," i.e., the direction in which the path is rendered (think clockwise vs. counter-clockwise, although with complex shapes it may be harder to apply those terms).
In brief, the two component paths must have opposite path directions in order to properly knock out with the non-zero fill rule. Adobe Illustrator has long handled this by reversing one of the paths when you create a compound shape. Until recently, Sketch did not. The simple fix was always to first make sure you’re previewing your artwork via the non-zero rule (rather than Sketch’s default even-odd rule):
Then, when that invariably made the "hole" disappear, you would correct it by selecting one component path (but not both) and choosing Layer > Paths > Reverse Order — a simple bit of tedium that most Sketch users got pretty accustomed to.
Sketch version 42, however, changed the default behavior so that the path directions are automatically reversed when creating a compound shape.
You might be wondering, however, whether it matters how you set the fill rule in Sketch, if you’re creating icons for use in FileMaker. Is it necessary to always set this option to the FileMaker-supported non-zero rule? The answer is No.
WYSIWYG
Although the SVG’s XML code will indicate which of the two rules the icon was exported with and is intended to be rendered by, FileMaker just ignores that declaration and goes ahead with its own non-zero interpretation. The only reason to set it to non-zero in Sketch is to preview your artwork to make sure it will correctly knock out under that rule. That reason just got less compelling now that Sketch is doing the automatic path-direction reversal, but it’s still probably a good idea to set it non-zero before exporting a shape for use in FileMaker, just to be sure that what you see is what you’ll get.
Interestingly, as I prepared this post, a fellow Bee, Brian Schick, alerted me to a blog post by Anthony Collurafici, who was also caught by (pleasant) surprise by this Sketch update. The author has some nice tips (not FileMaker-specific) for Preparing and Exporting SVG Icons in Sketch.