使用qr-code-styling生成的SVG在Illustrator等编辑器中显黑方块求解决

问题根源 #

qr-code-styling生成的SVG可能使用了Adobe系列软件对SVG标准支持不完善的特性（比如自定义<filter>滤镜、非标准渐变实现），导致AI/PS无法正确解析渲染，最终显示为黑方块。

解决办法 #

1. 手动清理SVG中的不兼容代码

用文本编辑器打开生成的SVG文件，执行以下操作：

• 找到并删除所有<filter>标签及其内部代码块（通常位于<defs>标签内）。
• 删除所有元素上的filter属性（例如filter="url(#qrFilter)"这类属性）。
• 确保所有填充/描边使用标准的实色、线性渐变或径向渐变，避免使用复杂的图案或滤镜效果。

2. 通过中间工具转换格式

如果手动修改麻烦，可以借助Figma作为中转：

• 用Figma打开正常显示的SVG文件。
• 在Figma中导出为.ai格式（File > Export > 选择AI格式）。
• 用Illustrator打开导出的AI文件，即可正常显示矢量内容；若需要在Photoshop中使用，可从AI导出为PSD或直接复制矢量内容到PS。

3. 调整qr-code-styling的生成配置

在生成二维码时，避免使用可能触发兼容性问题的配置：

• 不要在dotOptions或cornerSquareOptions中使用filter相关的自定义样式。
• 优先使用color属性设置实色填充，而非复杂的渐变或图案（如果必须用渐变，使用标准的linearGradient/radialGradient配置）。
• 示例兼容配置：

const qrCode = new QRCodeStyling({
  width: 300,
  height: 300,
  data: "https://example.com",
  dotOptions: {
    color: "#000000",
    type: "square"
  },
  cornerSquareOptions: {
    color: "#000000",
    type: "square"
  }
});

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