도형이 DOM에 남아 있으므로 CSS, 이벤트, 접근성 설명을 요소별로 연결할
수 있습니다.
1. 요소
각 도형이 선택 대상
rectcircletext
CSS와 JS가 직접 찾을 수 있습니다.
2. 스타일
속성과 CSS로 표현
fillstrokeclass
색, 선, 클래스 변경으로 상태를 드러냅니다.
3. 의미
설명을 함께 남김
titledescaria
그래픽의 목적을 보조 기술에 전달합니다.
<rect id="box">선택자와 좌표가 남아 배경 카드처럼 제어된다.<circle class="hot">상태 클래스만 바꿔도 색과 강조가 바뀐다.<line stroke>선 두께와 끝 모양을 CSS 속성처럼 조정한다.<title> + <desc>보이지 않는 설명이 접근성 트리에 남는다.
아이콘, 로고, 다이어그램처럼 개별 도형의 의미와 상태가 중요하면 SVG가
특히 잘 맞습니다.