将图像保存为 PDF - SVG 元素中的图像模糊，而 <img> 中的图像清晰答案

【问题标题】：Save images to PDF - images within SVG elements are blurry, whereas images in <img> are sharp将图像保存为 PDF - SVG 元素中的图像模糊，而 <img> 中的图像清晰
【发布时间】：2021-10-25 00:03:28
【问题描述】：

在此处查看复制的示例 - https://codepen.io/canovice/pen/eYRmYKR - command + P 打印，我截取了打印/pdf输出的截图：

问题：在网络上，两张图片都很清晰。在打印并保存为 PDF 时，<img> 标记中的徽标仍然清晰，而使用 <svg:pattern>, <svg:image>, <svg:rect> 和 fill 属性的 <svg> 中的徽标模糊。

目的：我们的网络应用程序有许多 SVG 图（想想散点图），它们使用团队徽标代替散点图点。我们希望用户能够打印这些图表，并将这些图表保存为 PDF，并带有清晰的图像。这是网络上图表的屏幕截图，带有清晰的徽标。当我们将其保存为 PDF 时，我们会看到模糊的徽标。

我们正在使用 react.js 和 d3.js 来构建我们的 Web 应用程序并创建我们的 svg 图，尽管我们希望有一个针对 SVG 元素的 html 和 css 的解决方案。

【问题讨论】：

这里不太符合您的建议。我们的网络应用程序生成了许多使用 d3.js 和 svg 元素很好地创建的图表。
即使将矩形和图案更改为 200x200，但在 SVG 元素中保存为 PDF 时，它们仍然是模糊的

标签： image svg svg-pattern svg-rect

【解决方案1】：

将光栅图形图像包裹在 svg 名称中并不能使其成为真正的可缩放矢量图形。使用的方法是“用图像进行渐变填充”，因此不如使用带有真实颜色渐变填充的真正 SVG 对象高效。

在 svg 包装中获取 png 保持简单

<div>
<svg width="2000" height="2000" >
 <rect x="0" y="0" height="1000" width="1000" style="fill: #f0fff0"/>
 <image x="30" y="00" width="160" height="160" xlink:href="103735.png" />
 <image x="300" y="50" width="160" height="160" xlink:href="103735.png" />
</svg>
</div>

【讨论】：

这是否意味着我们运气不佳，并且在 SVG 中无法让我们的图像看起来更清晰？
我们没有能力为此使用桌面应用程序。这些带有图像/团队徽标的 SVG 都在我们的网站上，用户（应该）能够使用打印预览将我们网站的页面直接保存为 PDF。这种像素化确实把这些保存的 PDF 搞乱了……