SVGとは、ベクター形式の画像ファイルで拡大しても劣化しないといったメリットがあります。

IE8のサポートが終了し、弊社の対応ブラウザでは基本的にSVGが利用できるようになりました。
今まですべて画像として切り出していたアイコンも、フォントアイコンとして利用することも多くなりました。

今回は、デバイス幅いっぱいまで拡大させる画像をSVGで実装したときにあった問題とその解決方法をご紹介します。

■img要素で使った際にIE11(edge)でちらつき発生

SVGの使い方は複数あります。
・img要素のsrc属性にsvgファイルを指定する。
・object要素のdata属性にsvgファイルを指定する。
・HTML文書に直接svgコードを記述する。

最初、一番馴染み深いimg要素でSVGを使っていたのですが、IEで問題がありました。

ブラウザの幅を変更すると、変更中SVG画像が消え、変更が終わった後に再表示されます。
その為ちらつき不具合のように見えます。
IEではリサイズ中はリサイズされるSVGの描画をしないようですね。

→解決方法
　img要素以外の方法でSVGを利用する。

■SVGをアスペクト比を維持せずサイズを変えたい

pngなどの画像は、サイズを指定するとアスペクト比に関係なくそのサイズで表示されます。
ですが、SVGはアスペクト比を維持したままサイズが変わるので、幅いっぱいには広げたいが高さは固定したいといった場合に問題になります。

→解決方法
　SVGのpreserveAspectRatio属性を"none"と設定する。

■1pxの隙間ができる

cssの背景色を設定したブロックの上下にSVG画像をピッタリくっつけているにもかかわらず、隙間ができることがありました。
必ず隙間ができるのではなく、ブラウザの幅を変更していると出たり出なかったりしました。

幅いっぱいまで表示するようにしていた為、割り切れず隙間ができるのだと想像。どうしようもないものだとあきらめました。

→対処方法
　隙間が発生する箇所を、after疑似要素を上に重ね目隠しする。

■chromeでSVG画像が更新されない時がある

ある条件下でリサイズした際に、SVG画像が更新されず意図した見た目にならないという問題が発生しました。

サンプルを作ろうとしましたが、うまく再現させることができませんでした。
ですが、実際に作ったサイトでは必ず発生する…。
そんな困った不具合でした。

想像される発生条件
・SVGがブラウザ幅いっぱいに可変する。
・そのSVGがfixedの要素にある。
・動画など描画負荷が高い要素がある。
→ブラウザの幅を広げると、広げる前の状態のまま幅いっぱいにならない。

→対処方法
　原因はよく分からないが、結果は再描画されていないからだと断定。
　ブラウザのリサイズ時に無理やり描画させ対応。
　jQueryで描画に関係しそうな属性を変化させ無理やり更新させる。

$(window).resize(function(){
    $('svg').css({fontSize: '10px'}).animate({fontSize: '11px'}, 1);
});

以上、かなり限定的な問題ですが、何らかの足しになりましたら幸いです。

この記事を読んで、私たちに興味を持ったお客様は、気軽にお問い合わせください！

★お問い合わせ