Raster Graphics

Raster는 이미지를 표현하기 위한 방식으로 여러 개의 사각형으로 이루어져 이미지를 표현한다. 하나의 사각형에는 RGB(Sub pixcel)로 구성되는 컬러가 채워진 Element 로 이루어져 있고 이것을 Pixel이라 한다. 또한 pixcel로 구성된 리스트를 Bitmap이라 한다.

Raster Graphics - bitmap

Binary image

bitmap이 bit이라 불리는 가장 큰 이유는 pexel이 표현될 때 bit 열로 표현되기 때문이다. Binary image 이미지에서는 각 pexcel은 1bit로 이루어져 있으며 밝음(1), 어두움(0)으로 표현된다.

Raster Graphics - bitmap

gray-scale image

흑백 이미지는 단순히 어두움, 밝음이 아닌 밝기의 정도를 표현해야하는데 8bit=1byte=255, 0~255 사이 값으로 밝기를 표현한다. 즉, 1pexel 당 1byte로 표현되는 것이다.

Raster Graphics - bitmap

Color image

컬러 이미지는 색을 표현하기 위해 pexel 안에 3개의 subpixce(8bit)l을 갖는다.

이때 3개의 subpixel은 각각 빛의 삼원색인 Red, Green, Blue를 표현한다. 3개의 subpixcel은 하나의 true color를 만든다.

Raster Graphics

대표적인 raster 방식을 사용하는 이미지 확장자들

• PNG
• JPEG
• GIF

🤔Quiz 1

Pixcel은 뭐에 줄임말일까?

🤔Quiz 2

640x480크기의 Binary image가 있다.

이 이미지는 몇 Byte일까?

Vector Graphics

Raster 이미지는 점으로 구성되기 때문에 Resolution에 취약하다. 반면에 Vector graphic은 선, 곡선을 통한 여러 다각형을 만들고 그 다각형으로 수학적 계산을 통해 다각형에 색을 채우는 방식으로 이미지를 만든다. 따라서 확대, 축소를 해도 이미지가 깨지지 않고 완벽한 해상도를 제공한다.

Vector vs Raster

SVG

SVG는 Scalable Vector Graphic의 약자로 Vector그래픽을 사용하는 이미지 파일이다. 확대/축소 시에나 반응형웹을 만들때 resolution을 보장하는데 유리하다.

SVG는 XML이라는 마크업언어로 작성되며 HTML과 비슷하게 렌더링된다.

또한 Scalable이란 이름에 걸맞게 CSS도 적용 가능하며 각 element의 attribute를 통해 animation, filter등 다양한 효과 적용이 가능하다.

하지만 단점 역시 존재한다. SVG는 이미지가 복잡해져 개체 수 가 많아지면 SVG 구조가 복잡해져 DOM에 안 좋은 영향을 미치게 되고 렌더링 시 연산도 많아져 렌더링 성능도 안 좋아진다. 따라서 적절하게 필요한 곳에 활용하자.

SVG::example

ViewBox

svg element에는 viewBox라는 특별한 attribute가 있다.

View port - view port는 svg가 그려질  캔버스의 사이즈를 의미한. svg의 width, height attribute를 사용해서 view port의 size를 지정할 수 있다. 만약 지정하지 않는다면 브라우저의 viewport가 canvas의 크기가 된다.

view port는 여러가지 unit으로 크기 지정이 가능하다. default는 px이다.

units: px, ex, em, pt, pc, cm, mm, inch

viewBox 는 viewport를 기준으로 aspect ratio를 지정하는 attribute이다.

ViewBox - example

Syntax

🤔Quiz 3

Element와 Attribute를 정의할 수 있나요?

SVG's Elements

• rect
• circle
• ellipse
• line
• polyline
• polygon
• text
• path
• mask
• defs
• use
• desc
• ...

Elements - rect::attributes

x - x위치

y - y 위치

width - 사각형의 너비

height - 사각형의 높이

fill - 사각형 색

rx - radius(border) 가로축

ry - radius(border) 세로축

Elements - rect::example

