SVGをサポートする環境がほとんどになってきた。それでもなんとか8であったり、かんとか2.3であったりのことを考慮せざるをえないという状況はありうる。それにはonerror属性を使った対応が有力だが、srcset属性でSVGファイルを指定するだけというハックのことを知った。将来的に使えなくなるわけではないが、やりたいことと実装に食い違いが少なからずあるのでハックと言って良いだろう。
<img src="foo.png" srcset="foo.svg">表示したいSVGをsrcset属性で、フォールバックに使いたいPNGをsrc属性で指定するだけだ。これでsrcset属性をサポートしているブラウザーではSVGが、そうでないブラウザーではPNGが表示される。srcset属性のサポートに対して、より多くのブラウザーがSVGをサポートしていることから成立する。もちろん食い違いがあるのでSVGをサポートしているブラウザーではSVGを、とはいかない。
ただしonerror属性を使ったテクニックと比較すると、画像へのリクエストが必ず1回で収まるという利点がある。onerror属性では古い環境へ負担を強いることに対し、公平な負担(十数文字の追加)だけで済むというのはかなり魅力的だ。
SVGとsrcset属性のサポートの食い違いが問題だが、ハック臭なしできれいに書けるpicture要素よりはカバー範囲が広いようだ(Safari 8やEdge 12がカバーできる)。srcset属性をサポートしない環境が後ろ向きな環境であること(OSレベルでレガシーであったり、Chromeへと切り替わっていなかったり)することを考えると、妥協点としても見るべきところはある。
インラインSVGでのフォールバック・テクニックとこれでかなりの範囲をカバーできることだろう。
初期からこのハックの利用を想定して実装を進めるのは薦められないが、SVGで良いと言われていたのにも拘らず急にPNGでフォールバックして欲しいと言われた時の緊急手段などとしては抗いがたい魅力がある。つまり計画的に利用しないことは意識したい。