librsvgを使用して画像が徐々にグレースケールになるように変換する

librsvgを使用して画像が徐々にグレースケールになるように変換するには、以下のsvgファイルを処理します。

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="200" height="200">

<defs>
<!-- 半透明グラデーション -->
<linearGradient id="tg" x1="0%" y1="0%" x2="100%" y2="0%">
  <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
  <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
</linearGradient>
<!-- 半透明グラデーション画像 -->
<g id="gltr">
  <rect x="0" y="0" width="200" height="200" fill="url(#tg)" />
</g>
<filter id="mgf" >
  <!-- 白黒画像 -->
  <feColorMatrix in="SourceGraphic" type="matrix"
    values="0.33 0.33 0.33 0.00 0.00
            0.33 0.33 0.33 0.00 0.00
            0.33 0.33 0.33 0.00 0.00
            0.00 0.00 0.00 1.00 0.00" result="mono"/>
  <feImage xlink:href="#gltr" result="gltr"/>
  <!-- 半透明グラデーション画像を使用して切り取り -->
  <feComposite in="SourceGraphic" in2="gltr" operator="in" result="grad"/>
  <!-- 白黒画像と半透明グラデーション画像を重ね合わせ  -->
  <feComposite in="grad" in2="mono" operator="over"/>
</filter>
</defs>

<image x="0" y="0" width="200" height="200"
xlink:href="sf.jpg" filter="url(#mgf)">
<title>sf.jpg</title>
</image>
</svg>

コマンド
rsvg-convert monotone-gradient.svg -f png -o sample697.png

元画像(sf.jpg)


出力画像(sample697.png)


○関連項目
・librsvgで画像をグレースケールに変換する
・libsvgに関する他の記事はこちらを参照してください。