0

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

halfer
  • 19,824
  • 17
  • 99
  • 186
Canovice
  • 9,012
  • 22
  • 93
  • 211
  • Not quite following your recommendation here. Our web app generates many graphs that are created nicely using d3.js and svg elements as such. – Canovice Aug 24 '21 at 19:38
  • Even when the rects and patterns are changed to 200x200 they are still blurry when saved as PDF when within SVG elements – Canovice Aug 24 '21 at 20:32

1 Answers1

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.

![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>
K J
  • 8,045
  • 3
  • 14
  • 36
  • does this mean we are out of luck and that there is no way for our images to look sharper when inside of an SVG? – Canovice Aug 24 '21 at 21:57
  • We don't really have the ability to use desktop apps for this. These SVGs with images / team logos are all across our website, and users are (supposed to be) able to simply save the pages of our website direct to PDF using print preview. This pixelation really messes up these saved PDFs though... – Canovice Aug 25 '21 at 00:56