SVG画像非対応ブラウザへのフォールバック方法メモ【2017】

SVGってピクセル画像じゃないからレスポンシブデザインにも最適でとっても便利という話を以前しました。
WEBで役立つ画像「SVG」とは【保存形式】 - misallychan.com

こちらimgタグで簡単に表示できるんですが、対応していないブラウザがあります。
サポート的にはもう終わっていても良い気がしますが、それでもサポートが必要だったため今回実施した対策をまとめました。
結構苦労したというか、なかなか対策が見つからず直らず苦戦しましたので、同じようにお困りの方はぜひお試しください。

f:id:misallychan:20170828153649p:plain

Android2.3以下・IE8以下など、SVGが表示されないブラウザへの対応

そもそもSVGが対応していないブラウザがあります。
こちらはさすがに手放しても良いとは思うんですけどね・・・念のため。

Modernizr.jsを使用。

こちら、閲覧者のブラウザが対応している機能を調べてくれます。

DL前にSVGを選択すると、SVGに対応しているかを調べてくれるので、場合分けなどでSVGが非対応の場合SVGファイルをPNGに書き換えることができます。

①まずModernizr.jsにアクセス。

Modernizr: the feature detection library for HTML5/CSS3

→[Add your detects] ピンクのボタンをクリック。
→[SVG]を選択。
→[BUILD]をクリック。
→ポップアップで開かれたBuildをダウンロード。

SVGを選ぶのがちょっとよくわからなかったこともあるので、以下のリンクから飛べばすぐダウンロードするだけになるかも。
Modernizr Download Builder

②アップロードして読み込み。

このファイルをサーバにアップロードし、HTML上で読み込みます。

HTML

<script src=“modernizr-custom.js"></script>

上記、ディレクトリはアップロード先に指定してくださいね。
ファイル名を書き換えた場合はそれに直してください。

これだけで設置は完了です。
SVGに対応しているかどうかが判別できるようになったので、あとは判別後の処理を書いていきます。

③SVGの代替となるPNG画像の準備

共通で最初にPNG画像を用意しておきましょう。

→イラレなどでSVGファイルを開きます。
→PNGにして同じファイル名で拡張子はpngで書き出し。
→SVGファイルと同じ場所にアップロード。

同じファイル名、同じ場所のほうが以下の作業が楽になります。

さて、非対応ブラウザの際にPNG画像に代替する方法は２つあります。

④-１．CSSで書き換える場合

ブラウザで確認してみるとわかりますが、htmlタグ部分にclassが付与されています。

SVGに対応している場合　class=“svg”
非対応の場合　class=“no-svg”

となっているかと思います。

なので

CSS

/*SVG対応の場合*/
html.svg .svg		{display:block;}/*SVG対応の場合、class=“svg"が付く要素を表示*/
html.svg .no-svg	{display:none;}/*SVG対応の場合、class=“no-svg”が付く要素を非表示*/
/*SVG非対応の場合*/
html.no-svg .svg		{display:none;}/*SVG非対応の場合、class=“svg”が付く要素を非表示*/
html.no-svg .no-svg		{display:block;}/*SVG非対応の場合、class=“no-svg”が付く要素を表示*/

というふうにCSSに書いておけば、例えば

HTML

<img class=“svg” src=“test.svg” />
<img class=“no-svg” src=“test.png” />

と、SVG対応する場合にはSVG画像を、対応しない場合にはPNG画像を代替することができますね。

④-２．jQueryで書き換える場合

jQueryで書き換えると、一括でSVGがPNGに書き換わります。

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

念のためjQueryの読み込み方法も記述しておきますね。バージョンはいくつでもかまわないのですが、私がたまたま使ってたバージョンで。
jQueryは一応modernizrより先に読み込んで置いたら良いかもしれません。

でjQueryの設定。こちら、引用させていただきました。

jQuery

<script>
$(function(){
  if (!Modernizr.svg){
    $('img').each(function() {
      $(this).attr('src', $(this).attr('src').replace(/\.svg/gi,'.png'));
    });
  }
});
</script>

引用記事：SVG のフォールバックは結局 Modernizr に落ち着いた件 | WWW WATCH

これはすごいです。引用したら一瞬で切り替わる。
SVG画像が多くて既に設置済の場合はjQueryのほうが圧倒的に楽ですね。

以上で代替画像が表示されました。

ただ、まだ問題がありました。

Android一部プリインストールブラウザで、アスペクト比が崩れる際の対応

以上を設定しても、SVG画像は表示される（つまりSVG対応端末と判定される）Android3〜4辺りで、アスペクト比が崩れてしまいました。

画像は表示されるのに、横に引き伸びたり縦に引き伸びたりしてしまう。

Android4くらいになると、使用しているユーザーはまだ少なからずいると思いますので、これはちとやばい、ということで焦りました。

①SVGファイルをDreamWeaverなどHTMLを編集しているソフトで開く。

SVGファイルって、画像ファイルだけど、DreamWeaverやテキストエディットなどで開くことができます。
ついでに画像タグだけじゃなくて、HTMLでも読み込むことができるんですよね。
あまり知識がないので感覚でしかお話できないのですが。。

なので、HTMLをいじるのと同じ感覚でSVGファイルを開いてみてください。

②SVGタグ内に追記をする。

参考にした記事を引用させていただきますね。

※「xmlns:xlink=〜」の記述の直後に「preserveAspectRatio=”none”」を追記
「preserveAspectRatio」はviewBoxで指定したサイズと実際の描画サイズが異なる場合に、アスペクト比をどう制御するかを設定するためのプロパティです。
引用記事：一部のAndroidブラウザでSVGを横幅100%で表示するとアスペクト比が崩れる問題 | hi-posi Front-End blog

しかし、Android4くらいだっけな、だと、これだけではアスペクト比は直りませんでした。。。。
画像が横長になったまま。

そこで！

SVGタグ内にさらに元画像のwidthとheightの数値を追記します。

SVGタグ内に既にviewBoxで指定されていますが、その後ろに「width=“数値” height＝”数値”」の表記はありません。
そこで、それを付け加えることに。

参考記事はこちら：AndroidでSVGが正しく表示されていなかった問題を解決 | Another Sky

まとめると。

HTML

<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" viewBox="0 0 300.1 96.8" width="300.1" height="96.8" style="enable-background:new 0 0 300.1 96.8;" xml:space="preserve">