HTML SVG태그 분석

소개

SVG(Scalable Vector Graphics) 태그와 Canvas 태그는 HTML에서 그래픽을 렌더링할 때 자주 사용되는 두 가지 방법입니다.

하지만 이 두 기술은 그래픽 처리 방식이 다르기 때문에, 상황에 따라 적합한 용도가 다릅니다.

이 글에서는 SVG와 Canvas의 차이점과 예시 상황을 살펴보고, 자주 사용하는 속성들을 정리하겠습니다.

---

SVG와 Canvas의 차이점

SVG (Scalable Vector Graphics)

• 벡터 그래픽 방식으로 이미지를 표현합니다.
• 해상도에 독립적이어서 확대해도 이미지 품질이 유지됩니다.
• DOM 요소로 인식되므로 이벤트 바인딩이 가능합니다.
• 주로 차트, 지도, 아이콘 등 상호작용이 필요한 그래픽에 적합합니다.

사용 예시:

• 웹사이트 아이콘 및 로고
• 대화형 지도나 차트

---

Canvas

• 비트맵(pixel-based) 방식으로 이미지를 그립니다.
• 해상도 의존적이며, 확대 시 픽셀화가 발생할 수 있습니다.
• DOM 요소가 아니므로 이벤트 바인딩이 어렵고 별도로 구현해야 합니다.
• 주로 실시간 게임, 애니메이션 등 빠른 렌더링이 필요한 경우에 사용됩니다.

사용 예시:

• 실시간 그래픽이 필요한 게임
• 복잡한 도형이나 애니메이션

---

주요 속성 비교

비교 항목	SVG	Canvas
그래픽 타입	벡터 (Vector)	비트맵 (Bitmap)
해상도	해상도에 독립적	해상도 의존적
이벤트 처리	DOM 요소에 이벤트 바인딩 가능	이벤트 바인딩 어려움 (별도 처리 필요)
렌더링 속도	복잡한 그래픽에서 느림	빠르고 효율적
사용 목적	아이콘, 차트, 상호작용이 많은 그래픽	게임, 실시간 애니메이션

---

SVG와 Canvas의 자주 사용되는 속성 및 이벤트 정리

종류	속성 / 이벤트	설명	예시
SVG	width / height	SVG 요소의 가로 및 세로 크기를 설정합니다.	<svg width="300" height="300">...</svg>
	fill	도형의 내부 색상을 지정합니다.	<circle fill="blue" />
	stroke	도형의 외곽선 색상을 지정합니다.	<circle stroke="black" stroke-width="2" />
	onmouseover	마우스가 도형 위에 올려질 때 발생하는 이벤트입니다.	onmouseover="alert('Hover!')"
	onmouseleave	마우스가 도형에서 떠날 때 발생하는 이벤트입니다.	onmouseleave="alert('Left!')"
	onclick	도형을 클릭할 때 발생하는 이벤트입니다.	onclick="alert('Clicked!')"

---

Canvas	속성 / 메서드	설명	예시
2D Context	fillStyle	도형의 내부 색상을 설정합니다.	ctx.fillStyle = 'green';
	strokeStyle	외곽선의 색상을 지정합니다.	ctx.strokeStyle = 'black';
	lineWidth	외곽선의 두께를 설정합니다.	ctx.lineWidth = 2;
	fillRect()	직사각형을 그립니다.	ctx.fillRect(10, 10, 100, 50);
	beginPath()	새로운 경로를 시작합니다.	ctx.beginPath();
	arc()	원을 그릴 때 사용합니다.	ctx.arc(75, 75, 50, 0, Math.PI * 2);
	onPointLeave	마우스가 특정 영역에서 벗어날 때 이벤트를 트리거합니다.	Canvas에는 기본 제공되지 않아 수동 구현 필요

---

로고를 SVG로 구현하는 이유

• 이미지 파일(PNG, JPG) 대비 장점

항목	SVG	PNG / JPG
해상도 독립적 (Scalable)	벡터 기반이므로 크기를 조정해도 화질이 깨지지 않음	확대 시 픽셀화 발생, 화질 저하가 발생함
파일 크기와 성능 최적화	텍스트 형식으로 정의되어 작고 가벼움. 하나의 파일로 모든 해상도 지원 가능	고해상도별로 다양한 이미지가 필요해 파일 크기 증가
CSS와 JS로 동적 스타일링 및 애니메이션	CSS로 색상과 크기 등 스타일 조정 가능. 마우스 오버 시 색상 변경, 애니메이션 구현 가능	정적 이미지로 스타일 변경 불가. 애니메이션 구현이 어려움
반응형 디자인 지원	viewBox 속성으로 화면 크기에 맞게 유연하게 크기 조정 가능	다양한 화면 크기에 맞추려면 별도의 해상도별 파일이 필요
접근성 향상	title과 desc 태그로 스크린 리더에서 의미 전달 가능	이미지에 대한 의미 전달이 어려움
버전 관리 및 유지보수 용이	텍스트 형식이므로 Git과 같은 도구에서 변경 내역 추적이 쉬움	바이너리 형식이라 변경 내역을 파악하기 어려움