svgのfilterで羊皮紙のような効果をつける

いろいろ弄ってみた結果，svgの真価って，filterとanimateだと思うんです．組み合わせるとあっと驚くような効果が得られるのは非常に面白い．ただ，基本的に重いってのと，ブラウザによっては動かないパターンがあったりと現状一筋縄で行かないのも確かなのですが．

---

feTurbulenceを用いると自然なゆらぎを表現できるので，これを使って画像が羊皮紙に書かれているような効果を作ってみた．
（画像は勝手にリンク…いいのかしら．あとでこっそり変更しよう…）

• feTurbulenceを使ってゆらぎを生成する．
• ゆらぎの色を調整して羊皮紙っぽい色合いにする．（A）
• 元画像から feConvolveMatrixを使って輪郭を抽出する．
• 輪郭の明度をアルファで取得する．(この時点で色は黒)
• アルファ値を調整する．（B）
• ガウスぼかしを使って画像の影を取得する．
• 影のアルファ値を反転させ，若干の赤みをつける．（C）
• （A）〜（C）を重ねる．

<?xml version="1.0" standalone="no"?>
<svg width="200px" height="200px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
 <filter id="parchment">
  <feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="5" seed="3" stitchTiles="noStitch" result="turbulence"/>
  <feColorMatrix in="turbulence" type="matrix" values="0.20 0.20 0 0 0.6 0.10 0.10 0 0 0.6 0 0 0.2 0 0.3 0 0 0 0 1" result="parchment"/>
  <feConvolveMatrix in="SourceGraphic" order="3 3" targetX="1" targetY="1" kernelMatrix="1 1 1 1 -8 1 1 1 1" divisor="8" preserveAlpha="true" result="edge"/>
  <feColorMatrix in="edge" type="luminanceToAlpha" result="prestroke"/>
  <feComponentTransfer in="prestroke" result="stroke">
   <feFuncA type="gamma" amplitude="3" exponent="0.5" offset="0"/>
  </feComponentTransfer>
  <feGaussianBlur in="SourceAlpha" stdDeviation="10" result="shadow"/>
  <feComponentTransfer in="shadow" result="patch">
   <feFuncR type="linear" slope="0" intercept="0.3"/>
   <feFuncA type="linear" slope="-1" intercept="1"/>
  </feComponentTransfer>
  <feMerge>
   <feMergeNode in="parchment"/>
   <feMergeNode in="stroke"/>
   <feMergeNode in="patch"/>
  </feMerge>
 </filter>
 <image filter="url(#parchment)" xlink:href="http://www.konami.jp/products/dl_xbox_dracula_hd/images/charlotte.jpg" width="200" height="200"/>
</svg>