保存为PDF时SVG内图片模糊但<img>标签图片清晰问题求解

1. 修正SVG Pattern基础属性配置 #

首先需要确保<pattern>的属性配置避免浏览器自动缩放产生插值模糊：

• 给<pattern>显式设置patternUnits="userSpaceOnUse"、patternContentUnits="userSpaceOnUse"，和填充目标的单位保持一致，避免相对单位缩放
• 确保<pattern>内的<image>宽高和<pattern>本身、以及填充用的<rect>宽高完全相等，不要出现拉伸
  示例代码：

<defs>
  <pattern 
    id="logo-pattern" 
    width="20" 
    height="20" 
    patternUnits="userSpaceOnUse"
    patternContentUnits="userSpaceOnUse"
  >
    <image 
      href="球队logo地址" 
      width="20" 
      height="20" 
      preserveAspectRatio="xMidYMid slice"
    />
  </pattern>
</defs>
<rect width="20" height="20" fill="url(#logo-pattern)" />

2. 添加打印专属CSS规则适配打印分辨率 #

浏览器打印默认会用屏幕DPI渲染SVG，可通过打印媒体查询强制提升SVG渲染精度：

@media print {
  svg {
    /* 强制浏览器用高分辨率渲染SVG */
    shape-rendering: geometricPrecision;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimizeQuality;
    /* 避免SVG被打印缩放时模糊 */
    transform: translateZ(0);
  }
  /* 强制pattern内的图片按原始精度渲染 */
  pattern image {
    image-rendering: optimizeQuality;
  }
}

3. 优先使用高倍资源填充pattern #

如果使用的是位图logo，直接提供2-3倍于显示尺寸的资源，比如要显示20x20的logo，就用40x40或者60x60的原图填充pattern，打印时浏览器会用高倍源图渲染，不会出现拉伸模糊。如果是矢量logo，直接用SVG格式的logo文件放在<image>标签里，矢量源在打印时会无限清晰。

4. 可选：D3生成时绕开pattern逻辑 #

如果调整pattern属性后依然存在兼容性问题，可以直接给每个散点渲染独立的<image>标签代替pattern填充的<rect>，绕开pattern渲染的浏览器兼容问题，D3示例代码：

svg.selectAll('.logo-point')
  .data(数据集)
  .enter()
  .append('image')
  .attr('class', 'logo-point')
  .attr('x', d => d.x坐标)
  .attr('y', d => d.y坐标)
  .attr('width', 20)
  .attr('height', 20)
  .attr('href', d => d.球队logo地址)
  .attr('preserveAspectRatio', 'xMidYMid meet')

这种方案避开了pattern的渲染逻辑，绝大多数浏览器打印时都会把独立<image>标签的资源渲染清晰，和普通<img>标签效果一致。

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