SVG(Scalable Vector Graphics)란?
확장 가능한 마크업 언어(Extensible Markup Language; XML)로 작성된
벡터 기반의 그래픽 이미지 포맷
🙌 "svg" = 코드로 구성된 이미지
👉 장점
1) 코드로 수정이 가능하다. (컬러 등등을 바꿀 수 있다.)
2) 확대해도 깨지지 않는다.
3) 용량이 작다.
👉 문법
<svg width="100" height="100" viewBox="0 0 100 100">
...
</svg>❗️viewBox & viewPort
viewBox = "min-x", "min-y", "width", "height"
- 왼쪽 위를 기준점으로 한 좌표
min-x: viewBox의 x좌표
min-y: viewBox의 y좌표 - SVG의 영역 크기(뷰포트)를 설정
width: viewBox의 width
height: viewBox의 height
viewPort(뷰포트)
width와 height로 이미지의 보여질 영역을 정하는 것
(현재 화면에 보여지고 있는 영역)
viewBox(뷰박스)
SVG의 뷰포트를 설정할 때, 좌표 수치로 그 기준점을 정하는 것
(보여질 영역의 시작점 좌표)
⭐️ Tip!
- width 와 height 이 원래 크기보다 작다면 zoom, 크다면 zoom-out
좌표를 조절하여 이미지의 일부만 보이게 할 수 있다. - viewBox만 설정하고 width와 height 값을 주지 않은 상태는
기본값인 100% 수치를 받아 틀 안에서 꽉 찬 형태의 이미지가 그려진다.
Web Publisher