svgとはJPEGやPNGのような画像(ビットマップデータ)ではなくイラストレーターで扱うベクターデータ。
モダンブラウザであればsvgは大体対応しているので出番が増えてきた今日この頃。
使いやすくはなってきているけれどブラウザによっては不具合が出るんですよね。
Chromeだと問題ない。でもEdgeだと表示がおかしいなんてことも多々あります。
そこで今回はいくつかハマった不具合とその対処方法を紹介しておきます。
CONTENTS
Chromeで背景画像にsvgを使ってtransformさせたらエッジがギザギザに。
IEやEdgeで問題ないのに、なぜChromeで不具合が。。。って思ったりもしたのですが1行コードを追加するだけでエッジが滑らかに。
-webkit-backface-visibility: hidden;このコードをtransformを記述しているcssに追記したら解決！
IE11で背景画像にsvgを使ってtransformさせたら画像が背景いっぱいに表示されず小さいまま。
svgにサイズ情報が不足していることが原因でした。
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1500 1000">
<title>hoge</title>
<g id="レイヤー_2" data-name="レイヤー 2">
<g id="レイヤー_1-2" data-name="レイヤー 1">
<image width="1500" height="1000".....これはIllustratorでsvgを書き出した例ですが、svgの部分にはwidthなどが記載されておらずIEなどではサイズを認識しません。
なので以下のようにサイズ情報を足してあげます。
<svg width="1500" height="1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1500 1000">
<title>hoge</title>
<g id="レイヤー_2" data-name="レイヤー 2">
<g id="レイヤー_1-2" data-name="レイヤー 1">
<image width="1500" height="1000".....これでIEやEdgeでも画像サイズを認識してbackground-size: cover;などのcssがちゃんと機能します。
試行錯誤したけど背景画像のsvgが表示されない
cssの指定も出来ている。svgデータもきちんとアップされている。なのに背景画像のsvgが表示されない。
その場合はサーバーでsvgが使えるようになっていない可能性が高いです。
以下の記述をすることでsvgが使えるようになり、きちんと表示されるようになります。
.htaccess
AddType image/svg+xml .svg
AddType image/svg+xml .svgzトラブルもありますが、解像度がどうあれ綺麗に表示させるsvg。
うまく使っていきたいものです。
