Repository navigation
Replace embedded PNG in research-tool icon with native SVG to reduce file size - #1488
Open
brentswisher wants to merge 3 commits into
Open
brentswisher wants to merge 3 commits into
brentswisher wants to merge 3 commits into
Conversation
brentswisher
requested review from
daneah,
jialin-he and
satya-achanta-venkata
and removed request for
a team
November 4, 2026 21:49
🦋 Changeset detectedLatest commit: 5e441f2 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
brentswisher
changed the title
Contributor
size-limit report 📦
|
brentswisher
force-pushed
the
fix/research-tool-icon-filesize
branch
from
November 4, 2026 21:54
055e246 to
5e441f2
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This change: (check at least one)
Is this a breaking change? (check one)
Is the: (complete all)
What does this change address?
Closes #1136. The
research-toolicon is currently a PNG embedded as base64 inside an SVG wrapper, making it 1.1MB, the largest chunk in consuming MFE bundles.How does this change work?
<g style="isolation: isolate">and cut out once by a single alpha mask.Additional context
(This doesn't really matter, but was interesting to me)
The SVG was generated using Claude. The Figma source for this icon is the same 1920×1920 bitmap, so there was no vector original to export. Claude redrew it by numerically fitting ten SVG gradient layers to the original's pixels, and traced the sphere's actual outline (it isn't a perfect circle) as a 512-point path.
The new icon was compared pixel by pixel against the original in Chromium, Firefox and WebKit (via Playwright) and then iterated on until it matched closely enough. The comparison covered 24, 48 and 96px, 1×–3× pixel density, and white, dark and colored backgrounds. Each icon was rendered the way pharos-icon renders it: injected into a 24×24 inside a shadow root.
Differences on iterations were measured with ΔE (CIEDE2000), the standard measure of how different two colors look to a person. Below 1 is invisible, around 2 is where a careful observer starts to notice, and black vs. white is 100.
Inside the sphere, the average difference is ΔE ≤ 0.74 and 99% of pixels are at ΔE ≤ 2.2. On the anti-aliased edge, differences from the original are about as large as the differences between the original PNG rendered in two browsers. Compared against an exact downscale of the source artwork, the new edge is as close as the browsers' own PNG renderings, or closer.
The chromatic builds highlight where it deviates slightly from being a perfect 1:1 match (the green highlighted points):