Elements - circle

circle은 원점(center) 과 반지름(radius)을

사용해서 원을 그린다.

Elements - circle::attributes

cx - 원점의 x좌표

cy - 원점의 y좌표

r - 원의 반지름, 즉 r * 2가 원의 지름(크기)이 된다.

Elements - circle::example

Elements - ellipse

ellipse는 원점(center) 과 x축 반지름과 y축 반지름을

사용해서 타원을 그린다.

Elements - ellipse::attributes

cx - 원점의 x좌표

cy - 원점의 y좌표

rx - 원의 x축 반지름

ry - 원의 y축 반지름

Elements - ellipse::example

Elements - line

line은 2개을 점을 이용하여 선을 그립니다.

Elements - line::attributes

x1 - 시작점의 x좌표

y1 - 시작점의 y좌표

x2 - 끝점의 x좌표

y2 - 끝점의 y좌표

Elements - line::example

Elements - polyline

polyline은 여러 개의 점을 사용해서 다양한 방향으로 연결되는 "직선"을 그립니다.

Elements - polyline::attributes

points - 선을 연결할 점(x,y 좌표 쌍)들의 리스트

Elements - polyline::example

Elements - polygon

polygon은 여러 개의 점을 이용하여 도형을 구성하는 직선을 만든다. 

Elements - polygon::attributes

points - 꼭지점(x,y 좌표 쌍)들의 리스트

Elements - polygon::example

🤔Quiz 4

Polyline과 Polygon의 차이는 무엇일까요?

Elements - text

text는  텍스트 요소를 그린다.

Elements - text::attributes

x - x좌표

y - y좌표

rotate - 각 문자별 회전 방향 리스트

Elements - text::example

Elements - tspan

tspan은 text요소에 subtext를 넣을 때 사용한다. 이 요소의 용도는 특정 subtext에 style이나 position를 조정하기 위해서 이다.

Elements - tspan::example

Elements - g

g는 여러 요소들의 그루핑하는 컨테이너 요소이다.

그룹 안에 있는 요소들은 g의 효과를 상속 받는다. 

따라서 여러 요소에 한 번에 동일한 효과를 줄 수 있다. 

Elements - g::example

Elements - path

path는 직선, 곡선을 이용하여 어떤 다양한 형태로의 도형을 그릴 수 있다. SVG element 중 꽃이라고 할 수 있다.

Elements - path::attributes

d - path를 정의한다.

      d는 다양한 command를 가지고 있다.  

     각 command는 직선과 곡선을 그릴 수 있는 명령어이다.

Elements - path::attributes

d's commands

M, m - 라인의 시작점의 위치를 이동한다.

L, l - 시작점의 부터 선을 그을 끝점을 넣는다.

H, h - 시작점으로 부터 가로 선을 긋는다.

V, v - 시작점으로 부터 세로 선을 긋는다.

C, c - 4개의 점을 사용한 3차 베지어 곡선을 그린다.

Q, q - 3개의 점을 사용한 2차 베지어 곡선을 그린다.

A, a - 호를 그린다.

Z, z - 끝점과 시작점을 연결한다.

Elements - path

Bezier curve

제어점

Elements - path::example

Elements - defs

defs는 바로 렌더링 되지 않고 다른 요소에서  사용할 효과 요소를 저장하는 저장소이다.

Elements - defs::example

Elements - desc

desc는 웹 접근성을 위해 현 요소에 대한 짧거나 긴 설명을 넣어 주고 싶을 때 사용한다. 설명은 화면에 렌더링 되지 않는다.

Elements - desc::example

Elements - use

use는 다른 곳에서 사용된 요소의 동일하게 효과를 가져와 사용할 수 있도록 한다. 원본에서 사용된 속성은 오버라이드할 수 없다.

Elements - use::attritues

• href - 원본 요소의 URL을 입력한다.
• [...rest] - 원본 요소에 들어 갈 수 있는 다른 attribute들 사용 가능하다. 단, 이미 원본에서 사용된 attribute는 사용할 수 없음

Elements - use::example