将图像保存为 PDF - SVG 元素中的图像模糊，而 <img> 中的图像清晰
Save images to PDF - images within SVG elements are blurry, whereas images in <img> are sharp
请参阅此处复制的示例 - https://codepen.io/canovice/pen/eYRmYKR - 命令 + P 进行打印，我截取了 print/pdf 输出的屏幕截图：
问题： 在网络上，两个图像都很清晰。在打印并保存为 PDF 时，<img> 标签中的徽标仍然清晰，而使用 <svg:pattern>, <svg:image>, <svg:rect> 和 fill 属性的 <svg> 中的徽标模糊不清。
目的：我们的网络应用程序有许多 SVG 图形（想想散点图），它们使用团队徽标代替散点图点。我们希望用户能够打印这些图形，并将这些图形保存为具有清晰图像的 PDF。这是网络上图表的屏幕截图，带有清晰的徽标。当我们将其另存为 PDF 时，我们会得到模糊的徽标。
我们正在使用 react.js 和 d3.js 来构建我们的网络应用程序并创建我们的 svg 图形，尽管我们希望有一个特定于 html 和 [=37= 的解决方案] 的 SVG 元素。
将光栅图形图像包裹在 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>
请参阅此处复制的示例 - https://codepen.io/canovice/pen/eYRmYKR - 命令 + P 进行打印，我截取了 print/pdf 输出的屏幕截图：
问题： 在网络上，两个图像都很清晰。在打印并保存为 PDF 时，<img> 标签中的徽标仍然清晰，而使用 <svg:pattern>, <svg:image>, <svg:rect> 和 fill 属性的 <svg> 中的徽标模糊不清。
目的：我们的网络应用程序有许多 SVG 图形（想想散点图），它们使用团队徽标代替散点图点。我们希望用户能够打印这些图形，并将这些图形保存为具有清晰图像的 PDF。这是网络上图表的屏幕截图，带有清晰的徽标。当我们将其另存为 PDF 时，我们会得到模糊的徽标。
我们正在使用 react.js 和 d3.js 来构建我们的网络应用程序并创建我们的 svg 图形，尽管我们希望有一个特定于 html 和 [=37= 的解决方案] 的 SVG 元素。
将光栅图形图像包裹在 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>