이번 포스팅에서는 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
SVG(Scalable Vector Graphics)는 2차원 벡터 그래픽을 서술하는 XML 기반의 마크업 언어입니다.
developer.mozilla.org
http://www.tcpschool.com/html/html5_graphic_canvasVsSvg
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
https://developer.mozilla.org/ko/docs/Web/API/Canvas_API
Canvas API - Web API | MDN
Canvas API는 JavaScript와 HTML <canvas> 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용
developer.mozilla.org
1번 예제 소스 코드 https://www.freecodecamp.org/news/svg-tutorial-learn-to-code-images/
SVG Tutorial – How to Code Images with 7 Examples
Have you ever needed an icon for your website, but you couldn't quite find the right one? Or perhaps you wanted to have a simple diagram, but didn't want to learn a whole new library just for that? Well, good news – you can do all that and more
www.freecodecamp.org
2번 예제 소스 코드 https://www.w3schools.com/html/html5_canvas.asp
HTML Canvas
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
https://puterism.com/svg-viewport-and-viewbox/
SVG 뷰포트(viewport)와 뷰박스(viewBox) - Puterism
JPEG, PNG와 같은 래스터 이미지의 사이즈를 조절할 때는 아래와 같이 width 나 height 로 조절할 수 있다. 하지만 SVG에서는 사이즈를 조절할 때는 조금 다르게 동작한다. 다음 예시 코드를 보자. 위 예
puterism.com
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
preserveAspectRatio - SVG: Scalable Vector Graphics | MDN
The preserveAspectRatio attribute indicates how an element with a viewBox providing a given aspect ratio must fit into a viewport with a different aspect ratio.
developer.mozilla.org
'Web Frontend Developer' 카테고리의 다른 글
| Apollo Client에서의 Caching에 대하여 (0) | 2022年06月14日 |
|---|---|
| Backend For Frontend는 무엇인가? (0) | 2022年05月13日 |
| [Troubleshooting] Next.js에서 dynamic routing 새로고침 에러 (0) | 2022年04月15日 |
| [패캠] The RED : 김민태의 React와 Redux로 구현하는 아키텍처와 리스크 관리 (0) | 2022年03月23日 |
| 테스팅 라이브러리 (Testing Library) 란? (1) | 2021年12月24日 |