html-examples/doc/svg/04_스타일링.md at 367484043c566496a0f24057309afbf7497dea28

Files

Elex db94e7ced9 2025-03-14T13:00:37

2025-03-14 13:00:37 +09:00

6.2 KiB

Raw Blame History

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

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

`fill`과 `stroke` 속성

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

stroke

도형의 외곽선을 그리는 색상을 지정합니다.
값: 색상, none(선 없음).

예시:

<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`

예시: 선 스타일링

<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단위 간격)으로 둥근 끝을 가진 선을 그립니다.

예시: 면 스타일링

<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 (그라디언트 방향).

<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 (반지름).

<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> 안에 도형을 정의하고, 크기와 반복 단위를 설정.

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

6.2 KiB Raw Blame History