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

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

SVGタグ内に <style> を書けばいいはず
imgタグはsvg内に書かれたinline styleを解釈してくれる
CSS filterを使える

svgのimage要素で外部画像を表示するに以下を追加するだけでできた daiiz
svg
Copied!
<defs>
<filter id="sepia">
<feColorMatrix type="saturate" values="0"/>
</filter>
</defs>
<style>
image { filter: url(#sepia); }
</style>

ちなみにカラーな元画像
Powered by Helpfeel