### SVG의 스타일링과 시각적 효과

SVG는 벡터 그래픽을 표현하는 강력한 도구로, 다양한 스타일링 속성과 시각적 효과를 통해 모양을 꾸밀 수 있습니다. CSS와 유사한 속성(`fill`, `stroke` 등)을 사용하거나, `<style>` 태그와 결합해 스타일을 적용할 수 있으며, 그라디언트와 패턴 같은 고급 효과도 지원합니다. 아래에서는 주요 스타일링 속성과 시각적 효과를 자세히 설명합니다.

---

### `fill`과 `stroke` 속성

1. **`fill`**  
   - 도형의 내부를 채우는 색상이나 패턴을 지정합니다.
   - 값: 색상(`red`, `#ff0000`), 그라디언트(`url(#gradient)`), `none`(채우기 없음).
   - 예시:
     ```xml
     <svg width="200" height="200">
       <rect x="10" y="10" width="100" height="100" fill="blue" />
     </svg>
     ```

2. **`stroke`**  
   - 도형의 외곽선을 그리는 색상을 지정합니다.
   - 값: 색상, `none`(선 없음).
   - 예시:
     ```xml
     <svg width="200" height="200">
       <circle cx="100" cy="100" r="50" stroke="black" fill="none" />
     </svg>
     ```

이 두 속성은 SVG 스타일링의 기본이며, 추가 속성으로 세부 스타일을 조정할 수 있습니다.

---

### 선과 면 스타일링 속성 정리

아래는 `fill`과 `stroke`를 보완하는 주요 스타일링 속성들입니다.

| 속성                 | 설명                                                                                   | 예시 값                 |
|---------------------|---------------------------------------------------------------------------------------|-------------------------|
| `fill-opacity`      | 채우기 투명도(0~1).                                                                    | `0.5`                  |
| `stroke-width`      | 선의 두께(단위: 사용자 단위 또는 px).                                                   | `2`                    |
| `stroke-opacity`    | 선의 투명도(0~1).                                                                      | `0.7`                  |
| `stroke-linecap`    | 선 끝의 모양.                                                                          | `butt`, `round`, `square` |
| `stroke-linejoin`   | 선이 꺾이는 부분의 모양(모서리 처리).                                                   | `miter`, `round`, `bevel` |
| `stroke-dasharray`  | 점선 패턴(선과 간격의 길이).                                                          | `5,5` (5단위 선, 5단위 간격) |
| `stroke-dashoffset` | 점선 패턴의 시작 오프셋.                                                               | `10`                   |
| `fill-rule`         | 복잡한 경로에서 채우기 영역 결정 규칙.                                                  | `nonzero`, `evenodd`   |

#### 예시: 선 스타일링
```xml
<svg width="200" height="200">
  <path d="M20 20 L100 100" stroke="black" stroke-width="4" stroke-linecap="round" stroke-dasharray="10,5" />
</svg>
```
- 점선(10단위 선, 5단위 간격)으로 둥근 끝을 가진 선을 그립니다.

#### 예시: 면 스타일링
```xml
<svg width="200" height="200">
  <polygon points="50,50 150,50 100,150" fill="green" fill-opacity="0.8" stroke="black" stroke-width="2" />
</svg>
```
- 반투명한 녹색 삼각형에 검은색 테두리를 적용.

---

### 그라디언트와 패턴

SVG는 단순 색상 외에도 그라디언트와 패턴을 사용해 더 풍부한 시각적 효과를 제공합니다. 이들은 `<defs>` 안에 정의되고, `fill`이나 `stroke`에서 참조됩니다.

#### 1. **`linearGradient` (선형 그라디언트)**
- 색상이 직선 방향으로 점진적으로 변하는 효과.
- 주요 요소: `<stop>` 태그로 색상 전환 지점을 정의.
- 속성: `x1`, `y1`, `x2`, `y2` (그라디언트 방향).
```xml
<svg width="200" height="200">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="yellow" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="180" height="180" fill="url(#grad1)" />
</svg>
```
- 좌에서 우로 노랑에서 빨강으로 변하는 사각형.

#### 2. **`radialGradient` (방사형 그라디언트)**
- 색상이 중심에서 바깥으로 방사형으로 변하는 효과.
- 속성: `cx`, `cy` (중심), `r` (반지름).
```xml
<svg width="200" height="200">
  <defs>
    <radialGradient id="grad2" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="white" />
      <stop offset="100%" stop-color="blue" />
    </radialGradient>
  </defs>
  <circle cx="100" cy="100" r="80" fill="url(#grad2)" />
</svg>
```
- 중심이 흰색이고 가장자리가 파란색인 원.

#### 3. **`pattern` (패턴)**
- 반복되는 그래픽 요소로 면을 채움.
- `<pattern>` 안에 도형을 정의하고, 크기와 반복 단위를 설정.
```xml
<svg width="200" height="200">
  <defs>
    <pattern id="pat1" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="5" fill="orange" />
    </pattern>
  </defs>
  <rect x="10" y="10" width="180" height="180" fill="url(#pat1)" />
</svg>
```
- 20x20 단위로 주황색 원이 반복되는 패턴으로 사각형을 채움.

---

### 실무 활용 팁
- **CSS와 결합**: SVG 스타일링은 CSS로도 가능합니다. 예: `<style>.shape { fill: red; stroke: blue; }</style>`를 사용해 클래스 단위로 관리.
- **애니메이션**: `stroke-dasharray`와 `stroke-dashoffset`을 조합하면 선 애니메이션(예: 그리기 효과)을 만들 수 있습니다.
- **복잡한 디자인**: 그라디언트와 패턴은 로고, 배경, 아이콘 등에서 고급스러운 효과를 줄 때 유용합니다.

---

### 결론
SVG의 스타일링은 `fill`과 `stroke`로 시작해 다양한 선과 면 속성으로 세밀하게 조정할 수 있으며, `linearGradient`, `radialGradient`, `pattern`을 통해 시각적으로 풍부한 표현이 가능합니다. 이러한 속성들은 웹 디자인, 데이터 시각화, 인터랙티브 그래픽 등에서 활용도가 높아, SVG를 단순한 도형 이상의 강력한 도구로 만듭니다. CSS와 결합하거나 애니메이션을 추가하면 더욱 역동적인 결과물을 만들 수 있습니다.