pannellum.jsはSVG画像も表示できる。ただし…

またもや全くもって需要がない話なんですが。🙏

360度パノラマビューワーのpannellum.jsって意外にもビットマップ画像だけじゃなくてSVG画像も表示できるんですね。
試しに指定してみたら表示できてちょっとビックリ。

ただし、綺麗に表示してくれるのはSafariだけで、Google Chrome等他の全てのブラウザはSVGだとボヤけました。
なんだ〜残念〜せっかく軽いベクトルデータで何かできるんじゃないかと思ったのにぃ・・・

いや、それならSafariだけ軽いSVGにして、他のブラウザはPNGでもよくね？
ちょっと実験したいし。

問題はSafariの判定なんですよね。
というのはJavaScriptでnavigator.userAgentを取得するとmacOSやiOSはChromeでもSafariっていう文字列が含まれているから。

今回はSafariだけを判別すればいいのでAIに相談したら、下記の判定方法をお勧めされました。

ってことでトップページでやってみました。
汎用性要らないからとっても雑なコード😅

実験用のシンプルな図柄なので2400✕1200ピクセルのPNGでも52KBと小さいけど、SVGはフォントも埋め込まずベクトル化もしてないのでたった4.4KBしかありません。
それでもPNGより遥かにクッキリ綺麗に表示されるSafariの不思議。WebGLと相性がいいのかな？？

普段困らせられることもあるブラウザだけど、Safariの隠れた才能を垣間見た、かも。

RECOMMENDATION