Skip to content

fix: pre-rasterize logo SVGs to avoid WebKit filter/mask rendering bugs - #23591

Open
neevmodh wants to merge 1 commit into
vitejs:mainfrom
neevmodh:fix/logo-svg-webkit-rendering
Open

neevmodh wants to merge 1 commit into
vitejs:mainfrom
neevmodh:fix/logo-svg-webkit-rendering

Conversation

@neevmodh

@neevmodh neevmodh commented Sep 26, 2026 •

Copy link
Copy Markdown

Summary

  • vite-light.svg / vite-dark.svg build the lightning-mark gradient glow from 15 <feGaussianBlur> filters plus an alpha <mask>. WebKit rasterizes this filter/mask stack differently than Chromium at small icon sizes (~24px), producing blur, color bleeding, and incorrect edges, while Chrome renders the same files correctly.
  • Replaces the runtime filter/mask stack with a single pre-rasterized PNG (10x the viewBox resolution) embedded via <image>. Both files then render identically across browsers since it's a plain image blit, with no filter/mask processing at all.
  • File paths, extensions, and viewBox are unchanged, so no downstream consumer needs to update anything.
  • This is the same fallback VitePress already adopted for the same files in docs: improve homepage feature icons and Vite theme support vuejs/vitepress#5466 — the "Confirmed solution" from this issue.

Test plan

  • Rendered both SVGs before/after and visually compared — the wordmark and gradient glow are preserved faithfully.
  • Confirmed the resulting files keep the original viewBox="0 0 87 15" so nothing downstream needs updating.

Fixes #23588

Copilot AI lite review requested due to automatic review settings September 26, 2026 08:35

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot wasn't able to review any files in this pull request. Check if the Files changed in this pull request are included in default exclusions.


💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

vite-light.svg and vite-dark.svg use 15 <feGaussianBlur> filters plus an
alpha mask to render the lightning-mark gradient glow. WebKit rasterizes
these filter/mask effects differently than Chromium at small icon sizes
(~24px), producing blur, color bleeding, and incorrect edges - Chrome
renders the same files correctly.

Replace the runtime filter/mask stack with a single pre-rasterized PNG
(10x the viewBox resolution) embedded via <image>, so both files render
identically across browsers regardless of filter/mask rasterization
differences, with no filter/mask processing needed at all. File paths,
extensions, and viewBox stay the same so nothing downstream needs to
change.

This matches the fallback VitePress already adopted for the same files
in vuejs/vitepress#5466.

Fixes vitejs#23588
@neevmodh
neevmodh force-pushed the fix/logo-svg-webkit-rendering branch from b88b4dd to 3fd9f49 Compare September 26, 2026 08:48

This branch has not been deployed

No deployments
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.

New Vite SVG logo renders incorrectly in WebKit

2 participants