Search code examples
imagesvgsvg-patternsvg-rect

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

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

enter image description here

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.

enter image description here

Solution

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

    ![enter image description here enter image description here

    To get png in svg wrapping keep it simple

    enter image description here

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