librsvgを使用してdisplacementマップを使用する

librsvgを使用してdisplacementマップを使用するには、以下のsvgファイルを処理します。

displacement.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>
 <g id="mydef1">
   <rect x="0" y="0" width="200" height="200" fill="#808080" />
 </g>
 <g id="mydef2">
   <text x="20" y="100" font-family="Arial" font-size="120"
     fill="#ffffff">SF
   </text>
 </g>
 <filter id="dmf">
   <feImage xlink:href="#mydef1" result="mydef1"/>
   <feImage xlink:href="#mydef2" result="mydef2"/>
   <feGaussianBlur in="mydef2" stdDeviation="2" result="t1" />
   <feComposite in="t1" in2="mydef1" operator="over" result="t2"/>
   <feDisplacementMap scale="100" xChannelSelector="R"
   yChannelSelector="R" in="SourceGraphic" in2="t2"/>
 </filter>
</defs>

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

コマンド
rsvg-convert displacement.svg -f png -o sample692.png

元画像(sf.jpg)






出力画像(sample692.png)



○関連項目
・librsvgをwindowsで使用してSVGからPNG画像を生成する (librsvgをWindowsで使用する方法)
・libsvgに関する他の記事はこちらを参照してください。