목차 일부
1 SVG 소개 ... 11
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 시작하기 ... 23
2.1. SVG 뷰어...
더보기
목차 전체
1 SVG 소개 ... 11
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 시작하기 ... 23
2.1. SVG 뷰어 소개 ... 25
2.2. SVG 뷰어의 설치 ... 27
2.3. SVG 뷰어 사용법 ... 41
2.4. SVG 시작하기 ... 45
3 렌더링(Rendering) ... 63
3.1. 렌더링 모델 ... 65
3.2. 기본 도형 그리기 ... 66
3.3. 텍스트(Text) ... 79
4 패스(Paths) ... 89
4.1. 패스 데이터 ... 91
4.2. 패스 명령어(moveto, lineto, closepath) ... 92
4.3. 커브 명령어 ... 96
4.4. 타원형 호 커브(Elliptical arc curve) ... 102
5 스타일(Style) ... 105
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) ... 125
6.1. 소개 ... 127
6.2. 페인트 정의 ... 128
6.3. 가시성 조절(Controlling visibility) ... 132
6.4. 마커(Markers) ... 133
6.5. 렌더링(Rendering) 특성 ... 135
7 좌표계 및 변환(Transformation) ... 139
7.1. 뷰포트(Viewport) ... 141
7.2. 초기 좌표 시스템(Using Default coordinates) ... 144
7.3. 뷰박스(viewBox)속성 ... 146
7.4. 화면 비율 유지(Preserving Aspect Ratio) ... 148
7.5. preserveAspectRatio 속성 ... 150
7.6. 중첩 좌표계(Nested Systems of Coordinates) ... 156
7.7. 변환(Transformation) ... 159
7.8. 변환의 속성 ... 170
8 그래디언트(Gradient) ... 173
8.1. 선형 그래디언트(Linear Gradient) ... 175
8.2. 방사형 그래디언트(Radial Gradient) ... 178
9 패턴(Pattern) ... 183
10 클리핑(Clipping)과 마스킹(Masking) ... 187
10.1. 클리핑(Clipping) ... 189
10.2. 마스킹(Masking) ... 194
11 상호작용(Interactivity)과 연결(linking) ... 199
11.1. SVG 이벤트 ... 201
11.2. 이벤트 종류 ... 206
11.3. 연결(Linking) ... 212
12 애니메이션(Animation) ... 217
12.1. 〈animate〉요소 ... 222
12.2. 〈set〉요소 ... 224
12.3. 〈animateMotion〉요소 ... 226
12.4. 〈animateColor〉요소 ... 227
12.5. 〈animateTransform〉요소 ... 228
13 실습 예제 ... 231
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 관련 도구 ... 251
14.1. SVG Editor ... 253
14.2. 비트맵 파일에서 SVG 파일로 변환하기 ... 259
14.3. 일러스트레이터에서 SVG 출력 ... 263
더보기 닫기