SVG / viewBox, viewPort

liim·2023년 2월 27일
0

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% 수치를 받아 틀 안에서 꽉 찬 형태의 이미지가 그려진다.
profile
Web Publisher

0개의 댓글