SVGがIE / EDGEで表示されない時にとりあえずやってみる事
こんにちわ、ma-ya’s CREATE［まーやずくりえいと］です。
もはや一般的になったSVG画像。
ベクター画像の為サイズに関係なく綺麗にディスプレイ表示されるので、高解像度ディスプレイとの相性もいいです。
ただ、いまだにIE/EDGEではやや対応していない部分があったりするので使用は少し注意した方がいいかもしれません。
IE / EDGEでSVGが表示されない…
特に圧縮したSVGの場合、そもそも画像自体が表示されない時があります。
そんな時にとりあえずやってみるといいのが
- viewBoxの指定
- width / heightの指定
であります。
①か②、もしくは両方を指定してやるとうまく表示されるケース多し。
書き出し方や圧縮ツールにもよるんですが、場合によって①②の指定が省かれてしまうみたいですね。
そんな時はまずSVG画像をテキストエディタで開いて、↓のようにsvgタグ内に追記してやります。
<svg ～ viewBox="0 0 166 73" width="166" height="73" ～ ></svg>
両方指定するときはサンプルのように縦横の指定をviewBoxとwidth / heightで合わせてやると画像のズレを防げます。
基本的にはwidth / heightを指定するだけで表示されるようなんですが、ぼくの場合はそれでも解消しないケースや、viewBoxの指定だけで表示されたりするケースもあったので、いっそ両方指定してみるというのも一つの手かもしれません。
SVG画像は画像の“ような”ファイルですが、正確に言うと図形をコードで表したデータです。
線の傾きや塗りといった情報を英数字で表した文書データのため、テキストエディタで開けるというわけです。
にしても二日酔いが酷い…
