# ベクタ画像

SVG は、インターネット上でよく使われる画像の形式だよ  
スケーラブル・ベクタ・グラフィックスの略なんだ


## ![改造する](svg/main.js)

## ベクタ画像

コンピューターが扱う画像は、大きく分けてふたつあるんだ  
`JPG` などの **ラスタ画像** と、  
`SVG` などの **ベクタ画像** だよ

ラスタ画像は、色のついた点をたくさん並べるようにして絵を表現するけど、  
ベクタ画像では、絵を「図形をたくさん重ねたもの」ととらえて、  
たくさんの線をつなげて図形をつくることで、絵を表現するんだ

ラスタ画像では普通、「四角い点」を格子(こうし)状に並べていくから、  
円の絵を表現すると、どうしても周りがギザギザになってしまうんだ  

だけどベクタ画像の場合、まず円の絵を「円の図形」ととらえる。  
その円をつくる輪っかの線の位置や形をそのまま残すから、  
どれだけ大きくしてもギザギザにならない絵を表現できるんだ  
だから、スケーラブル（大きさを変えられる）と呼ばれているんだよ

本当にスケーラブルなのか、大きさを変えて試してみよう！


パラメータ | 意味 | 最小 | 最大 
--- | --- | --- | ---
scale | 大きさの倍率 | 0 | Infinity
sampling | 読み込みのおおざっぱさ | 0 以上 | なし

`sampling` は、小さくするほど、図形が細かく読み込まれるよ  
ただしコンピューターの計算量も増えてしまうから、注意してね


[メニューに戻る](index.html)