SVG

🍊 SVG

📎 SVG 설명 참고

웹사이트에서 이미지를 표현하는 방법은 흔히 알려진 jpg, png 등의 이미지 파일형식 뿐만 아니라 svg라는 형식이 존재한다.

SVG는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일형식이다. 즉, 기존 이미지 형식은 픽셀로 이미지를 표현했다면, svg는 벡터(수학적 계산)을 통해 이미지를 표현한다.

🍉 SVG 사용방법

1. img 태그

<img src="nana.svg" />

2. background-image

.nana {
  width: 300px;
  height: 120px;
  outline: 2px solid red;
  background-image: url("./potion.svg");
}

3. HTML 인라인

<svg> ... </svg>

• 브라우저는 이미지를 불러올 때마다 HTTP 요청을 해야 하는데, 이 경우엔 요청-응답의 필요가 없어, 조금 더 빠르게 페이지 로드가 될 수 있도록 한다.
• 하지만, 캐싱이 불가능하다.
• 그래서 로드될 때마다 HTML내 SVG 코드를 다시 읽어야 한다.

적은 SVG의 경우 inline으로 사용해도 괜찮지만, 캐싱이 되지 않기 때문에 많은 SVG를 사용한다면 img 태그와 같은 방법을 사용해야 한다.

4. object

<object type="image/svg+xml" data="./potion.svg" class="nana"></object>

---

🍉 SVG를 사용하는 이유?

1. 특정 사이즈에 구애받지 않음.

SVG는 벡터 기반이기 때문에 리사이징이 되어도 전혀 깨지지 않는다. 그렇기 때문에 사이즈별로 아이콘을 일일이 생성해서 개발자에게 넘겨줄 필요가 없다. SVG 파일 하나면 모든 해상도를 대응할 수 있다.

2. 작은 파일 사이즈

비트맵 이미지들(PNG, JPEG) 같은 경우 파일 크기를 결정하는 주요 요소는 바로 ‘해상도’이다. 예를 들어 5000x5000 픽셀 이미지는 항상 500x500보다 파일 사이즈가 크다.

반면, SVG 그래픽 같은 경우 파일 크기를 결정하는 주요 요소는 바로 ‘복잡도’이다. Path가 비교적 적은 간단한 이미지는 PNG, JPEG 보다 파일 사이즈가 적을 수도 있지만 이미지를 구성하는 요소의 복잡도(레이어가 많다든지 특정 효과가 많다든지)에 따라 파일 사이즈가 커진다.

🍉 참고 자료

📎 Which SVG technique performs best for way too many icons?
📎 Inline SVG… Cached
📎 Inline SVG vs SVG File Performance