Save images to PDF - images within SVG elements are blurry, whereas images in <img> are sharp

Question

See reproduced example here - https://codepen.io/canovice/pen/eYRmYKR - command + P to print, I've taken this screenshot of the print/pdf output:

Problem: On web, both images are sharp. On print and save to PDF, the logo in the <img> tag remains sharp, whereas the logo in the <svg> using <svg:pattern>, <svg:image>, <svg:rect> with the fill attribute, is blurry.

Purpose: Our web app has many SVG graphs (think scatterplots) that use the team logos in place of the scatterplot dots. We want users to be able to print these graphs, and save these graphs to PDF, with sharp images. Here's a screenshot of the graph on web, with the sharp logos. When we save this as PDF, we get blurry logos.

We are using react.js and d3.js to build our web app and create our svg graphs, although we are hoping for a solution specific to the html & css of SVG elements.

Answer 1

Wrapping a raster graphic image inside a svg name does not make it a true scalable vector graphic. The method used is a "gradient fill with image" thus not as efficient as using true SVG objects with true colour gradient fills.

To get png in svg wrapping keep it simple

<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>