misallychan.comスマートフォン用の表示で見るmisallychan.com雑記。はてブ、口コミ、WEBデザイン、アニメ・漫画についてとか。SVG画像非対応ブラウザへのフォールバック方法メモ【2017】2017-08-28SVG画像非対応ブラウザへのフォールバック方法メモ【2017】WEB・デザインSVGってピクセル画像じゃないからレスポンシブデザインにも最適でとっても便利という話を以前しました。misallychan.comこちらimgタグで簡単に表示できるんですが、対応していないブラウザがあります。サポート的にはもう終わっていても良い気がしますが、それでもサポートが必要だったため今回実施した対策をまとめました。苦労したというか、なかなか対策が見つからず直らず苦戦しましたので、同じようにお困りの方はぜひお試しください。Android2.3以下・IE8以下など、SVGが表示されないブラウザへの対応そもそもSVGが対応していないブラウザがあります。こちらはさすがに手放しても良いとは思うんですけどね・・・念のため。Modernizr.jsを使用。こちら、閲覧者のブラウザが対応している機能を調べてくれます。DL前にSVGを選択すると、SVGに対応しているかを調べてくれるので、場合分けなどでSVGが非対応の場合SVGファイルをPNGに書き換えることができます。1まずModernizr.jsにアクセス。ピンクのボタンをクリック。→[BUILD]をクリック。→ポップアップで開かれたBuildをダウンロード。SVGを選ぶのがちょっとよくわからなかったこともあるので、以下のリンクから飛べばすぐダウンロードするだけになるかも。Builder2アップロードして読み込み。このファイルをサーバにアップロードし、HTML上で読み込みます。src=“modernizr-custom.js"></script>上記、ディレクトリはアップロード先に指定してくださいね。ファイル名を書き換えた場合はそれに直してください。これだけで設置は完了です。SVGに対応しているかどうかが判別できるようになったので、あとは判別後の処理を書いていきます。共通で最初にPNG画像を用意しておきましょう。→イラレなどでSVGファイルを開きます。→PNGにして同じファイル名で拡張子はpngで書き出し。→SVGファイルと同じ場所にアップロード。同じファイル名、同じ場所のほうが以下の作業が楽になります。非対応ブラウザの際にPNG画像に代替する方法は2つあります。4-1.CSSで書き換える場合ブラウザで確認してみるとわかりますが、htmlタグ部分にclassが付与されています。class=“no-svg”となっているかと思います。/>と、SVG対応する場合にはSVG画像を、対応しない場合にはPNG画像を代替することができますね。4-2.jQueryで書き換える場合jQueryで書き換えると、一括でSVGがPNGに書き換わります。src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>念のためjQueryの読み込み方法も記述しておきますね。バージョンはいくつでもかまわないのですが、私がたまたま使ってたバージョンで。jQueryは一応modernizrより先に読み込んで置いたら良いかもしれません。こちら、引用させていただきました。WATCHこれはすごいです。引用したら一瞬で切り替わる。SVG画像が多くて既に設置済の場合はjQueryのほうが圧倒的に楽ですね。以上で代替画像が表示されました。以上を設定しても、SVG画像は表示される(つまりSVG対応端末と判定される)Android3〜4辺りで、アスペクト比が崩れてしまいました。画像は表示されるのに、横に引き伸びたり縦に引き伸びたりしてしまう。Android4くらいになると、使用しているユーザーはまだ少なからずいると思いますので、これはちとやばい、ということで焦りました。1SVGファイルをDreamWeaverなどHTMLを編集しているソフトで開く。SVGファイルって、画像ファイルだけど、DreamWeaverやテキストエディットなどで開くことができます。ついでに画像タグだけじゃなくて、HTMLでも読み込むことができるんですよね。知識がないので感覚でしかお話できないのですが。HTMLをいじるのと同じ感覚でSVGファイルを開いてみてください。2SVGタグ内に追記をする。参考にした記事を引用させていただきますね。「preserveAspectRatio」はviewBoxで指定したサイズと実際の描画サイズが異なる場合に、アスペクト比をどう制御するかを設定するためのプロパティです。blogしかし、Android4くらいだっけな、だと、これだけではアスペクト比は直りませんでした。画像が横長になったまま。そこで!SVGタグ内にさらに元画像のwidthとheightの数値を追記します。height=”数値”」の表記はありません。そこで、それを付け加えることに。xml:space="preserve">こんな感じでした。数字など書き直してくださいね。今回の場合はwidthなど細かな数字になっていますが、適当に作ったSVG画像で、viewBoxに書いてあったのをそのまま書いただけです。これで無事、アスペクト比を保ったまま表示することができました。参考記事のおかげです。本当にありがたいです。