SVG 기본 도형 그리기

기본적인 도형은 HTML 요소와 CSS를 사용해 그릴 수 있지만, 모양이 복잡해질 수록 어려워집니다. 물론 복잡한 그래픽은 Adobe Illustrator와 같은 벡터 소프트웨어를 사용하여 그려야 합니다만, 간단한 도형을 그려봄으로 SVG 코드 작성에 대한 기본 학습을 진행해 봅니다.

SVG는 직사각형(rect), 원(circle), 타원(ellipse), 직선(line), 폴리 라인(polyline), 다각형(polygon)과 같은 기본 모양을 그릴 수 있는 요소 세트를 제공합니다. 각 요소는 좌표 위치(x, y), 크기(width, height) 등 속성을 설정할 수 있습니다.

사각형(rectangle)

<rect> 요소는 사각형을 그립니다. 너비(width), 높이(height), 색상(fill) 등을 속성으로 설정할 수 있습니다.

<svg>
  <rect width="480" height="240" fill="#3d87fb" />
</svg>

width, height, fill 속성 설정으로 그려진 SVG 사각형

fill 속성을 설정하지 않을 경우, 기본 색상은 검정색(black)으로 설정됩니다.

뷰포트 내부 특정 지점으로 위치(x, y) 이동 할 수도 있습니다.

<svg>
  <rect width="480" height="240" fill="#3d87fb" x="20" y="40" />
</svg>

둥근 테두리(rx, ry) 속성을 설정하면 테두리가 둥글게 돌려진 사각형을 그릴 수 있습니다.

<svg>
  <rect width="480" height="240" fill="#3d87fb" x="20" y="40" rx="20" ry="20" />
</svg>

rx, ry 속성 설정으로 그려진 SVG 사각형

원(circle)

<circle> 요소는 원을 그립니다. 원의 중심(rx, ry), 반지름(r), 색상(fill) 등을 속성으로 설정할 수 있습니다.

<svg>
  <circle cx="200" cy="200" r="50" fill="#3e295e" />
</svg>

rx, ry, r 속성 설정으로 그려진 SVG 원

테두리 색상(stroke), 테두리 두께(stroke-width) 속성을 설정하면 테두리를 그릴 수 있습니다.

<svg>
  <circle 
    cx="200" cy="200" r="50" 
    fill="none" stroke="#f9b10a" stroke-width="14" />
</svg>

stroke, stroke-width 속성 설정으로 그려진 SVG 원

타원(Ellipse)

<ellipse> 요소는 타원을 그립니다. 타원을 그리기 위한 반지름(rx, ry) 속성을 설정할 수 있습니다.

<svg>
  <ellipse 
    cx="200" cy="200" rx="50" ry="100"
    fill="#dd3742" stroke="#b13138" stroke-width="8" />
</svg>

rx, ry 속성 설정으로 그려진 SVG 타원

직선(Line)

<line> 요소는 직선을 그립니다. 선의 시작점(x1, y1)과 끝점(x2, y2) 속성을 설정할 수 있습니다.

<svg>
  <line x1="440" y1="40" x2="120" y2="200" stroke-width="5" stroke="#26b2a2" />
</svg>

x1, y1, x2, y2 속성 설정으로 그려진 SVG 선

폴리라인(Polyline)

<polyline> 요소는 2개 이상의 점들이 직선으로 연결된 도형 그립니다. 각 점들의 위치(points) 속성을 설정할 수 있습니다. 각 점은(x,y) 공백으로 구분됩니다. 예) x1,y1 x2,y2 x3,y3

<svg>
  <polyline
    points="0,0 40,40 40,80 80,80 80,120 120,120 160,160" 
    fill="none" stroke="#b38fac" stroke-width="6" />
</svg>

points 속성 설정으로 그려진 SVG 폴리라인

다각형(Polygon)

<polygon> 요소는 3개 이상의 점들이 연결된 다각형을 그립니다.

<svg>
  <polygon 
    points="50,5 100,5 125,30 125,80 100,105 50,105 25,80 25,30" 
    fill="#4b6eec" />
</svg>

points 속성으로 그려진 SVG 다각형