ChromeでSVGが表示されなかったときのこと

Chromeのみの現象だったが、不思議なことにCSSで背景などに使っているSVGは表示されて、imgタグでは表示されない。
.htaccessだったりで通常の対応もしてみたが効果がなかった。

それで

<object type="image/svg+xml" data="logomark.svg" width="256" height="256"></object>

のようにしてみるとあら不思議。表示されたし、なぜかそれまで表示されてなかった同じSVGも表示された。
ということでobjectタグを外してみると今度は表示がされるようになった。
キャッシュとかなにかあるんだろうか。よくわからないがそんなこともあるというお話。

——-
2017.10.5に追記
Photoshopから書き出したSVGに見られる現象で、Photoshop上で作成したシェイプなら問題無いが、持ち込んだスマートオブジェクトを書き出したものがChromeでは見えなかった。
なのでIllustratorでインラインスタイルで書き出すと大丈夫だと判明。

Youtube IFrame APIで困った

インライン再生のiframeを

loadVideoById(“bHQqvYy5KYo”)

のようにしてモバイル向けページでボタンをタップして再生開始させる際に、iOSではautostartに問題が生じやすい。
iPhoneはまだよかったけどもiPad(iOS9.3.5)では再生準備状態から抜けなくなる。ので、

loadVideoById(“bHQqvYy5KYo”, 0.1)

として再生位置の引数を加えてYoutube動画に再生ボタンを表示させることでどうにか回避。
ちなみにこの不具合が起こるのは1回目の読み込み時のみで、2回目からはautostartが効いているようだし、

function onPlayerReady(event) {
event.target.playVideo();
}

のようにイベント関数もあったほうが良いみたい。ネットで調べても言及しているところが少ないので久しぶりにこんなネタを。