New Vite SVG logo renders incorrectly in WebKit

[ChisakaKanako]

Describe the bug

The official Vite light and dark SVG logos can render inconsistently in WebKit when displayed at small icon sizes.

Affected official assets:

• https://vite.dev/vite-light.svg
• https://vite.dev/vite-dark.svg

These assets were introduced by #21339.

In WebKit 27 on macOS 27, rendering either SVG at approximately 24px height can produce:

• A soft or blurry appearance
• Color bleeding around the lightning mark
• Incorrect dark edges or outlines
• Incorrect interpolation around transparent regions

Chrome 153 renders the same files correctly.

The screenshot below shows the worst-case WebKit rendering: the logo is completely incorrect. In ordinary cases, WebKit is usually not this severe, but it still appears noticeably blurrier than Chrome.

WebKit issue screenshot from the downstream VitePress report:

The official SVG files contain:

• 15 elements
• 15 effects
• 1 element
• viewBox: 0 0 87 15

These filter and mask effects appear to be rasterized differently by WebKit and Chromium.

This also affects downstream consumers. VitePress documented the same issue and applied a raster fallback in vuejs/vitepress#5466.

Reproduction

https://htmlpreview.github.io/?https://gist.githubusercontent.com/ChisakaKanako/07226c8cc5558efd1ea7c64cfb553236/raw/index.html

Note: htmlpreview.github.io may occasionally fail to render the HTML. The issue can also be tested directly with the official vite-light.svg and vite-dark.svg files at approximately 24px height.

Steps to reproduce

1. Open the reproduction URL in WebKit 27 on macOS 27.
2. Display the official Vite light/dark SVG logos at approximately 24px height.
3. Compare the rendering with Chrome 153 at the same size.
4. Observe the blur, color bleeding, and incorrect edges in WebKit.

System Info

System:
  OS: macOS 27.0 (26A428)
  CPU: Apple M4
  Memory: 16 GB
  Shell: zsh 5.9

Browsers:
  WebKit: 27.0
  Chrome: 153.0.8010.53

Used Package Manager

npm

Logs

Official Vite logo SVG structure:

• filters: 15
• feGaussianBlur: 15
• masks: 1
• viewBox: 0 0 87 15

Downstream workaround and screenshots:
vuejs/vitepress#5466

Confirmed solution:

• Replace the SVG with pre-rendered image assets, such as PNG or WebP, for small icon usage. This avoids runtime SVG filter and mask processing and produces consistent WebKit/Chromium rendering.
• This is the solution currently used in VitePress PR fix(hmr): client pinging behind a proxy on websocket disconnect (fix #4501) #5466.

Alternative SVG fix:

• Flatten or remove the Gaussian Blur filters and mask from the official SVG so it can render consistently without a raster fallback.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[neevmodh]

A fix is up in #23591.

Fix: Replaces the filter/mask-heavy source (15 <feGaussianBlur> filters plus an alpha mask) with a single pre-rasterized PNG at 10x the viewBox resolution, embedded via <image>. This is the fallback recommended in this issue and already adopted for the same assets in vuejs/vitepress#5466. File paths, extensions, and viewBox are unchanged, so no downstream consumer needs to update anything.

Testing: Rendered and visually compared both files before/after — the wordmark and gradient glow are preserved faithfully at the target icon size.