「WEBの画像をラスターデータからベクターデータにする」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
レスポンシブデザインにおいて、大きいウインドウや小さいウインドウに対応できるように、
ビットマップ画像を用意するとなると、サイズが大きい場合、ファイルサイズが大きすぎたりし、表示の時間が遅くなる。
そんな中で最近見直されてきたベクターデータのsvg形式の画像を表示させる方法について考えていきたいと思います。9月29日記事
~
~
目次
#contents
~
~
----
~
*ラスターデータの限界
ラスターデータとは主にピクセルで作られる画像のことを言います。画像ファイルとしてはjpg,png,gif,bmp形式の画像です。
WEB上で画像を作る場合、ラスター画像がよく使われています。
そして、ディスプレイには画素（ピクセル）という細かい四角が敷き詰められています。
一般的なPCは横1600、縦900ほどの画素（ピクセル）が敷き詰められています。
当然綺麗に映るためには1600×900のほどの画像を表示させればいいのですが、ファイルサイズが重くなったりするので、
160×90の画像を作りたかったら、1600×900ではなく、160×90の画像を作っていました。
しかし、これでは画像を拡大してしまった場合、多少ぼやけたり、ひどい場合には、モザイク状態になってしまいます。
そんな中で、見直されてきたのが拡大しても綺麗に映るベクター形式の画像です。
ベクトルで管理され、距離と方向で画像を定義します。よって、拡大しても綺麗に画像が拡大できるというわけです。
画像の形式（拡張子）はsvgです。
~
~
*illustratorでベクターデータの作成
illustratorはベクター形式で保存できるソフトウェアで、Photoshopはラスター形式で保存できるソフトウェアです。
その違いをまずは確認しにいきます。
~
~
**illustratorとphotoshpでキャンバスの大きさを16px×16px、フォントサイズ2ptなどの（極小サイズ）で文字を描いてみる
illustratorとphotoshpでキャンバスの大きさを16px×16px、フォントサイズ2ptで文字を書いてみましょう。
***まずはPhotoshop
&image(width=400,svg001.png)
「ctrl」+「＋」で拡大し、2ptで文字を書いていきます。※2pt入力すれば2ptにできます。すると以下のようになります。
&image(width=400,svg002.png)
&color(red){Photoshopで作った場合、2pxの大きさの文字は小さすぎて文字として認識できず、ほとんどモザイク状態になってしまいます。}
~
~
***次にillustrator
同じく、illustratorで16px×16pxで2ptの文字を書いてみましょう。
&image(width=500,svg003.png)
2ptにも関わらず、文字が表示されています。
&image(width=400,svg004.png)
文字はフォントと呼ばれる文字デザインの要素が含まれているので、これをアウトライン化します。
（文字を選択して）、[書式]→[アウトラインを作成]を選択します。
&image(width=400,svg005.png)
~
~
ctrl+shift+alt+SボタンでWEB用に書き出しします。拡張子はsvgを選びましょう。これでベクターデータの画像作成は完了です。
&image(width=400,svg006.png)
~
~
*コード
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;
}
*拡大縮小
拡大しても縮小しても同じように表示されていることが確認できると思います。
&image(width=400,svg007.png)
&image(width=400,svg008.png)
画像の場合はいいのですが、文字の場合、アウトライン化して、あげることが必要です。
~
~
以上
レスポンシブデザインにおいて、大きいウインドウや小さいウインドウに対応できるように、
ビットマップ画像を用意するとなると、サイズが大きい場合、ファイルサイズが大きすぎたりし、表示の時間が遅くなる。
そんな中で最近見直されてきたベクターデータのsvg形式の画像を表示させる方法について考えていきたいと思います。9月29日記事
~
~
目次
#contents
~
~
----
~
*ラスターデータの限界
ラスターデータとは主にピクセルで作られる画像のことを言います。画像ファイルとしてはjpg,png,gif,bmp形式の画像です。
WEB上で画像を作る場合、ラスター画像がよく使われています。
そして、ディスプレイには画素（ピクセル）という細かい四角が敷き詰められています。
一般的なPCは横1600、縦900ほどの画素（ピクセル）が敷き詰められています。
当然綺麗に映るためには1600×900のほどの画像を表示させればいいのですが、ファイルサイズが重くなったりするので、
160×90の画像を作りたかったら、1600×900ではなく、160×90の画像を作っていました。
しかし、これでは画像を拡大してしまった場合、多少ぼやけたり、ひどい場合には、モザイク状態になってしまいます。
そんな中で、見直されてきたのが拡大しても綺麗に映るベクター形式の画像です。
ベクトルで管理され、距離と方向で画像を定義します。よって、拡大しても綺麗に画像が拡大できるというわけです。
画像の形式（拡張子）はsvgです。
~
~
*illustratorでベクターデータの作成
illustratorはベクター形式で保存できるソフトウェアで、Photoshopはラスター形式で保存できるソフトウェアです。
その違いをまずは確認しにいきます。
~
~
**illustratorとphotoshpでキャンバスの大きさを16px×16px、フォントサイズ2ptなどの（極小サイズ）で文字を描いてみる
illustratorとphotoshpでキャンバスの大きさを16px×16px、フォントサイズ2ptで文字を書いてみましょう。
***まずはPhotoshop
&image(width=400,svg001.png)
「ctrl」+「＋」で拡大し、2ptで文字を書いていきます。※2pt入力すれば2ptにできます。すると以下のようになります。
&image(width=400,svg002.png)
&color(red){Photoshopで作った場合、2pxの大きさの文字は小さすぎて文字として認識できず、ほとんどモザイク状態になってしまいます。}
~
~
***次にillustrator
同じく、illustratorで16px×16pxで2ptの文字を書いてみましょう。
&image(width=500,svg003.png)
2ptにも関わらず、文字が表示されています。
&image(width=400,svg004.png)
文字はフォントと呼ばれる文字デザインの要素が含まれているので、これをアウトライン化します。
（文字を選択して）、[書式]→[アウトラインを作成]を選択します。
&image(width=400,svg005.png)
~
~
ctrl+shift+alt+SボタンでWEB用に書き出しします。拡張子はsvgを選びましょう。これでベクターデータの画像作成は完了です。
&image(width=400,svg006.png)
~
~
*コード
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;
}
*拡大縮小
拡大しても縮小しても同じように表示されていることが確認できると思います。
&image(width=400,svg007.png)
&image(width=400,svg008.png)
画像の場合はいいのですが、文字の場合、アウトライン化してあげることが必要です。
~
~
*まとめ
各種ブラウザの状況ですが、OperaやChromeやFirefoxは大丈夫なのですが、IEは条件によって、少しぎこちない動きをする場合があります。。。。まあ、IEなので・・・とコメントはここで差し控えます（笑）。
~
~
以上
