svgのfilterを使ってドット階調っぽい効果をつける

ノスタルジックなドット階調表示をfilterで作ってみた．operaだとfeTileが上手く動作しないようなので，見た目がおかしい．hrefで参照する図形がsvgだとダメっぽいので，別途png画像等を使えば何とかなるかもしれない．

• 画像の明度を取得
• 明度を5階調に分割する(1)
• 明度毎のドットパターンを生成する(2)
• (2)の図形を(1)で切り抜いて重ねあわせる．

<?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">
 <defs>
  <filter id="dotted">
   <feColorMatrix type="luminanceToAlpha" result="alpha"/>
   <!--画像の明度を階段状に取得する-->
   <feComponentTransfer in="alpha" result="a1">
    <feFuncA type="discrete" tableValues="1,1,1,0,1"/>
   </feComponentTransfer>
   <feComponentTransfer in="alpha" result="a2">
    <feFuncA type="discrete" tableValues="1,1,0,1,1"/>
   </feComponentTransfer>
   <feComponentTransfer in="alpha" result="a3">
    <feFuncA type="discrete" tableValues="1,0,1,1,1"/>
   </feComponentTransfer>
   <feComponentTransfer in="alpha" result="a4">
    <feFuncA type="discrete" tableValues="0,1,1,1,1"/>
   </feComponentTransfer>
   
   <!--明度階調をドットで表すための単位図形-->
   <feFlood x="0" y="0" width="2" height="2" flood-color="white" flood-opacity="0" result="dotTileBg"/>
   <feFlood x="0" y="0" width="1" height="1" flood-color="black" result="dot"/>
   <feMerge result="dotUnit">
    <feMergeNode in="dotTileBg"/>
    <feMergeNode in="dot"/>
   </feMerge>
   
   <!--明度階調毎のパターン図形を生成（operaでは上手く行かない）-->
   <feTile in="dotUnit" x="0" y="0" width="200" height="200" result="dotTile1"/>
   <feOffset in="dotTile1" dx="1" dy="0" result="predotTile2"/>
   <feOffset in="dotTile1" dx="0" dy="1" result="predotTile3"/>
   <feMerge result="dotTile2">
    <feMergeNode in="dotTile1"/>
    <feMergeNode in="predotTile2"/>
   </feMerge>
   <feMerge result="dotTile3">
    <feMergeNode in="dotTile1"/>
    <feMergeNode in="predotTile2"/>
    <feMergeNode in="predotTile3"/>
   </feMerge>
   <feFlood flood-color="black" result="dotTile4"/>

   <!--階調毎に図形を切り抜き，重ねあわせる-->
   <feComposite in="dotTile1" in2="a1" operator="out" result="b1"/>
   <feComposite in="dotTile2" in2="a2" operator="out" result="b2"/>
   <feComposite in="dotTile3" in2="a3" operator="out" result="b3"/>
   <feComposite in="dotTile4" in2="a4" operator="out" result="b4"/>
   <feMerge>
    <feMergeNode in="b1"/>
    <feMergeNode in="b2"/>
    <feMergeNode in="b3"/>
    <feMergeNode in="b4"/>
   </feMerge>
  </filter>
 </defs>
 <image filter="url(#dotted)" xlink:href="img.jpg" width="200" height="200"/>
</svg>