HTML 에서 SVG로 기본 도형 그리기 정리

SVG란 확장 가능한 벡터 그래픽(Scalable Vector Graphics)이라고 한다.

HTML 에서 벡터 기반 그래픽을 그리기 위해서 도입된 XML 기반 웹 기술이다.

아무리 확대하더라도 화질이 깨지지 않는 장점이 있다.

svg 태그는 svg 속성의 최상위 요소이고 그 안에 rect(사각형), circle(원), ellipse(타원), line(선) 을 삽입해서 기본적인 도형들을 그릴 수 있다.

도형을 그리기 위해서는 CSS 에서 fill, stroke, stroke-width 요소들을 설정해주어야한다.

fill : 배경색을 칠함
stroke : 테두리색을 결정
storke-width : 테두리의 너비

🔍 SVG 로 행맨 그려보기

<svg width="200" height="250" class="figure-container">
                <line x1="40" x2="120"></line>
                <line x1='120' x2="120" y1="0" y2="40"></line>
                <line x1="40" x2='40' y1="0" y2="240"></line>
                <line x1="0" x2='80' y1="240" y2="240"></line>
                <circle cx="120" cy="60" r="20" class="figure-part"></circle >
                <line x1="120" x2='120' y1="80" y2="130" class="figure-part"></line>
                <line x1="120" x2="100" y1="80" y2="120" class="figure-part"></line>
                <line x1="120" x2="140" y1="80" y2="120" class="figure-part"></line>
                <line x1="120" x2="100" y1="130" y2="170" class="figure-part"></line>
                <line x1="120" x2="140" y1="130" y2="170" class="figure-part"></line>
            </svg>

<style>
  .figure-container{
    fill: transparent;
    stroke: #fff;
    stroke-width: 4px;
    stroke-linecap: round;
}
<style/>

x1은 x축에서 시작점, x2는 x1 에서 어디까지 선을 이어갈지 끝의 위치를 정한다.

y1은 마찬가지로 y축에서 시작점, y2는 y1에서 어디까지 선을 이어갈지 끝의 위치를 정한다.