0

I'm trying to convert an image to grayscale in CSS to print. I tried using filter: grayscale(100%) which caused the image to display fine in the browser but pixellated in the print preview/printed page. So I tried filter: saturate(0) and this SVG filter I found online:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink">

  <image width="100%" height="100%" xlink:href="graphic.png" filter="url(#grayscale)"/>
  <defs>
   <filter id="grayscale" x="0" y="0" width="1" height="1">
     <feColorMatrix in="SourceGraphic" type="saturate" values="0"/>
   </filter>
  </defs>
</svg>

which has the same result. How do I fix this?

ieatpizza
  • 464
  • 4
  • 14
  • Perhaps relevant: [CSS Filter on Retina Display: Fuzzy Images](https://stackoverflow.com/q/13347947/215552). – Heretic Monkey Feb 12 '18 at 21:50
  • Tried it, adding `-webkit-backface-visibility: hidden;` or `-webkit-transform: translateZ(0); ` will just make it ignore the filter entirely in the print preview. :( – ieatpizza Feb 12 '18 at 23:14

0 Answers0