Jun 개발노트

viewBox? PreserveAspectRatio?

2021-10-20

0. 작성 이유

  • 회사에서 svg를 활용하여 차트를 만드는 업무를 맡았는데 새로운 영역이다..
  • 평소에 svg에 관심이 많았다???
  • 사진을 활용해서 더 빠르게 이해하고 정리해야지 남는다.

1. SVG(Scalable Vector Graphics)는 무엇인가?

그래픽 정보를 가지고 있는 HTML Tag

  • 그래픽을 마크업하기 위한 W3C XML 특수언어
  • 화면 크기에 따라 언제나 같은 같은 해상도를 보여준다(캔버스 x)
  • 각 도형별로(태그로 구성되어 있기 때문에) 인터렉션(이벤트)을 줄 수 있다.
  • 예제 (두개의 사각형)
    • canvas의 경우, 하나의 context안에서 그림(script 상에서만 가능)
    • svg의 경우, tag를 통해서 그린다(script와 css 또한 가능)
    • 화면을 확대할 경우, 더 선명한 이미지를 표시한다(svg)
      • 확대 전 - 확실히 구분은 안됨

        scalein.png

      • 확대 후 - 확대 후 svg가 선명한 것을 확인 할 수 있음

        scaleout.png

2. 제일 중요한 ViewBox에 대해서

모눈종이(svg)를 어디부터(x, y) 얼만큼(width, height) 보여줄까?

  • svg속성에는 viewPort(width, height), viewbox의 속성이 있다.
  • 뷰포트 - 화면에 그려지는 크기(일반적인 태그 속성)
  • viewBox(min-x, min-y, width, height) - svg가 보여질 부분

viewbox.png

3. PreserveAspectRatio?(가로/세로 크기를 내 맘대로!)

뷰포트와 뷰박스의 크기가 다르면, 어떻게 정렬하고 어떻게 보여줄까(꽉차게? 넘치는 부분은 잘라서?)

  • viewport(width, height), viewBox의 속성이 있는 SVG element (svg, image...)

  • PreserveAspectRatio의 속성값은 align , meetOrSlice 으로 구성 (default - 'xMidYMid meet')

  • svg 이미지 사이즈(가로/세로)는 비율로 나오는데, 직접적으로 조정하고 싶을때는 'none'으로 지정

    <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40" width="50" height="30">&Smile;</svg>
    
    <image preserveAspectRatio='xMinYMin meet' width='200' height='300' xlink:href='https://www.google.com/images/logos/google_logo_41.png' ></image>
    

    https://www.w3.org/TR/SVG11/images/coords/PreserveAspectRatio.png

참고자료