Tuesday, December 02, 2008

librsvgを使用して、画像に半透明ぼかしの文字列を描画する

librsvgを使用して、画像に半透明ぼかしの文字列を描画するには、以下のsvgファイルを処理します。

blurred-text.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="mes">
<text x="3%" y="65%" font-family="Arial" font-size="30"
fill="#ffffff" fill-opacity="0.8" filter="url(#gbf)">San Francisco
</text>
</g>
<filter id="btf" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="200" >
<feImage xlink:href="#mes" result="mes"/>
<feGaussianBlur in="mes" stdDeviation="1.5" result="bt"/>
<feComposite in="bt" in2="SourceGraphic" operator="over" />
</filter>
</defs>

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

コマンド
rsvg-convert blurred-text.svg -f png -o sample700.png

元画像(sf.jpg)


出力画像(sample700.png)

○関連情報
・libsvgに関する他の記事はこちらを参照してください。

No comments: