svgのenable-background="new"属性の意味

svgのfilter機能に関わる属性にenable-background="new"というものがある．これはfilterから図形の背景画像を取得するのを許すプロパティなのだが，ようやくその存在意義が判った．


canvasだと簡単でsvgだと難しい処理として画像の加算合成が挙げられる．svgでも図形を重ねることはできるのだが，良くてopacityによる不透明度による重ねあわせなので，全体としては暗くなってしまうのだ．

ではもともとsvgでは無理なのかというとそうでもない．svgでもfeComposite要素による加算合成の機能は提供されている．これをプロパティ値enable-background="new"と組み合わせることにより画像の加算合成を行うことができる．例を示そう．おそらくoperaでは正しく見えると思う．

<svg viewBox="0 0 200 200" enable-background="new">
 <defs>
  <filter id="fil2-2" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="200">
   <feBlend mode="screen" in="BackgroundImage" in2="SourceGraphic"/>
  </filter>
 </defs>
 <rect width="100%" height="100%" fill="black"/>
 <circle filter="url(#fil2-2)" cx="100" cy="70" r="50" fill="red"/>
 <circle filter="url(#fil2-2)" cx="70" cy="125" r="50" fill="#0f0"/>
 <circle filter="url(#fil2-2)" cx="130" cy="125" r="50" fill="blue"/>
</svg>

enable-background="new"を用いることでfilterの入力にBackgroundImageを利用することが可能となる．これを使って，画像を合成すれば良い．なるほど，そのためにenable-background属性が存在しているのだな．なお，この背景画像を取得するという処理は，いちいち背景の情報を計算しなければならないので本質的に重い処理だ．よって平常時は無効となっている．

で，何が問題となるかというと，この機能に対応しているブラウザが現状operaしか存在しないのだ．表現の幅に直接響く機能なので，他のブラウザで利用できないのはいかにも勿体ない．