画像処理についてあれこれ: librsvg

Showing posts with label librsvg. Show all posts

Thursday, January 08, 2009

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">
<image x="0" y="0" width="200" height="200"
xlink:href="sf.jpg" >
<title>sf.jpg</title>
</image>
<image x="10" y="10" width="100" height="100"
xlink:href="sample3b.jpg" opacity="0.5">
<title>sample3b.jpg</title>
</image>
</svg>

コマンド
rsvg-convert image-opacity.svg -f png -o sample746a.png

元画像1(sf.jpg)

元画像2(sample3b.jpg)

出力画像(sample746a.png)

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

Sunday, December 28, 2008

librsvgを使用して文字ごとに書式を設定する

librsvgを使用して文字ごとに書式を設定するには、以下のsvgファイルを処理します。

pop.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="70">
<!-- 文字ごとに書式を変更 -->
<text x="10" y="46" font-family="Tahoma"
fill="#a09090" stroke="#a09090" stroke-width="1">
<tspan font-size="52">S</tspan><tspan font-size="30">ample</tspan>
</text>
</svg>

コマンド
rsvg-convert pop.svg -f png -o sample732a.png

出力画像(sample732a.png)

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

Thursday, December 25, 2008

librsvgを使用して虹色の文字列を描画する

librsvgで虹色の文字列を描画するには、以下のsvgファイルを処理します。

rainbow.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="60">

<defs>
<linearGradient id="rainbowg" x1="0%" y1="0%" x2="100%" y2="0%">
  <stop offset="0%" stop-color="blue"/>
  <stop offset="25%" stop-color="green"/>
  <stop offset="50%" stop-color="yellow"/>
  <stop offset="75%" stop-color="orange"/>
  <stop offset="100%" stop-color="red"/>
</linearGradient>
</defs>

<text x="10" y="46" font-family="Arial" font-size="46"
fill="url(#rainbowg)">Rainbow
</text>
</svg>

コマンド
rsvg-convert rainbow.svg -f png -o sample731a.png

出力画像(sample731a.png)

Monday, December 08, 2008

librsvgを使用して白い影を描画する

librsvgを使用して白い影を描画するには、以下のsvgファイルを処理します。

whiteshadow.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>
<filter id="gbf" filterUnits="userSpaceOnUse" x="0" y="0" width="220" height="50" >
  <feColorMatrix in="SourceAlpha" type="matrix"
    values="-1,0,0,0,1 0,-1,0,0,1 0,0,-1,0,1 0,0,0,1,0" result="ra"/>
  <feGaussianBlur in="ra" stdDeviation="4" result="shadow"/>
  <feOffset in="shadow" dx="4" dy="4" result="shadow2"/>
  <feComposite in="SourceGraphic" in2="shadow2" operator="over"/>
</filter>
</defs>

<image x="0" y="0" width="200" height="200"
xlink:href="sf.jpg" >
<title>sf.jpg</title>
</image>
<text x="10" y="30" font-family="Arial" font-size="25"
style="fill:#888080; stroke:#888080;" filter="url(#gbf)">San Francisco
</text>
</svg>

コマンド
rsvg-convert whiteshadow.svg -f png -o sample706.png

元画像(sf.jpg)

出力画像(sample706.png)

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

Saturday, December 06, 2008

librsvgを使用して画像の彩度をおとす

librsvgを使用して画像の彩度をおとすには、以下のsvgファイルを処理します。

saturate.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>
<!-- 彩度を落とす -->
<filter id="sf" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="200" >
  <feColorMatrix in="SourceGraphic" type="saturate" values="0.5" />
</filter>
</defs>

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

コマンド
rsvg-convert saturate.svg -f png -o sample705.png

元画像(sf.jpg)

出力画像(sample705.png)

Thursday, December 04, 2008

librsvgを使用して画像をセピア調に変換する

librsvgを使用して画像をセピア調に変換するには、以下のsvgファイルを処理します。

sepia.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>
 <filter id="sf" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="200" >
   <feColorMatrix in="SourceGraphic" type="matrix" result="grayscale"
     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" />
   <!-- 0xd0/0xff=0.82 0xa0/0xff=0.63 0x50/0xff=0.31 -->
   <feColorMatrix in="grayscale" type="matrix"
     values="0.82 0.00 0.00 0.00 0.00
             0.00 0.63 0.00 0.00 0.00
             0.00 0.00 0.31 0.00 0.00
             0.00 0.00 0.00 1.00 0.00" />
 </filter>
