기본 도형 그리기

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>

스타일링과 애니메이션

<path> 요소는 CSS와 JavaScript를 통해 다양한 스타일링과 애니메이션을 적용할 수 있습니다. 예를 들어, 호버 효과, 애니메이션을 통한 경로 변경 등을 구현할 수 있습니다.

예제: 호버 시 색상 변경

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <style>
    .hoverable:hover {
      fill: orange;
      stroke: red;
    }
  </style>

  <path
    class="hoverable"
    d="M50 150 L150 150 L100 50 Z"
    fill="lime"
    stroke="green"
    stroke-width="2"
  />
</svg>