SVG는 그림이면서 HTML처럼 조작되는 요소 모음

SVG 도형은 DOM에 남아 CSS, 이벤트, 접근성 설명을 각 요소 단위로 연결할 수 있다.

SVG 구성	가능한 조작	좋은 사용처	주의점
rect/circle/path	도형별 선택과 스타일 변경	아이콘, 작은 차트, 다이어그램	요소 수가 너무 많으면 무거움
CSS	fill, stroke, class로 상태 표시	테마와 hover 효과	색만으로 상태를 구분
Event	도형별 click, focus 처리	대화형 지도와 그래프	키보드 접근 누락
Accessibility	title, desc, role 제공	정보 그래픽 설명	화면에 보이지만 읽히지 않음
Scale	해상도 독립 벡터	로고와 선명한 UI 그래픽	사진 같은 픽셀 작업에는 부적합

SVG는 그림 파일이 아니라 문서 안의 작은 DOM 구조로 보면 스타일과 접근성 설계가 쉬워진다.