</defs>

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

コマンド
rsvg-convert sepia.svg -f png -o sample702.png

元画像(sf.jpg)

出力画像(sample702.png)

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

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に関する他の記事はこちらを参照してください。

Monday, December 01, 2008

librsvgを使用して画像をシャープにする

librsvgを使用して画像をシャープにするには、以下のsvgファイルを処理します。

sharpen.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>
 <filter id="sf">
   <feConvolveMatrix in="SourceGraphic" order="3"
    kernelMatrix="0 -0.2 0  -0.2 1.8 -0.2  0 -0.2 0" />
 </filter>
</defs>

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

コマンド
rsvg-convert sharpen.svg -f png -o sample699.png

元画像(sf.jpg)

出力画像(sample699.png)

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

Sunday, November 30, 2008

librsvgを使用して画像の端を暗くする

librsvgを使用して画像の端を暗くするには、以下のSVGファイルを処理します。

edge-darkening.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="maskimage"
  x="0" y="0" width="200" height="200">
  <rect x="0" y="0" width="200" height="200" fill="#ffffff"/>
</g>
<!-- 黒背景 -->
<g id="bg">
  <rect x="0" y="0" width="200" height="200" fill="#000000" />
</g>
<filter id="edf">
  <!-- マスクイメージをぼかす -->
  <feImage xlink:href="#maskimage" result="maskimage"/>
  <feGaussianBlur in="maskimage" stdDeviation="8" result="blurred"/>
  <!-- マスクイメージを使用して切り取り -->
  <feComposite in="SourceGraphic" in2="blurred" operator="in" result="iwt"/>
  <!-- 半透明画像と黒背景を重ね合わせ -->
  <feImage xlink:href="#bg" result="bg"/>
  <feComposite in="iwt" in2="bg" operator="over" />
</filter>
</defs>

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

コマンド
rsvg-convert edge-darkening.svg -f png -o sample698.png

元画像(sf.jpg)

出力画像(sample698.png)

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

Saturday, November 29, 2008

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に関する他の記事はこちらを参照してください。

Monday, November 24, 2008

librsvgで画像を反転させる

librsvgで画像を反転させるには、以下のsvgファイルを処理します。

invert.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>
<filter id="if" >
  <feColorMatrix in="SourceGraphic" type="matrix" values="-1,0,0,0,1 0,-1,0,0,1 0,0,-1,0,1 0,0,0,1,0"/>
</filter>
</defs>

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

コマンド
rsvg-convert invert.svg -f png -o sample696.png

元画像(sf.jpg)

出力画像(sample696.png)

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

Friday, November 21, 2008

librsvgで画像を左右反転させる

librsvgで画像を左右反転させるには、以下のsvgファイルを処理します。

flip.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">

<image x="0" y="0" width="200" height="200"
xlink:href="sf.jpg" transform="scale(-1,1) translate(-200,0)">
<title>sf.jpg</title>
</image>
</svg>

コマンド
rsvg-convert flip.svg -f png -o sample695.png

元画像(sf.jpg)

出力画像(sample695.png)

Sunday, November 16, 2008

librsvgを使用して画像の端をぼかす

librsvgを使用して画像の端をぼかすには、以下のsvgファイルを処理します。

blurred-edge.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="maskimage"
 x="0" y="0" width="200" height="200">
 <rect x="5" y="5" width="190" height="190" fill="#ffffff"/>
</g>
<filter id="bef" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="200" >
 <feImage xlink:href="#maskimage" result="maskimage"/>
 <feGaussianBlur in="maskimage" stdDeviation="5" result="blurred"/>
 <feComposite in="SourceGraphic" in2="blurred" operator="in"/>
</filter>
</defs>

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

コマンド
rsvg-convert blurred-edge.svg -f png -o sample694.png

元画像(sf.jpg)

出力画像(sample694.png)

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

Thursday, November 13, 2008

librsvgを使用して画像をタイル配置する

librsvgを使用して画像をタイル配置するには、以下のsvgファイルを処理します。

tile.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>
 <filter id="tf" >
   <feImage xlink:href="flower1.png" width="20" height="20" />
   <feTile />
 </filter>
</defs>

<rect x="0" y="0" width="200" height="200" filter="url(#tf)"/>
</svg>

コマンド
rsvg-convert tile.svg -f png -o sample693.png

元画像(flower1.png)

出力画像(sample693.png)

Tuesday, November 11, 2008

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)

Saturday, November 08, 2008

librsvgで画像を点光源で照らす

