128 lines
6.2 KiB
Markdown
128 lines
6.2 KiB
Markdown
### 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와 결합하거나 애니메이션을 추가하면 더욱 역동적인 결과물을 만들 수 있습니다. |