🔍 SVG 란 ?
확장 가능한 벡터 그래픽 (Scalable Vector Graphics) 라고 한다.
원래는 HTML 에서 이미지를 사용할때 img 태그를 이용해서 url 을 붙여넣어서 첨부했는데,
일반 jpg 파일이나 png 파일은 픽셀이기때문에 화면이 확대 되거나 축소되면 깨질 수가 있다.
하지만 svg 는 픽셀을 이용하는 형식이기 때문에 화면이 확대되거나 축소되어도 화질이 깨지지 않는다는 장점이 있다. (scalable)
또한 모양이 많이 복잡하지 않은 경우 용량이 그렇게 크지 않고 CSS 와 자바스크립트로 조작이 가능하다 .
DOM 의 일부로써 각 객체별로 HTML 요소들에 추가가 된다 .
🔍 SVG 를 이용하여 행맨 그려보기
<svg height ="250" width = "200" class="figure-container">
<!-- 이 안에 선이나 동그라미 등 그려주고싶은 요소를 적어주면 됨-->
</svg>SVG 태그 내에서 그림을 그릴 컨테이너 (도화지) 크기를 설정을 해준다.
<svg height ="250" width = "200" class="figure-container">
<!-- Rod -->
<line x1 ="60" y1="20" x2="140" y2="20"></line>
<line x1 ="140" y1="20" x2="140" y2="50"></line>
<line x1 ="60" y1="20" x2="60" y2="230"></line>
<line x1 ="20" y1="230" x2="100" y2="230"></line>
<!-- Head-->
<circle cx ="140" cy ="70" r ="20" class="figure-part" />
<!-- Body-->
<line x1="140" y1 ="90" x2 ="140" y2 ="150" class="figure-part" />
<!-- Arms-->
<line x1 ="140" y1 ="120" x2 ="160" y2 ="100" class="figure-part" />
<line x1 ="140" y1 ="120" x2 ="120" y2 ="100" class="figure-part" />
<!-- Legs-->
<line x1 ="140" y1 ="150" x2 ="120" y2 ="180" class="figure-part" />
<line x1 ="140" y1 ="150" x2 ="160" y2 ="180" class="figure-part" />
</svg>🔍 line 에서 x1과 y1, x2 와 y2 의 속성
line 속성은 svg 태그 내에서 단순한 선을 긋겠다는 의미이고,
x1(x축에서 시작점) 부터 x2 (x축이 끝나는 지점) 까지 선을 긋는 길이와 방향을 말한다.
예를 들어서
<line x1 ="60" y1="0" x2="140" y2="0"></line>이렇게 적었다면 저 컨테이너(도화지) 기준으로 60 떨어진 곳에서 부터 x축이 시작되어 140 까지 가로 선을 긋겠다는 의미이다.
세로 축도 마찬가지로 y1(y축에서 시작점) 부터 y2(y축이 끝나는 지점) 까지 선을 긋는 세로축의 길이를 말한다.
<line x1 ="60" y1="20" x2="140" y2="40"></line>여기서 y 축의 의미는 세로축이 시작하는 y1은 x1축을 밑으로 20 을 보내고, y2는 x2가 끝나는 지점에서 밑으로 40만큼 보낸다는 의미이다.
🔍 circle 태그로 원 그리기
<circle cx ="140" cy ="70" r ="20" class="figure-part" />circle 태그를 이용하면 원을 그릴 수 있는데, cx 는 원이 시작될 x축 기준점, cy 는 y축 기준점, radius 는 반지름을 나타낸다.
행맨 그림이 완성 되었다 !
