SVG의 veiwport와 viewbox

SVG란?

SVG(Scalable Vector Graphics, SVG)는 2차원 벡터(Vector) 그래픽을 표현하기 위한 XML 기반의 파일 형식이다.

 

SVG 파일의 장단점

장점

• 픽셀로 구성된 래스터(Raster) 파일과 달리, SVG는 벡터(Vector) 그래픽이기 때문에 크기를 조정해도 해상도를 유지한다.
• 비교적 많은 컬러 픽셀로 생성되는 래스터 이미지에 비해 용량이 작다.
• SVG 파일은 텍스트를 디자인이 아닌 텍스트 그대로 처리하기 때문에 스크린 리더가 SVG 이미지에 포함된 모든 단어를 스캔할 수 있다. 따라서 웹 페이지를 읽어야 할 때 유용하며 검색엔진은 SVG 이미지 텍스트를 읽고 색인을 달 수도 있다.

단점

• SVG 파일은 로고, 일러스트레이션, 차트 등 웹 그래픽에 적합하며, 픽셀이 부족해 고품질 디지털 사진을 표현하기에는 부적합하다. 이런 경우엔 JPEG 파일이 적합하다.
• 최신 브라우저만 SVG 이미지를 지원할 수 있으므로 Internet Explorer 8 같은 이전 브라우저에서는 SVG 파일을 사용하기가 어려울 수 있다.
• SVG 이미지에 포함된 코드는 SVG 파일 포맷을 처음 사용하는 경우 이해하기 힘들 수 있다.

 

viewport와 viewbox

viewport

뷰포트는 창문을 예로 들 수 있다. 바깥 세상을 창문의 크기 만큼만 볼 수 있는 것 처럼, 실제 그려진 그래픽을 뷰포트 크기 만큼만 보여준다.

뷰포트는 width, height 속성으로 설정한다.

 

viewbox

뷰포트와 비슷하지만 그래픽을 이동 및 확대를 할 수 있는 속성이다. 망원경, 현미경?을 예로 들 수 있을 것 같다. 뷰포트와 뷰박스, 둘 중에 하나가 더 작거나 크면 축소되거나 확대되어 보일 수 있다.

viewBox는 좌표 및 가로, 세로 비율을 결정하며 속성은 min-x, min-y, width, height 이렇게 4가지이다.

 

 

직접 여러 경우를 구현해보면서 어떻게 보이는지 확인해보았다.

viewport만 지정한 경우

<svg width='100' height='100'>
  <circle cx='50'cy='50'r='50' />
</svg>

 

viewport와 viewbox가 동일한 경우

<svg width='100' height='100' viewBox='0 0 100 100'>
  <circle cx='50' cy='50' r='50' />
</svg>

 

viewport와 viewbox가 동일하지면 요소 위치(좌표)가 달라진 경우

<svg width='100' height='100' viewBox='0 0 100 100'>
  <circle cx='100' cy='100' r='50' />
</svg>

 

viewport를 viewbox와 비율은 같지만 1/2 크기로 지정한 경우

<svg width='50' height='50' viewBox='0 0 100 100'>
  <circle cx='100' cy='100' r='50' />
</svg>

 

viewport와 viewbox의 비율이 다른 경우

<svg width='100' height='200' viewBox='0 0 100 100'>
  <circle cx='50' cy='50' r='50' />
</svg>

 

preserveAspectRatio=none 를 추가한 경우

<svg width='100' height='200' viewBox='0 0 100 100' preserveAspectRatio='none'>
  <circle cx='50' cy='50' r='50' />
</svg>

 

viewport를 지정하지 않은 경우

<svg viewBox='0 0 100 100'>
  <circle cx='50' cy='50' r='50' />
</svg>

 

 

---

References

회사 동료가 잘 작성해둔 글이 있어서 동의를 얻은 다음 퍼왔습니다. (thanks. @woohyemin in github)

SVG: Scalable Vector Graphics | MDN

 

SVG Viewport and viewBox (For Complete Beginners) | Envato Tuts+

 

개발자를 위한 svg 크기 변경하기

 

SVG 뷰포트(viewport)와 뷰박스(viewBox) - Puterism