### SVG의 기본 구조와 주요 요소들

SVG(Scalable Vector Graphics)는 XML 기반의 벡터 그래픽 포맷으로, 웹에서 확장 가능한 그래픽을 표현하는 데 사용됩니다. SVG는 크기를 변경해도 품질이 유지되며, 텍스트로 작성되기 때문에 코드로 직접 편집하거나 스타일링할 수 있는 장점이 있습니다. 아래는 SVG의 기본 구조와 주요 요소들을 예시와 함께 설명한 내용입니다.

#### SVG 기본 구조
SVG 파일은 `<svg>` 태그로 시작하며, 일반적으로 XML 선언과 함께 작성됩니다. 기본 구조는 다음과 같습니다:

```xml
<?xml version="1.0" encoding="UTF-8"?>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 그래픽 요소들이 여기 들어감 -->
</svg>
```

- `width`와 `height`: SVG 캔버스의 크기를 정의합니다.
- `xmlns`: SVG 네임스페이스를 지정하여 브라우저가 이를 SVG로 인식하게 합니다.

#### 주요 요소들
1. **`<svg>`**: 최상위 컨테이너로, 그래픽의 캔버스를 정의합니다.
   ```xml
   <svg width="100" height="100">
     <circle cx="50" cy="50" r="40" fill="red" />
   </svg>
   ```
   위 코드는 100x100 크기의 캔버스에 중심이 (50, 50)이고 반지름이 40인 빨간 원을 그립니다.

2. **`<g>`**: 요소들을 그룹화하여 스타일이나 변환을 일괄 적용할 때 사용합니다.
   ```xml
   <svg width="200" height="200">
     <g fill="blue">
       <rect x="10" y="10" width="50" height="50" />
       <circle cx="100" cy="100" r="30" />
     </g>
   </svg>
   ```
   `<g>` 안의 모든 도형에 `fill="blue"`가 적용됩니다.

3. **`<defs>`**: 재사용 가능한 정의(예: 패턴, 그라디언트)를 저장합니다. `<defs>` 안의 요소는 직접 렌더링되지 않습니다.
   ```xml
   <svg width="200" height="200">
     <defs>
       <linearGradient id="grad1">
         <stop offset="0%" stop-color="yellow" />
         <stop offset="100%" stop-color="green" />
       </linearGradient>
     </defs>
     <rect x="10" y="10" width="100" height="100" fill="url(#grad1)" />
   </svg>
   ```
   그라디언트를 정의하고 사각형에 적용했습니다.

4. **`<symbol>`**: 재사용 가능한 그래픽 템플릿을 정의합니다. `<defs>` 안에 사용되며, `<use>`로 호출됩니다.
   ```xml
   <svg width="200" height="200">
     <defs>
       <symbol id="star">
         <polygon points="50,10 60,40 90,40 65,60 75,90 50,70 25,90 35,60 10,40 40,40" />
       </symbol>
     </defs>
     <use href="#star" x="0" y="0" fill="gold" />
   </svg>
   ```
   별 모양을 정의하고 재사용합니다.

5. **`<use>`**: `<symbol>`이나 다른 요소를 참조하여 재사용합니다.
   ```xml
   <svg width="200" height="200">
     <defs>
       <rect id="box" x="0" y="0" width="50" height="50" />
     </defs>
     <use href="#box" x="10" y="10" fill="red" />
     <use href="#box" x="70" y="70" fill="blue" />
   </svg>
   ```
   동일한 사각형을 다른 위치와 색상으로 재사용합니다.

---

### 뷰박스(ViewBox)와 좌표 시스템

#### 뷰박스(ViewBox)
`viewBox` 속성은 SVG 캔버스의 보이는 영역과 좌표계를 정의합니다. 이는 "min-x, min-y, width, height" 형식으로 지정되며, 캔버스의 크기(`width`, `height`)와 독립적으로 내부 콘텐츠의 배율과 위치를 조정합니다.

```xml
<svg width="200" height="200" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="purple" />
</svg>
```
- `viewBox="0 0 100 100"`: 좌표계가 0,0에서 시작해 100x100 단위로 정의됨.
- 실제 캔버스는 200x200px이지만, `viewBox`에 맞춰 콘텐츠가 확대됩니다.

`viewBox`를 사용하면 확대/축소나 특정 영역 포커싱이 가능합니다:
```xml
<svg width="200" height="200" viewBox="25 25 50 50">
  <circle cx="50" cy="50" r="40" fill="purple" />
</svg>
```
위 예시는 원의 일부만 보이도록 50x50 영역을 확대합니다.

#### 좌표 시스템
SVG의 좌표계는 왼쪽 위가 (0,0)이며, x는 오른쪽으로, y는 아래로 증가합니다. 단위는 기본적으로 사용자 단위(user units)로, `viewBox`에 따라 상대적으로 해석됩니다.

---

### 기본 도형들

SVG는 다양한 기본 도형을 제공하며, 속성을 통해 크기, 위치, 스타일을 정의합니다.

1. **`<rect>`**: 사각형을 그립니다.
   - 속성: `x`, `y` (왼쪽 위 좌표), `width`, `height`, `rx`, `ry` (모서리 둥글기)
   ```xml
   <rect x="10" y="10" width="100" height="50" rx="10" fill="green" />
   ```

2. **`<circle>`**: 원을 그립니다.
   - 속성: `cx`, `cy` (중심 좌표), `r` (반지름)
   ```xml
   <circle cx="50" cy="50" r="30" fill="red" />
   ```

3. **`<ellipse>`**: 타원을 그립니다.
   - 속성: `cx`, `cy` (중심), `rx`, `ry` (가로/세로 반지름)
   ```xml
   <ellipse cx="100" cy="100" rx="50" ry="30" fill="blue" />
   ```

4. **`<line>`**: 직선을 그립니다.
   - 속성: `x1`, `y1` (시작점), `x2`, `y2` (끝점)
   ```xml
   <line x1="10" y1="10" x2="100" y2="100" stroke="black" stroke-width="2" />
   ```

5. **`<polyline>`**: 연속된 선분을 그립니다.
   - 속성: `points` (점들의 좌표 목록)
   ```xml
   <polyline points="10,10 50,50 100,20" stroke="orange" fill="none" stroke-width="2" />
   ```

6. **`<polygon>`**: 다각형을 그립니다. 마지막 점이 첫 점과 자동 연결됩니다.
   - 속성: `points`
   ```xml
   <polygon points="50,10 90,90 10,90" fill="yellow" stroke="black" />
   ```

---

### 결론
SVG는 `<svg>`를 기반으로 다양한 요소와 도형을 조합해 그래픽을 생성합니다. `viewBox`를 통해 유연한 크기 조정이 가능하고, 좌표계를 활용해 정밀한 위치 지정이 가능합니다. 위의 기본 도형과 요소들을 조합하면 간단한 아이콘부터 복잡한 일러스트까지 만들 수 있습니다. SVG의 강력함은 코드로 직접 제어할 수 있다는 점에 있으며, CSS나 JavaScript와 결합하면 동적이고 인터랙티브한 그래픽도 구현할 수 있습니다.