Next.js 12部署Vercel时CSS内联SVG转Base64致遮罩异常

问题原因 #

Vercel部署Next.js应用时会自动优化静态资源，其中包括把CSS模块里的内联SVG转换为Base64编码。这种转换会导致原本为兼容Safari设置的width="100%"和height="100%"属性失效，破坏遮罩显示效果；而本地构建不会触发该优化，因此本地运行正常。

可行解决办法 #

1. 改用SVG viewBox属性替代width/height（推荐）

直接修改内联SVG写法，移除width="100%"和height="100%"，添加viewBox属性定义SVG原始尺寸。viewBox能让SVG自适应容器大小，不受Base64转换影响，完美兼容Safari。

示例：

/* 原问题写法 */
mask: url("data:image/svg+xml,%3Csvg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10...'/%3E%3C/svg%3E");

/* 修改后写法 */
mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10...'/%3E%3C/svg%3E");

注：viewBox的四个值对应min-x, min-y, width, height，请根据你的SVG实际尺寸调整。

2. 将SVG单独存放为静态文件引用

把SVG内容保存到项目public目录下的单独文件，在CSS中直接引用文件路径，避免内联带来的Base64转换问题。

步骤：

• 在public目录创建masks文件夹，将SVG保存为public/masks/custom-mask.svg
• 在CSS模块中引用：

mask: url("/masks/custom-mask.svg");

Vercel会将该SVG作为静态资源部署，不会转换为Base64，原有的width/height属性可正常生效。

3. 禁用Vercel或Next.js的SVG优化

通过配置阻止SVG被转换为Base64：

方法A：修改vercel.json
在项目根目录创建或修改vercel.json，添加以下配置：

{
  "build": {
    "env": {
      "NEXT_DISABLE_SVG_OPTIMIZATION": "1"
    }
  }
}

方法B：修改next.config.js的webpack配置
自定义webpack规则，让SVG以资源文件形式输出，而非内联Base64：

module.exports = {
  webpack: (config) => {
    // 遍历所有规则，找到处理SVG的规则并修改类型
    config.module.rules.forEach(rule => {
      if (rule.test?.test('.svg')) {
        rule.type = 'asset/resource';
      }
    });
    return config;
  },
};

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