SVG란?

taehyung·2024년 7월 4일

SVG(Scalable Vector Graphics)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 벡터 이미지 형식입니다.

비트맵 형식은 도트를 사용하여 이미지를 표현합니다. 모눈 종이에 색을 채운것과 같은 형식입니다.

벡터 형식은 컴퓨터의 연산을 사용하여 이미지를 표현합니다.

무한한 확대/축소
SVG는 벡터 형식이기 때문에 크기와 무관하게 선명도를 유지합니다. 픽셀 기반의 이미지(jpg, png 등)와 달리 확대해도 품질 저하가 없습니다.
파일 크기
복잡하지 않은 그래픽이나 아이콘의 경우 파일 크기가 매우 작습니다. 이는 웹 페이지 로딩 속도를 개선하는 데 도움이 됩니다.
편집 가능성
XML 기반이라 텍스트 편집기를 사용해 수정이 가능합니다. 또한, 그래픽 소프트웨어(예: Adobe Illustrator)로 쉽게 편집할 수 있습니다.
검색 엔진 최적화(SEO)
SVG 파일 내의 텍스트는 검색 엔진에 의해 인덱싱될 수 있어 SEO에 유리합니다.
애니메이션
SVG는 CSS 및 JavaScript를 사용해 애니메이션 효과를 줄 수 있습니다.
호환성
대부분의 최신 웹 브라우저에서 기본적으로 지원됩니다.

복잡한 이미지의 파일 크기
매우 복잡한 이미지는 SVG 파일 크기가 커질 수 있으며, 이 경우 PNG나 JPEG가 더 효율적일 수 있습니다.
렌더링 속도
복잡한 SVG는 렌더링하는 데 더 많은 계산이 필요하므로 성능에 영향을 미칠 수 있습니다.
지원 제한
일부 오래된 브라우저에서는 SVG 지원이 제한적일 수 있습니다.

캔버스는 픽셀 하나하나 조작이 가능하고 JS로만 조작이 가능합니다.

그래픽 방식
래스터 그래픽( 비트맵 ): 캔버스는 픽셀 단위로 그림을 그리는 방식입니다. 이미지를 확대하면 픽셀이 늘어나면서 품질이 저하될 수 있습니다.
구조 및 접근성
비DOM 기반
캔버스는 DOM 요소와 독립적으로 작동하며, 캔버스에 그려진 개별 요소에 직접 접근할 수 없습니다. 대신 픽셀 데이터로 접근해야 합니다.
SEO 및 접근성
캔버스 내부의 내용은 검색 엔진에 의해 인덱싱되지 않으며, 접근성 도구로 읽을 수 없습니다.
상호작용
이벤트 처리: 캔버스 자체에는 이벤트 리스너를 추가할 수 있지만, 개별 그래픽 요소에 직접 이벤트를 추가할 수 없습니다. 클릭 좌표 등을 이용해 이벤트를 구현해야 합니다.
애니메이션
JavaScript: 캔버스는 JavaScript를 통해 프레임 단위로 애니메이션을 구현합니다. 게임이나 실시간 그래픽에 적합합니다.
적합한 용도
복잡한 게임, 실시간 데이터 시각화, 그래픽 편집기, 애니메이션 등 픽셀 단위의 정교한 제어가 필요한 경우에 적합합니다.

SVG를 선택할 때:
- 벡터 그래픽의 장점을 활용할 수 있는 경우(예: 아이콘, 다이어그램, 로고)
- 개별 요소의 상호작용이 필요한 경우
- 그래픽 요소가 많지 않고, 구조화된 방식이 필요할 때
캔버스를 선택할 때:
- 복잡한 그래픽이나 애니메이션이 필요한 경우(예: 게임, 실시간 그래픽)
- 픽셀 단위의 정밀한 제어가 필요한 경우
- 대량의 도형이나 픽셀 데이터 조작이 필요한 경우

Front End