[220927] SVG와 Sass를 배웠다.

그런데 왜인지 집중이 잘 안되는 날이었다...

(정신차려 갬맹재,,,!)

그래서 SVG만 우선 간단하게 정리했다.

 

 

 

 

SVG(Scalable Vector Graphics)란?

- 확장 가능한 벡터 그래픽이란 뜻으로, XML 기반의 2차원 그래픽이다.

- 이미지 파일 형식(Image file format) 중 하나이다.

- HTML 태그의 집합으로 이루어져 있기때문에 css와 javascript로 컨트롤이 가능하다.

- HTML과 텍스트의 관계를 그래픽에 적용한 것으로, 점과 선을 이용해 텍스트를 이미지처럼 사용한다.

- 벡터 그래픽을 이용하는 대표적인 응용프로그램 중에는 어도비 일러스트가 있다.

 

장점

- 확대/축소를 해도 해상도가 깨지지 않고, 화질이 유지되며 용량 또한 늘어나지 않는다.

- 용량이 PNG, GIF보다 작다.

- 출력(로딩 속도)이 빠르다.

- 검색 엔진 최적화에 용이하다.

- 손실이나 품질 저하 없이 모든 크기에서 렌더링이 가능하다.

- 수정과 애니메이션이 가능하다.

 

단점

- 코드로 이루어진 이미지이기 때문에 복잡한 이미지일수록 용량이 커진다.

- 이미지가 복잡할 수록 로딩 시간이 오래 걸릴 수 있다.

- 레거시 브라우저에서 작동되지 않는다.

- 색 표현에 한계가 있다.

 

어디에 사용하면 좋은가?

- 단순한 아이콘, 로고, 도형 등을 구현할 때 많이 사용한다.

- 확대해도 깔끔한 해상도가 유지되어야 하는 곳, 홍보물 인쇄물에 사용하면 좋다.

 

 

HTML에 SVG를 적용하는 여러가지 방법들

 

1. <img> 태그

<img src='images/cat.svg' alt='고양이 이미지'>

 

 

2. CSS background-image

.cat-svg-img {
  width: 100px;
  height: 100px;
  background: url(images/cat.svg) no-repeat 0 0; 
}

 

 

3. SVG 요소들 직적 inline으로 삽입

- svg 파일의 코드를 그대로 html 코드 안에서 사용한다.

- 일러스트에서 작업한 이미지를
[Export as...] → [파일 형식 SVG로 선택 후 export] → [팝업창의 show code에서 svg 코드 확인 가능] → 그 코드를 HTML에 붙여넣어 사용하면 된다.

 

 

4. <object> 태그 사용

 

 

 

 

 

 

 

 

 

📚 ref

- MDN SVG: Scalable Vector Graphics

- SVG가 뭔가요?

- 'SVG'를 사용하는 이유!

- HTML 문서에 SVG를 넣는 여러가지 방법들