Skip to content

fix(pipeline): apply group opacity to the paths inside it - #102

Open
stachbial wants to merge 4 commits into
@stachbial/pipeline-fixesfrom
@stachbial/group-opacity
Open

stachbial wants to merge 4 commits into
@stachbial/pipeline-fixesfrom
@stachbial/group-opacity

Conversation

@stachbial

@stachbial stachbial commented Oct 21, 2026 •

Copy link
Copy Markdown
Collaborator

Description

  • The opacity of a group applies to the paths inside it. A semi-transparent group of several shapes stays a group after flattening, and its paths were drawn opaque. Same-color paths in such a group merge into one layer, so the group is drawn once at its opacity, as in the SVG.
  • A non-numeric group opacity ("", inherit) counts as 1, none and transparent fills under opacity stay unpainted, and the opacity of the root <svg> applies too.

Test plan

  • yarn test (625 tests), ts-check and lint clean. New: group opacity on several paths, nested group opacities, and the layers of SWM Duotone Command.

  • The 12,068 SVGs in packages/react-native-nano-icons/test_icons: only the 12 SWM Duotone icons with a semi-transparent group of several shapes change. Built into fonts and rendered next to the original SVGs in Chrome, they match.

    SWM Duotone Command, Map and Grid4: the original SVG, the font from main, the font from this PR, and their differences

  • iOS 27 simulator and Android API 36 emulator: SWM Duotone Command and Grid4 keep their light tone.

@stachbial
stachbial added this pull request to stack #103 October 21, 2026 23:53
@github-actions

github-actions Bot commented Oct 21, 2026 •

Copy link
Copy Markdown

Font benchmark: ✅ pass

base 9ceb62c → pr b002d89. 3 runs per set. Sizes are exact; times come from separate runners.

Details

Fonts

Raw is the .ttf on disk. Compressed is the same file after deflate at level 9, which is roughly what an APK or IPA carries.

Set Raw Compressed
MaterialIcons_baseline 307,528 → 307,528 (0.0%) 163,775 → 163,775 (0.0%)
MaterialIcons_outline 338,072 → 338,072 (0.0%) 182,651 → 182,651 (0.0%)
MaterialIcons_round 416,936 → 416,936 (0.0%) 216,846 → 216,846 (0.0%)
MaterialIcons_sharp 273,232 → 273,232 (0.0%) 150,630 → 150,630 (0.0%)
MaterialIcons_twotone 451,268 → 451,268 (0.0%) 236,463 → 236,463 (0.0%)
SWMIcons_outline 107,116 → 107,116 (0.0%) 28,632 → 28,632 (0.0%)
SWMIcons_duotone 115,620 → 115,860 (+0.2%) 34,126 → 34,184 (+0.2%)
SWMIcons_curved 102,524 → 102,524 (0.0%) 31,597 → 31,597 (0.0%)

Package

base pr Δ
Tarball bytes 135,614 135,800 +0.1%
Files 290 290

Checks

Check Limit Result
Raw font growth ≤ 6% per set ✅
Tarball growth ≤ 6% ✅
Byte-identical rebuilds required ✅ (base: yes)
OpenType Sanitizer every font accepted ✅
Build time, median of 3 runs (not gated)
Set base pr Δ
MaterialIcons_baseline 4,989 ms 2,964 ms -40.6%
MaterialIcons_outline 5,365 ms 3,164 ms -41.0%
MaterialIcons_round 6,576 ms 3,997 ms -39.2%
MaterialIcons_sharp 4,506 ms 2,684 ms -40.4%
MaterialIcons_twotone 6,725 ms 3,981 ms -40.8%
SWMIcons_outline 2,558 ms 1,507 ms -41.1%
SWMIcons_duotone 2,726 ms 1,598 ms -41.4%
SWMIcons_curved 2,445 ms 1,393 ms -43.0%

@stachbial
stachbial force-pushed the @stachbial/group-opacity branch from fe4f50f to a3a2a2d Compare October 28, 2026 11:47
@stachbial
stachbial marked this pull request as ready for review October 29, 2026 18:03
@stachbial
stachbial force-pushed the @stachbial/group-opacity branch from a3a2a2d to b002d89 Compare October 29, 2026 20:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant