html-examples/doc/svg/02_SVG의 기본 구조와 핵심 요소.md at 367484043c566496a0f24057309afbf7497dea28

Files

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

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

6.0 KiB

Raw Blame History

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

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

SVG 기본 구조

SVG 파일은 <svg> 태그로 시작하며, 일반적으로 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로 인식하게 합니다.

주요 요소들

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

<g>: 요소들을 그룹화하여 스타일이나 변환을 일괄 적용할 때 사용합니다.

<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"가 적용됩니다.

<defs>: 재사용 가능한 정의(예: 패턴, 그라디언트)를 저장합니다. <defs> 안의 요소는 직접 렌더링되지 않습니다.

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

그라디언트를 정의하고 사각형에 적용했습니다.

<symbol>: 재사용 가능한 그래픽 템플릿을 정의합니다. <defs> 안에 사용되며, <use>로 호출됩니다.

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

별 모양을 정의하고 재사용합니다.

<use>: <symbol>이나 다른 요소를 참조하여 재사용합니다.

<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)와 독립적으로 내부 콘텐츠의 배율과 위치를 조정합니다.

<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를 사용하면 확대/축소나 특정 영역 포커싱이 가능합니다:

<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는 다양한 기본 도형을 제공하며, 속성을 통해 크기, 위치, 스타일을 정의합니다.

<rect>: 사각형을 그립니다.
- 속성: x, y (왼쪽 위 좌표), width, height, rx, ry (모서리 둥글기)
```
<rect x="10" y="10" width="100" height="50" rx="10" fill="green" />
```
<circle>: 원을 그립니다.
- 속성: cx, cy (중심 좌표), r (반지름)
```
<circle cx="50" cy="50" r="30" fill="red" />
```
<ellipse>: 타원을 그립니다.
- 속성: cx, cy (중심), rx, ry (가로/세로 반지름)
```
<ellipse cx="100" cy="100" rx="50" ry="30" fill="blue" />
```

<line>: 직선을 그립니다.

속성: x1, y1 (시작점), x2, y2 (끝점)

<line x1="10" y1="10" x2="100" y2="100" stroke="black" stroke-width="2" />

<polyline>: 연속된 선분을 그립니다.

속성: points (점들의 좌표 목록)

<polyline points="10,10 50,50 100,20" stroke="orange" fill="none" stroke-width="2" />

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

결론

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

6.0 KiB Raw Blame History