librsvgで画像を点光源で照らすには、以下のsvgファイルを処理します。
pointlight.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>
<filter id="plf">
 <feSpecularLighting in="SourceGraphic" result="lr" specularExponent="20" lighting-color="#ffffff">
   <fePointLight x="70" y="70" z="30"/>
 </feSpecularLighting>
 <feSpecularLighting in="SourceGraphic" result="l2r" specularExponent="15" lighting-color="#aaccff">
   <fePointLight x="180" y="170" z="25"/>
 </feSpecularLighting>
 <feComposite in="SourceGraphic" in2="lr" result="t1" operator = "arithmetic" k1 = "0" k2 = "1" k3 = "0.5" k4 = "0"/>
 <feComposite in="t1" in2="l2r" operator = "arithmetic" k1 = "0" k2 = "1" k3 = "1" k4 = "0"/>
</filter>
</defs>

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

コマンド
rsvg-convert pointlight.svg -f png -o sample691.png

元画像(sf.jpg)

出力画像(sample691.png)

Thursday, November 06, 2008

librsvgを使用して影付き文字列を描画する

librsvgを使用して影付き文字列を描画するには、以下のSVGファイルを処理します。

text-and-dropshadow.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="220" height="220">

<defs>
 <filter id="gbf" filterUnits="userSpaceOnUse" x="0" y="0" width="220" height="50" >
   <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="shadow"/>
   <feOffset in="shadow" dx="4" dy="4" result="shadow2"/>
   <feComposite in="SourceGraphic" in2="shadow2" operator="over"/>
 </filter>
</defs>

<image x="20" y="20" width="200" height="200"
 xlink:href="sf.jpg" >
 <title>sf.jpg</title>
</image>
<text x="10" y="30" font-family="Arial" font-size="30"
 style="fill:#fffff8; stroke:#fffff8;" filter="url(#gbf)">San Francisco
</text>
</svg>

コマンド
rsvg-convert text-and-dropshadow.svg -f png -o sample690.png

元画像(sf.jpg)

出力画像(sample690.png)

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

Wednesday, November 05, 2008

librsvgを使用して画像を角丸四角に切り取り影付けする

librsvgを使用して画像を角丸四角に切り取り影付けするには、以下のsvgファイルを処理します。
masked-image-dropshadow.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="300" height="300">

<defs>
 <mask id="mask1" maskUnits="userSpaceOnUse"
   x="0" y="0" width="300" height="300">
<rect x="50" y="50" width="200" height="200"
 rx="20" ry="20"
 style="fill:#ffffff; "/>
 </mask>
 <filter id="gbf">
   <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="shadow"/>
   <feOffset in="shadow" dx="4" dy="4" result="shadow2"/>
   <feComposite in="SourceGraphic" in2="shadow2" operator="over"/>
 </filter>
</defs>

<g filter="url(#gbf)">
<image x="50" y="50" width="200px" height="200px"
 xlink:href="sf.jpg" mask="url(#mask1)" >
 <title>sf.jpg</title>
</image>
</g>
<!--mask="url(#mask1)"  -->
</svg>

コマンド
rsvg-convert masked-image-dropshadow.svg -f png -o sample689.png

元画像(sf.jpg)

出力画像(sample689.png)

Friday, October 31, 2008

librsvgで画像を回転させる

librsvgで画像を回転させるには、以下のsvgファイルを処理します。
image-rotation.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="300" height="300">
<image x="50" y="50" width="200px" height="200px"
xlink:href="sf.jpg" transform="rotate(30,150,150)">
<title>sf.jpg</title>
</image>
</svg>

コマンド
rsvg-convert image-rotation.svg -f png -o sample686.png

元画像(sf.jpg)

出力画像(sample686.png)

Friday, October 24, 2008

librsvgで画像を角丸四角に切り取る

librsvgで画像を角丸四角に切り取るには、以下のsvgファイルを処理します。

masked-image.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="300" height="300">

<defs>
<mask id="mask1" maskUnits="userSpaceOnUse"
  x="0" y="0" width="300" height="300">
<rect x="50" y="50" width="200" height="200"
rx="20" ry="20"
style="fill:#ffffff; "/>
</mask>
</defs>

<image x="50" y="50" width="200px" height="200px"
xlink:href="sf.jpg" mask="url(#mask1)">
<title>sf.jpg</title>
</image>

</svg>

コマンド
rsvg-convert masked-image.svg -f png -o sample685.png

元画像(sf.jpg)

出力画像(sample685.png)