またもや全くもって需要がない話なんですが。🙏
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の隠れた才能を垣間見た、かも。