レスポンシブデザインにおいて、大きいウインドウや小さいウインドウに対応できるように、
ビットマップ画像を用意するとなると、サイズが大きい場合、ファイルサイズが大きすぎたりし、表示の時間が遅くなる。
そんな中で最近見直されてきたベクターデータのsvg形式の画像を表示させる方法について考えていきたいと思います。9月29日記事
目次
ラスターデータとは主にピクセルで作られる画像のことを言います。画像ファイルとしてはjpg,png,gif,bmp形式の画像です。
WEB上で画像を作る場合、ラスター画像がよく使われています。
そして、ディスプレイには画素（ピクセル）という細かい四角が敷き詰められています。
一般的なPCは横1600、縦900ほどの画素（ピクセル）が敷き詰められています。
当然綺麗に映るためには1600×900のほどの画像を表示させればいいのですが、ファイルサイズが重くなったりするので、
160×90の画像を作りたかったら、1600×900ではなく、160×90の画像を作っていました。
しかし、これでは画像を拡大してしまった場合、多少ぼやけたり、ひどい場合には、モザイク状態になってしまいます。
そんな中で、見直されてきたのが拡大しても綺麗に映るベクター形式の画像です。
ベクトルで管理され、距離と方向で画像を定義します。よって、拡大しても綺麗に画像が拡大できるというわけです。
画像の形式（拡張子）はsvgです。
illustratorはベクター形式で保存できるソフトウェアで、Photoshopはラスター形式で保存できるソフトウェアです。
その違いをまずは確認しにいきます。
illustratorとphotoshpでキャンバスの大きさを16px×16px、フォントサイズ2ptで文字を書いてみましょう。
同じく、illustratorで16px×16pxで2ptの文字を書いてみましょう。
文字はフォントと呼ばれる文字デザインの要素が含まれているので、これをアウトライン化します。 （文字を選択して）、[書式]→[アウトラインを作成]を選択します。
widthとheightとobject-fitプロパティを使っていきます。
HTML
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <meta charset="utf-8"> <title>ベクターデータ</title> </head> <body> <div id="wrapper"> <img src="nicepapersvg.svg"> </div> </body> </html>
CSS
@charset "utf-8";
/* CSS Document */
#wrapper{
border: 1px solid #000;
}
img{
width: 100%;
height: 100%;
object-fit:contain;
}
拡大しても縮小しても同じように表示されていることが確認できると思います。
各種ブラウザの状況ですが、OperaやChromeやFirefoxは大丈夫なのですが、IEは条件によって、少しぎこちない動きをする場合があります。。。。まあ、IEなので・・・とコメントはここで差し控えます（笑）。
以上
