기본 도형 그리기
3. 기본 도형 그리기
SVG는 다양 한 기본 도형을 제공하여 복잡한 그래픽을 손쉽게 구성할 수 있도록 도와줍니다. 이 섹션에서는 SVG에서 제공하는 주요 기본 도형 요소와 그 속성들에 대해 자세히 알아보겠습니다. 각 도형에 대한 설명과 함께 예제 코드를 통해 직접 확인해 보세요.
3.1 선 (Line)
<line>
요소와 속성
<line>
요소는 두 점을 연결하는 직선을 그립니다. 주로 선의 시작점과 끝점을 지정하는 x1
, y1
, x2
, y2
속성을 사용합니다.
-
주요 속성
x1
,y1
: 선의 시작점 좌표x2
,y2
: 선의 끝점 좌표stroke
: 선의 색상stroke-width
: 선의 두께
-
예제
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<line x1="10" y1="10" x2="190" y2="90" stroke="black" stroke-width="2" />
</svg>
3.2 직사각형 (Rectangle)
<rect>
요소와 속성
<rect>
요소는 직사각형을 그리는 데 사용됩니다. 위치와 크기, 모서리의 둥글기 등을 지정할 수 있습니다.
-
주요 속성
x
,y
: 직사각형의 좌상단 모서리 좌표width
,height
: 직사각형의 너비와 높이rx
,ry
: 모서리의 둥글기 반경 (선택 사항)fill
: 채우기 색상stroke
: 테두리 색상stroke-width
: 테두리 두께
-
예제
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<!-- 기본 직사각형 -->
<rect
x="10"
y="10"
width="180"
height="80"
fill="lightblue"
stroke="blue"
stroke-width="2"
/>
<!-- 둥근 모서리를 가진 직사각형 -->
<rect x="50" y="30" width="100" height="40" rx="10" ry="10" fill="pink" />
</svg>
3.3 원 (Circle)
<circle>
요소와 속성
<circle>
요 소는 원을 그리는 데 사용됩니다. 중심점과 반지름을 지정하여 원을 정의합니다. 간단한 원부터 복잡한 디자인까지 다양한 그래픽을 구현할 수 있습니다.
-
주요 속성
cx
,cy
: 원의 중심 좌표r
: 원의 반지름fill
: 채우기 색상stroke
: 테두리 색상stroke-width
: 테두리 두께
-
예제
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<circle
cx="50"
cy="50"
r="40"
fill="green"
stroke="darkgreen"
stroke-width="2"
/>
</svg>
원을 활용한 패턴 만들기
여러 개의 <circle>
요소를 조합하여 패턴이나 복잡한 그래픽을 만들 수 있습니다. 원의 반복 배치를 통해 다양한 디자인을 구현할 수 있습니다.
- 예제: 원을 이용한 꽃 모양 패턴(사실 꽃 모양 같진 않아요ㅎㅎ)
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle
cx="100"
cy="100"
r="30"
fill="yellow"
stroke="orange"
stroke-width="2"
/>
<circle cx="100" cy="50" r="20" fill="red" />
<circle cx="150" cy="100" r="20" fill="red" />
<circle cx="100" cy="150" r="20" fill="red" />
<circle cx="50" cy="100" r="20" fill="red" />
</svg>
3.4 타원 (Ellipse)
<ellipse>
요소와 속성
<ellipse>
요소는 타원을 그리는 데 사용됩니다. 타원은 중심점과 x축, y축 반지름을 지정하여 정의됩니다. 직사각형과 원의 중간 형태로, 다양한 비율과 크기로 그래픽을 표현할 수 있습니다.
-
주요 속성
cx
,cy
: 타원의 중심 좌표rx
,ry
: x축과 y축 반지름fill
: 채우기 색상stroke
: 테두리 색상stroke-width
: 테두리 두께opacity
: 투명도transform
: 변형 (회전, 이동, 스케일링 등)
-
예제
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
<!-- 기본 타원 -->
<ellipse
cx="150"
cy="75"
rx="100"
ry="50"
fill="lightblue"
stroke="blue"
stroke-width="2"
/>
<!-- 큰 타원 -->
<ellipse
cx="150"
cy="75"
rx="60"
ry="30"
fill="green"
stroke="darkgreen"
stroke-width="3"
/>
<!-- 작은 타원 -->
<ellipse cx="150" cy="75" rx="30" ry="15" fill="orange" />
</svg>
타원의 회전과 변형
<ellipse>
요소는 transform 속성을 사용하여 회전, 이동, 스케일링 등의 변형을 적용할 수 있습니다. 이를 통해 타원을 다양한 각도와 형태로 변형시킬 수 있습니다.
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- 회전되지 않은 타원 -->
<ellipse cx="100" cy="100" rx="60" ry="30" fill="blue" />
<!-- 45도 회전된 타원 -->
<ellipse
cx="100"
cy="100"
rx="60"
ry="30"
fill="none"
stroke="red"
stroke-width="2"
transform="rotate(45 100 100)"
/>
</svg>
3.5 다각형과 폴리라인 (Polygon & Polyline)
<polygon>
요소와 속성
<polygon>
요소는 닫힌 다각형을 그리는 데 사용됩니다. 여러 점을 연결하여 다각형을 형성하며, 시작점과 끝점이 자동으로 연결됩니다. 삼각형, 사각형, 오각형 등 다양한 다각형을 손쉽게 그릴 수 있습니다.
-
주요 속성
points
: 다각형을 이루는 점들의 좌표 목록을 지정합니다. 각 점은x,y
형식으로 입력하며, 공백이나 쉼표로 구분됩니다.fill
: 다각형 내부를 채우는 색상입니다.stroke
: 다각형의 테두리 색상입니다.stroke-width
: 테두리의 두께를 지정합니다.
-
예제
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- 삼각형 -->
<polygon
points="100,10 40,198 190,78 10,78 160,198"
fill="lime"
stroke="purple"
stroke-width="2"
/>
</svg>
<polygon>
과 <polyline>
의 차이점
SVG에서 <polygon>
과 <polyline>
요소는 모두 여러 점을 연결하여 도형을 그리는 데 사용되지만, 그 목적과 동작 방식에서 몇 가지 중요한 차이점이 있습니다. 아래 표를 통해 두 요소의 주요 차이점을 비교해 보겠습니다.
속성 | <polygon> | <polyline> |
---|---|---|
닫힘 여부 | 자동으로 시작점과 끝점이 연결되어 닫힌 도형을 형성 | 끝점이 자동으로 시작점과 연결되지 않아 열린 도형을 형성 |
사용 목적 | 삼각형, 사각형 등 닫힌 다각형을 그릴 때 사용 | 지그재그 선, 자유곡선 등 열린 선을 그릴 때 사용 |
기본 fill 값 | 기본적으로 내부가 채워짐 (fill 속성에 지정된 색상) | 기본적으로 내부가 채워지지 않음 (fill="none" ) |
예제 사용 사례 | 별, 다각형 아이콘, 닫힌 그래픽 요소 | 꺾인 선, 경로 표시, 열린 선형 그래픽 요소 |
상세 설명
-
닫힘 여부
<polygon>
은 정의된 마지막 점이 자동으로 시작점과 연결되어 닫힌 도형을 만듭니다. 이는 삼각형, 사각형, 오각형 등과 같은 완전한 다각형을 그릴 때 유용합니다.<polyline>
은 시작점과 끝점이 자동으로 연결되지 않아 열린 도형을 만듭니다. 이는 지그재그 선, 자유곡선, 경로 표시 등에 적합합니다.
-
사용 목적
<polygon>
은 내부가 채워진 도형을 만들기 위해 사용됩니다. 예를 들어, 별 모양의 아 이콘이나 다양한 다각형을 그릴 때 적합합니다.<polyline>
은 단순히 선을 연결하는 데 사용되며, 내부를 채우지 않은 상태로 선만 표시됩니다. 꺾인 선이나 자유로운 곡선을 그릴 때 유용합니다.
-
기본
fill
값<polygon>
의 경우, 기본적으로 내부가 채워지기 때문에fill
속성을 통해 색상을 지정할 수 있습니다.<polyline>
의 경우, 기본적으로fill="none"
으로 설정되어 내부가 채워지지 않습니다. 따라서 선만 표시됩니다.
예제 비교
<polygon>
예제: 별 모양 그리기<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<polygon
points="100,10 40,198 190,78 10,78 160,198"
fill="lime"
stroke="purple"
stroke-width="2"
/>
</svg>
3.6 경로 (Path)
<path>
요소와 d
속성
<path>
요소는 SVG에서 가장 유연하고 강력한 도형 그리기 도구로, 직선, 곡선, 호 등 다양한 형태의 경로를 그릴 수 있습니다. 복잡한 도형이나 자유로운 형태의 그래픽을 구현할 때 주로 사용됩니다.
- 주요 속성
d
: 경로의 명령어와 좌표를 정의하는 문자열fill
: 채우기 색상stroke
: 테두리 색상stroke-width
: 테두리 두께
d
속성의 경로 명령어
d
속성은 여러 가지 명령어와 좌표를 조합하여 경로를 정의합니다. 주요 명령어는 다음과 같습니다.
-
M (moveto): 경로의 시작점을 이동합니다. 대문자 M은 절대 좌표, 소문자 m은 상대 좌표를 사용합니다.
- 예:
M10 10
은 (10,10)으로 이동
- 예:
-
L (lineto): 현재 위치에서 지정한 좌표로 직선을 그립니다. 대문자 L은 절대 좌표, 소문자 l은 상대 좌표를 사용합니다.
- 예:
L100 100
은 (100,100)까지 직선을 그립니다.
- 예:
-
H (horizontal lineto): 수평 방향으로 직선을 그립니다. 대문자 H은 절대 좌표, 소문자 h은 상대 좌표를 사용합니다.
- 예:
H150
은 x=150 위치로 수평선을 그립니다.
- 예:
-
V (vertical lineto): 수직 방향으로 직선을 그립니다. 대문자 V은 절대 좌표, 소문자 v은 상대 좌표를 사용합니다.
- 예:
V150
은 y=150 위치로 수직선을 그립니다.
- 예:
-
C (curveto): 3차 베지어 곡선을 그립니다. 대문자 C는 절대 좌표, 소문자 c은 상대 좌표를 사용합니다. 세 개의 좌표가 필요합니다: 두 개의 제어점과 끝점.
- 예:
C100 100, 150 150, 200 100
은 (100,100), (150,150) 제어점을 거쳐 (200,100)으로 끝나는 곡선을 그립니다.
- 예:
-
Q (quadratic Bézier curve): 2차 베지어 곡선을 그립니다. 대문자 Q는 절대 좌표, 소문자 q은 상대 좌표를 사용합니다. 한 개의 제어점과 끝점이 필요합니다.
- 예:
Q150 150, 200 100
은 (150,150) 제어점을 거쳐 (200,100)으로 끝나는 곡선을 그립니다.
- 예:
-
A (elliptical arc): 타원 호를 그립니다. 대문자 A는 절대 좌표, 소문자 a은 상대 좌표를 사용합니다. 다음 7개의 매개변수가 필요합니다: rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y.
- 예:
A50 50 0 1 1 100 100
은 반지름 50의 타원 호를 그립니다.
- 예:
-
Z (closepath): 현재 경로를 닫고 시작점으로 돌아갑니다.
- 예:
Z
는 현재 경로를 닫습니다.
- 예:
예제
삼각형 그리기
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<path
d="M50 150 L150 150 L100 50 Z"
fill="lime"
stroke="green"
stroke-width="2"
/>
</svg>
곡선을 포함한 경로
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<path
d="M10 10 C 20 100, 200 100, 200 10"
fill="none"
stroke="blue"
stroke-width="2"
/>
</svg>
호 그리기
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<path
d="M50 100 A50 50 0 0 1 150 100"
fill="none"
stroke="red"
stroke-width="2"
/>
</svg>
<path>
요소를 활용한 복잡한 도형
예제: 별 모양 그리기
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<path
d="M100 10 L120 80 L190 80 L130 120 L160 190 L100 150 L40 190 L70 120 L10 80 L80 80 Z"
fill="gold"
stroke="black"
stroke-width="2"
/>
</svg>