CSSだけで画像をモノクロ表示にすることはできるが印刷には表示されない

以下のクラス指定などをモノクロ表示にしたい画像につけることで、モニター上でカラー画像をモノクロ表示にすることができます。

.grayscale {
  filter: gray;
  -webkit-filter: grayscale(100%);
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}

ですが、これを行った画像はなぜか印刷に表示されません。
解決策を探したのですが、見つからず、この方法でのモノクロ表示は断念しました…。

参考：JavaScriptも使わず元画像も変更せずに画像をグレースケール表示させる