svgで画像をモノクロ化する

imgタグはsvg内のstyleタグを解釈できるので、svgタグ内に<style>を書けばいいはず

予想通り、これを追加するだけでできた。

<defs>
  <filter id="sepia">
     <feColorMatrix type="saturate" values="0"/>
  </filter>
</defs>
<style>
  image { filter: url(#sepia); }
</style>

ちなみにカラーな元画像はこちら

<svg viewBox="0 0 571 506" width="571" height="506">
  <image 
    x="0" y="0" width="571" height="506"
    xlink:href="data:image/png;base64,...">
  </image>
</svg>