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も使わず元画像も変更せずに画像をグレースケール表示させる

AWS構築サービスの全てをまとめた資料を公開中

ハックノート(TOWN株式会社)では、AWSの導入や構築支援を行っています。AWS導入メニューやサービス詳細、構成例や費用を掲載した資料をダウンロードできます。

AWSの新規導入やAWSへの移行を検討の際は、ぜひご参考ください。