透過PNGは現状では唯一に近いフルカラーの透過画像を作成する手段だが、ファイル・サイズが大きくなりがちだ。対してJPGはファイル・サイズという点で大きく優るが、透過することは出来ない。このあちらを立てればこちらが立たずの問題をSVGのマスク機能を使って透過だけを受け持つPNGとJPGを組み合わせることで両立させるテクニックを知った。
透過させた画像をまず普通に作る。それから透過してないJPG画像と、透過を反転させてマスクに使うPNG画像を生成する。それらをHTMLでSVGのmask要素をインラインに書くことで組み合わせる。ベースとなるJPG画像が一般的にファイル・サイズに優れ、マスクに使うPNGは空白が多いこと、SVGの記述はごく短いもの、というわけで最終的に低ファイル・サイズが実現できる。
SVGのセキュリティ上の制限により、HTMLにインラインで記述するケースでしか使えないのでCSSの背景画像などでは利用できない。他にHTTPリクエストがひとつ増えるとかIE8で動かないなどの欠点はあるものの、フルカラーを維持したまま低ファイル・サイズで透過させるテクニックとしてはかなり優秀で、積極的に使いたい。