Next.js项目Logo在iPhone上画质丢失，其他设备正常，如何解决？

问题分析 #

你遇到的是iPhone Safari浏览器对SVG渲染的特有兼容性问题——SVG作为矢量图本应在任何设备上保持清晰，但Safari的默认渲染机制在某些缩放场景下会导致模糊。

解决办法 #

• 修复SVG的viewBox属性
  打开navbar_logo.svg文件，确保根<svg>标签包含正确的viewBox属性。比如你的Logo在桌面端尺寸是115×65，就设置：

  <svg viewBox="0 0 115 65" ...>
  

  viewBox定义了SVG的矢量坐标范围，没有它，Safari无法正确计算缩放比例，容易出现模糊。

• 添加Safari专属渲染优化CSS
  给img标签添加针对性的CSS属性，强制Safari使用更清晰的渲染方式：

  <img
    src="/assets/img/navbar_logo.svg"
    alt="logo"
    className="md:w-[115px] md:h-[65px] w-[90px] h-[44px] image-rendering:-webkit-optimize-contrast -webkit-transform:translateZ(0) backface-visibility:hidden"
  />
  

  这些属性分别优化了对比度渲染、开启硬件加速，避免缩放时的模糊。

• 检查SVG是否为纯矢量
  如果你的SVG文件内嵌了PNG/JPG位图元素，缩放时必然会模糊。打开SVG文件，确认所有图形都是矢量路径，替换掉内嵌的位图。

备选方案（若上述方法无效） #

如果你愿意尝试Next.js Image组件但保留原始画质，可以开启unoptimized属性关闭自动压缩：

import Image from 'next/image';

<Link href="/" className="flex items-center">
  <Image
    src="/assets/img/navbar_logo.svg"
    alt="logo"
    width={115}
    height={65}
    unoptimized={true}
    className="md:w-[115px] md:h-[65px] w-[90px] h-[44px]"
  />
</Link>

这个设置下，Image组件只会做布局处理，不会修改图片本身，既保留了你的画质需求，也可能解决渲染问题。

内容的提问来源于stack exchange，提问作者Zia Yamin