스케일러블 벡터 그래픽스(Scalable Vector Graphics)

SVG(Scalable Vector Graphics)는 웹 친화적인 벡터 파일 포맷.

• JPEG와 같은 픽셀 기반의 래스터 파일과 달리, 벡터 파일은 그리드 위의 점과 선을 기반으로 하는 수학 공식을 통해 이미지를 저장한다. (수학 공식으로 저장하므로, 픽셀 기반보다 더 적은 용량을 차지한다.)
• XML기반의 파일로 메모장과 같은 문서 편집기로 편집이 가능하다.
• 확대나 축소를 해도 픽셀이 깨지지 않고 화질이 유지되며, 용량이 PNG, GIF보다 작다. 이는 SVG가 그래픽을 수학적 형상과 경로로 정의하기 때문이다. 따라서 화면의 해상도에 관계없이 깨끗하게 표현 할 수 있다.
• SVG는 DOM의 일부로 처리되므로, JavaScript및 CSS를 사용하여 동적으로 변경하거나 애니메이션 효과를 적용할 수 있다.

Vector

• 수학 계산식(형상, 선, 색상 등을 정의하는 방식)을 컴퓨터가 렌더링
• 이 공식은 확대 밑 축소 시에도 일관되게 그래픽을 그리는 데 사용되어, 아무리 확대하거나 축소해도 선명도가 저하되지 않는다.
• 복잡하고 해상도가 높은 고품질의 이미지를 표현하기엔, 너무 제한적이다. 단순한 아이콘을 표현하는 데 장점이 있다.
• 로고, 아이콘에 적합
• EPS, SVG, AI등

Raster

• 비트맵 그래픽이라고도 불린다.
• 이미지를 픽셀로 표현하는 방식
• 각 픽셀은 특정 값을 가지며, 이 픽섹들이 모여서 전체 이미지를 형성한다.
• 이미지를 확대할 경우, 픽셀이 확대되어 이미지가 흐릿해지는 픽셀화 현상(Pixelation)이 발생한다.
• 사진에 적합
• GIF, JPG, PNG 등

Vector Graphics와 Raster Graphics는 각각 특성에 따라 사용되므로, 필요에 따라 적절한 형식을 선택하는 것이 중요하다.