2025-03-14T13:00:37

doc/svg/README.md

@@ -0,0 +1,75 @@
+실무 중심의 SVG 책을 위한 목차를 구성해 보았습니다.  
+
+---
+
+# **실무에서 바로 쓰는 SVG**  
+
+## **1. SVG 기본 개념과 활용 개요**  
+1.1 SVG란 무엇인가?  
+1.2 SVG와 래스터 이미지(PNG, JPEG) 비교  
+1.3 SVG의 장점과 한계  
+1.4 실무에서 SVG가 사용되는 분야  
+
+## **2. SVG의 기본 구조와 핵심 요소**  
+2.1 SVG 문서의 기본 구조  
+2.2 주요 SVG 요소 소개 (`<svg>`, `<g>`, `<defs>`, `<symbol>`, `<use>` 등)  
+2.3 뷰박스(`viewBox`)와 좌표 시스템 이해  
+2.4 기본 도형 (`<rect>`, `<circle>`, `<ellipse>`, `<line>`, `<polyline>`, `<polygon>`)  
+
+## **3. 경로(Path)와 복잡한 도형 그리기**  
+3.1 `<path>` 요소의 기본 개념  
+3.2 `d` 속성 상세 설명 (M, L, H, V, C, S, Q, T, A 명령어)  
+3.3 Bézier 곡선과 아크(Arc) 다루기  
+3.4 실무에서 자주 쓰이는 Path 예제  
+
+## **4. 스타일링과 시각적 효과**  
+4.1 `fill`과 `stroke` 속성  
+4.2 선과 면 스타일링 (`stroke-width`, `stroke-dasharray`, `opacity` 등)  
+4.3 `fill-rule`과 `clipPath` 활용  
+4.4 그라디언트 (`<linearGradient>`, `<radialGradient>`)  
+4.5 패턴 (`<pattern>`)을 이용한 배경 효과  
+
+## **5. 텍스트와 아이콘**  
+5.1 `<text>` 요소와 주요 속성  
+5.2 `<tspan>`과 `<textPath>`를 활용한 세밀한 조정  
+5.3 SVG 아이콘 제작과 활용 (`symbol`, `use`)  
+5.4 웹 폰트와 SVG 조합 (`<foreignObject>` 활용)  
+
+## **6. SVG 애니메이션**  
+6.1 `animate`와 `animateTransform` 기본 개념  
+6.2 실무에서 유용한 SVG 애니메이션 예제  
+6.3 CSS를 활용한 SVG 애니메이션  
+6.4 JavaScript와 SVG 애니메이션  
+
+## **7. 인터랙티브 SVG**  
+7.1 SVG와 JavaScript 이벤트 (`click`, `mouseover`, `mousemove` 등)  
+7.2 `getBoundingClientRect()`와 마우스 좌표 변환  
+7.3 SVG를 활용한 인터랙티브 차트 및 그래프  
+7.4 드래그 & 드롭 구현 (`pointer-events`)  
+
+## **8. SVG 최적화 및 퍼포먼스 튜닝**  
+8.1 불필요한 속성 및 요소 제거  
+8.2 `use`와 `symbol`을 이용한 재사용  
+8.3 SVG 코드 압축 및 최적화 도구 (SVGO 활용)  
+8.4 복잡한 SVG를 Canvas로 변환하기  
+
+## **9. SVG와 프레임워크 연동**  
+9.1 React에서 SVG 사용 (`<svg>` vs `background-image`)  
+9.2 Vue와 SVG 컴포넌트 활용  
+9.3 D3.js와 SVG를 활용한 데이터 시각화  
+9.4 Three.js와 SVG 연계  
+
+## **10. SVG 실무 프로젝트**  
+10.1 SVG 기반 아이콘 시스템 만들기  
+10.2 SVG를 활용한 대시보드 UI  
+10.3 반응형 SVG 디자인 패턴  
+10.4 실무에서 자주 쓰이는 SVG 활용 사례 분석  
+
+## **부록**  
+A. SVG 관련 유용한 도구 및 사이트 목록  
+B. SVG 파일을 코드로 변환하는 방법  
+C. SVG의 접근성 고려 사항  
+
+---
+
+이 목차는 실무에서 SVG를 활용할 때 필요한 내용을 체계적으로 정리했습니다. 추가하고 싶은 내용이 있으면 알려 주세요!