[FeBase S3] SVG, Canvas, viewport와 viewbox

이번 포스팅에서는 SVG와 Canvas, viewport 그리고 viewbox에 대한 개념을 간단하게 정리해 보려고 한다.

1. SVG란?

바로 찾아볼 수 있는 레퍼런스 중 가장 공신력 있다고 판단되는 Mozilla Developer Network(MDN)에서 SVG에 대해서 다음과 같이 설명하고 있다.

SVG(Scalable Vector Graphics)는 2차원 벡터 그래픽을 서술하는 XML 기반의 마크업 언어입니다. SVG는 텍스트 기반의 열린 웹 표준 중 하나로, 모든 사이즈에서 깔끔하게 렌더링되는 이미지를 서술하며 CSS, DOM, JavaScript, SMIL 등 다른 웹 표준과도 잘 동작하도록 설계되었습니다. SVG는 달리 말하면 HTML과 텍스트의 관계를 그래픽에 적용한 것입니다.

SVG는 말 그대로 그래픽을 그릴 수 있는 마크업 언어이다. 예를 들어 이런 형태의 로고가 있다고 하면

이 파일을 svg 형태로 다운로드 받아서 브라우저에서 볼 경우 다음과 같이 Element가 나타남을 볼 수 있다.

너무 복잡해서 코드로 옮기지는 않음

이와 같은 XML 텍스트 파일 형태로 저장이 되기 때문에 일러스트레이터 같은 그래픽 도구로도 편집이 가능하며, 벡터 이미지라서 손실이나 품질 저하 없이 모든 크기에서 렌더링이 가능하다.

간단하게 SVG로 도형을 HTML에서 만들어 보자.

2. SVG와 Canvas

SVG와 마찬가지로 MDN에서 말하는 Canvas에 대한 정의는 다음과 같다.

Canvas API는 JavaScript와 HTML canvas 엘리먼트를 통해 그래픽을 그리기 위한 수단을 제공합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용됩니다.

Canvas는 그래픽을 그리기 위한 공간(Container)개념이다. canvas라는 html 태그가 있고 그 위해 JS로 2d 그래픽 컨텍스트를 만들어서 작업한다. 간단한 예제 코드를 살펴보자.

위에서 살펴본 svg와 canvas는 거의 같은 동작을 할 수 있는 요소이다. 작업 환경에 따라 canvas와 svg 중에 어떤 것을 사용하는게 나을지 달라진다.

• canvas 요소의 경우 성능은 화면이 작거나, 픽셀 수가 많을 수록(>10k) 좋다. 그리고 복잡하고 고성능의 에니메이션 작업이나 동영상 조작 등의 작업에 잘 어울린다.
• svg 요소의 경우 성능은 화면이 크거나, 픽셀 수가 적을 수록(<10k) 좋다. 그리고 고품질의 문서 작업이나 정적 이미지의 조작 작업에 잘 어울린다.

3. SVG와 viewport와 좌표계, viewbox

3-1. viewport와 좌표계

HTML svg 태그에서 보여지는 영역을 viewport 라고 하며 width와 height 속성으로 크기를 설정할 수 있다.

3-2. viewBox

svg에서 크기 영역을 조정할 때는 viewBox 속성도 함께 염두해 두어야 한다. width와 height로 svg의 영역 크기(뷰포트)를 설정할 수 있다면, viewBox는 svg 내부 요소들의 좌표 영역의 비율, 그리고 뷰포트 내에서 도형을 보여줄 위치를 설정할 수 있다.

viewBox의 속성은 min-x, min-y, width, height 순서대로 받는다.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100" viewBox="0 0 200 200">
  <rect x="0" y="0" width="200" height="200" stroke="black" fill="transparent" />
  <circle cx="100" cy="100" r="50" fill="#ff1795" />
</svg>                                              

3-3. preserveAspectRatio

preserveAspectRatio 어트리뷰트는 주어진 양상 비율의 뷰박스 안의 요소가 다른 양상 비율의 뷰포트에 맞춰서 들어가는지를 나타낸다. 자세한 설명은 mdn 공식 문서를 살펴 보도록 하자

Tutorial

1번. 다음 크리스마스 트리를 svg로 만들어 봅시다.

2번. 다음 원을 canvas로 만들어 봅시다.

레퍼런스

https://developer.mozilla.org/ko/docs/Web/SVG

SVG: Scalable Vector Graphics | MDN

http://www.tcpschool.com/html/html5_graphic_canvasVsSvg

코딩교육 티씨피스쿨

https://developer.mozilla.org/ko/docs/Web/API/Canvas_API

Canvas API - Web API | MDN

1번 예제 소스 코드 https://www.freecodecamp.org/news/svg-tutorial-learn-to-code-images/

SVG Tutorial – How to Code Images with 7 Examples

2번 예제 소스 코드 https://www.w3schools.com/html/html5_canvas.asp

HTML Canvas

https://puterism.com/svg-viewport-and-viewbox/

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

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

preserveAspectRatio - SVG: Scalable Vector Graphics | MDN