Open1

SVG

seiya2130seiya2130

SVGとは

Scalabel Vector Graphicsの略称
ベクタ形式の画像ファイル、画像を円や線の図形の集まりとして表現している

従来のJPEGやPNGなどのビットマップ画像は、画像をピクセル(四角い画像)の集合として表現していたが、解像度に依存するため拡大すると画像がぼやけてしまう問題があった

ex)100×100ピクセルはピクセル10000個分の集合体、拡大していくと1つ1つが四角いピクセルになっている

ベクター形式は画像を図形と数式で表現するため、拡大縮小されても数式で再計算されるためボヤけたりすることがない

以下のsvgで表現する図形
circle → 円
cx, cy: 円の中心座標 → (5, 5)
r: 半径 → 4
stroke:線 → 黒
fill: 塗りつぶしの色 → 赤

<circle cx="5" cy="5" r="4" stroke="black" fill="red" />

参考

https://ja.wikipedia.org/wiki/ビットマップ画像

https://ja.wikipedia.org/wiki/Scalable_Vector_Graphics