SVG 반응형으로 만들기

SVG 반응형으로 만드는 방법

 

화면의 크기가 달라져도 svg 요소의 크기는 고정되어 반응형에 취약한 모습을 보인다. 

그러나, viewBox 속성을 이용하면 화면에 크기에 따라 svg 요소의 크기가 자동으로 조절된다. 

 

 

 

viewBox 속성의 값은 다음과 같다.

viewBox="<min-x> <min-y> <width> <height>"

 

 

 

min-x 와 min-y 는 svg 가 그려지는 영역의 시작점, 왼쪽 상단의 꼭짓점으로, width와 height는 각각 영역 의 가로, 세로 길이로 볼 수 있다.

 

 

 

 

 

before

 

<svg
    width={375}
    height={224}
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    xmlnsXlink="http://www.w3.org/1999/xlink"
    {...props}
  >

 

가로, 세로가 375, 224 로 고정이 된다.

 

 

 

after

 

 <svg
    viewBox="0 0 375 224"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    xmlnsXlink="http://www.w3.org/1999/xlink"
    {...props}
  >

 

가로, 세로의 비율이 375, 224 로 고정하되, 반응형 웹에 따라 크기는 유동적으로 변한다.