목차
1 SVG 소개
1 1 SVG란 무엇인가? 13
1 2 SVG의 간략한 역사 15
1 3 SVG의 주요개념 15
1 4 SVG의 활용 17
1 5 SVG 뷰어의 종류 20
1 6 주요 관련 사이트 21
2 SVG 시작하기
2 1 SVG 뷰어 소개 25
2 2 SVG 뷰어의 설치 27
2 3 SVG 뷰어 사용법 41
2 4 SVG 시작하기 45
3.렌더링(Rendering)
3 1 렌더링 모델 65
3 2 기본 도형 그리기 66
3.3. 텍스트(Text) 79
4.패스(Paths)
4 1 패스 데이터 91
4.2. 패스 명령어(moveto, lineto, closepath) 92
4 3 커브 명령어 96
4.4. 타원형 호 커브(Elliptical arc curve) 102
5.스타일(Style)
5.1. 스타일링 속성(properties) 107
5 2 스타일링 활용 시나리오 111
5 3 스타일링 속성 지정 112
5.4. 프레젠테이션 속성(Presentation attributes) 113
5 5 XSL를 이용한 스타일링 114
5 6 CSS를 이용한 스타일링 117
5.7. style 요소 121
5 8 클래스 속성 122
6.페인팅(Painting)
6 1 소개 127
6 2 페인트 정의 128
6.3. 가시성 조절(Controlling visibility) 132
6.4. 마커(Markers) 133
6.5. 렌더링(Rendering) 특성 135
7.좌표계 및 변환(Transformation)
7.1. 뷰포트(Viewport) 141
7 2 초기 좌표 시스템 144
7.3. 뷰박스(viewBox) 속성 146
7 4 화면 비율 유지 148
7.5. preserveAspectRatio 속성 150
7 6 중첩 좌표계 156
7.7. 변환(Transformation) 159
7 8 변환의 속성 170
8.그래디언트(Gradient)
8.1. 선형 그래디언트(Linear Gradient) 175
8.2. 방사형 그래디언트(Radial Gradient) 178
9.패턴(Pattern)
10.클리핑(Clipping)과 마스킹(Masking)
10.1. 클리핑(Clipping) 189
10.2. 마스킹(Masking) 194
11.상호작용(Interactivity)과 연결(linking)
11 1 SVG 이벤트 201
11 2 이벤트 종류 206
11.3. 연결(Linking) 212
12.애니메이션(Animation)
13 실습 예제
13 1 세 개의 반투명 원 그리기 233
13 2 포인터 이벤트 생성하기 234
13 3 물결 텍스트 만들기 236
13 4 글자와 원 애니메이션 만들기 237
13 5 육각형 그리기 239
13 6 침이 움직이는 시계 그리기 242
13 7 텍스트 타이핑 애니메이션 만들기 245
13 8 원의 색 애니메이션 만들기 248
14 SVG 관련 도구
14.1. SVG Editor 253
14 2 비트맵 파일에서 SVG 파일로 변환하기 259
14 3 일러스트레이터에서 SVG 출력 263