SVG 형식이란?

개요

SVG는 픽셀이 아니라 선과 도형, 곡선의 수식을 텍스트(XML)로 저장하는 벡터 형식입니다. 아무리 확대해도 선명하고, 단순한 로고는 수 KB로도 충분합니다.

이 사이트에서는 SVG를 PNG, JPG 같은 래스터 이미지로 바꿀 수 있고(SVG에 크기 정보가 없으면 1024px 폭으로 그립니다), 반대로 래스터 이미지를 SVG로 바꾸는 벡터 변환(트레이싱)도 지원합니다. 다만 트레이싱은 원본을 그대로 옮기는 것이 아니라 색 영역을 도형으로 다시 그리는 추정이라, 로고·아이콘에는 잘 맞지만 사진에는 맞지 않습니다.

역사

SVG(Scalable Vector Graphics)는 W3C가 2001년 1.0 권고안으로 발표했고, 2003년의 1.1 버전이 오래 표준으로 쓰였습니다. XML 기반이라 텍스트 편집기로 열어 볼 수 있습니다.

해상도에 독립적이고 CSS·자바스크립트로 다룰 수 있어, 지금은 웹 로고와 아이콘, 데이터 시각화의 기본 형식입니다.

장점

• 해상도에 독립적
• 코드로 편집·스타일링 가능
• 단순한 그래픽은 용량이 매우 작음

단점

• 사진 표현에는 부적합
• 복잡한 SVG는 렌더링이 느림
• 래스터 이미지를 SVG로 바꾸는 트레이싱은 원본과 같지 않고 사진에는 맞지 않음
• 외부 서비스 업로드 시 거부되는 경우가 있음

이럴 때 쓰세요

• 로고·아이콘
• 일러스트
• 반응형 웹 그래픽

호환성

모든 최신 브라우저가 지원하지만, SNS·메신저·일부 업로드 폼은 SVG를 받지 않습니다.