プログラミングようやくここ数年日本企業でもレガシーブラウザをサポート対象から外してくれるようになってきた昨今、retinaディスプレイも増えsvgファイルを使用する機会も増えてきました。今、作業しているプロジェクトでもsvgファイルを結構使用しているのですが、svgファイルをImage()関数で読み込んで画像のサイズを取得してごにょごにょしていたところ、IE11においてサイズが取得できない問題に直面したので、その解決方法を備忘録も兼ねて紹介したいと思います。まとめ環境なお、今回紹介するコードの中にはjQuery版もありますが、jQueryのバージョンに関しては下記バージョンを使用しています。今回の環境jQuery3.2.1よくあるプリロード方法まずは、よくあるImage()関数を使用したオーソドックスなプリロード(読み込み)方法がこちら。このケースでは「preload」というクラス名が付与されているimgタグのsvgデータを読み込むことを想定しています。document.querySelector('.preload').getAttribute('src');こんな感じでオリジナル縦横サイズを取得することができます。IE11のバグ上記の方法で、基本的には大丈夫なのですが、ここで問題になるのがやはりIEです。IE11(IE10以下は未検証)で上記のコードを実行した結果、縦幅も横幅もどちらも「0」が返ってきます。画像の読み込み完了だけを知りたいのであれば、別にサイズが分からなくても困ることはありませんが、オリジナルのサイズを元に拡大縮小したり、アニメーションを当てたいときにはクリティカルな問題になります。解決方法そんな、いまだに僕らを困らせるIEですが、IE11でもImage()関数を使ってsvgファイルのオリジナルサイズを取得する方法がこちらになります。document.querySelector('.preloadImg').getAttribute('src');ご覧の通りですが、読み込みが完了したタイミングで、bodyに該当のデータを挿入し「offsetWidth」と「offsetHeight」を使って取得しています。offsetWidth(Height)プロパティはborderやpaddingの幅も含めた全体の幅を取得するプロパティとして知られていますが、svgファイルのサイズ取得に関してもこのプロパティで取得できます。まとめということで、今回は備忘録も兼ねて、javascriptのImage()関数を使用してsvgファイルのオリジナルサイズを取得する方法を紹介しました。この記事のまとめIE11の場合、Image()関数のwidthプロパティではsvgデータのオリジナルサイズが取得できないoffsetWidth(Height)を使えばIE11でもサイズ取得可能offsetWidth(Height)で取得する前にbodyに一時的に読み込みデータを挿入こんな感じですかね。拠点にサーフィンとスノーボードが好きなフリーランスのWebクリエイターです。普段はプログラム書いたりデザインしたり映像作ったりしています。いろいろな人の話しを聞くのが好きなので、このブログを通して多くの人と繋がりが出来たら嬉しいです。noteとInstagramもやっているのでフォローしてくれたらありがたいです!noteinstagram詳しく見るプログラミングの記事一覧へ他のブログも見る人気記事2018.01.09FITNESS【ダイエット】確実に痩せたいなら、まずやるべきこと8選。拠点にサーフィンとスノーボードが好きなフリーランスのWebクリエイターです。普段はプログラム書いたりデザインしたり映像作ったりしています。nori-life.com。