로고를 키웠다가 흐릿하게 뭉개지고 계단처럼 각진 모습을 본 적이 있다면, 그 답답함을 아실 겁니다. SVG는 바로 그 문제를 풀기 위해 있습니다. JPG나 PNG와는 작동 방식이 완전히 다른 형식인데, 이 차이를 알아야 상황에 맞는 형식을 고를 수 있습니다.
SVG는 무엇의 줄임말인가요?
SVG는 Scalable Vector Graphics의 줄임말로, 우리말로는 확대·축소가 자유로운 벡터 그래픽이라는 뜻입니다. HTML과 CSS 표준을 정하는 W3C가 표준화한 개방형 이미지 형식이며, 요즘 브라우저는 모두 별도 설치 없이 지원합니다.
JPG와 PNG가 색이 있는 픽셀을 격자로 저장하는 것과 달리, SVG는 이미지를 텍스트로 기록합니다. 수학 좌표로 도형과 선, 곡선, 색을 표현하는 방식입니다. 그래서 SVG 파일은 사실상 텍스트 파일이며, 아무 코드 편집기에서나 열어 고칠 수 있습니다.
SVG는 안에서 어떻게 동작하나요?
SVG 파일은 HTML과 비슷한 마크업 언어인 XML로 작성합니다. 예를 들어 빨간 원 하나는 이렇게 기록됩니다:
브라우저는 이 수학적 지시를 읽어 그때그때 픽셀을 계산하며 화면에 그립니다. 16x16 픽셀 파비콘부터 10미터짜리 옥외 광고판까지 어떤 크기로든 화질 손실 없이 표시할 수 있는 이유입니다.
SVG의 장점
- 화질 손실 없는 확대·축소: 마음껏 키우고 줄여도 어떤 해상도에서든 선명합니다. 레티나나 4K 화면에서도 마찬가지입니다.
- 가벼운 파일: 단순한 로고와 아이콘은 PNG보다 훨씬 작고, 크기가 커질수록 차이가 벌어집니다.
- 코드로 수정 가능: 이미지 편집 프로그램 없이 CSS나 자바스크립트로 색과 크기, 움직임을 바로 바꿀 수 있습니다.
- 검색엔진이 읽음: 내용이 텍스트라서 구글이 SVG 안의 글자를 읽고 색인할 수 있습니다.
- 애니메이션 지원: GIF나 동영상 없이 SVG 안에서 CSS와 SMIL로 움직임을 만들 수 있습니다.
- 접근성: 화면 낭독기를 위해 SVG에 제목과 설명을 넣을 수 있습니다.
SVG의 한계
- 사진에는 부적합: 사진에는 수백만 가지 색 변화와 복잡한 그러데이션이 들어 있습니다. 이것을 벡터로 옮기면 파일이 엄청나게 커지고 효율도 떨어집니다. 사진에는 언제나 JPG가 맞습니다.
- 복잡한 그림은 무거워짐: 도형과 그러데이션이 많은 세밀한 일러스트는 SVG 파일이 커지고 화면에 그리는 속도도 느려집니다.
- 직접 편집하려면 공부가 필요: 코드로 SVG를 고치려면 XML과 벡터 수학을 알아야 합니다. 일러스트레이터나 피그마 같은 도구를 쓰면 훨씬 수월합니다.
💡 간단한 기준: 로고와 아이콘, 일러스트, 도표, 지도처럼 여러 크기로 보여 줘야 하는 그림에는 SVG를 쓰세요. 사진이나 디테일과 그러데이션이 복잡한 이미지에는 JPG나 WebP를 쓰면 됩니다.
SVG · PNG · JPG, 언제 무엇을 쓸까요?
| 항목 | SVG | PNG | JPG |
|---|---|---|---|
| 종류 | 벡터 | 래스터(픽셀) | 래스터(픽셀) |
| 손실 없는 확대·축소 | 지원 | 없음 | 없음 |
| 투명도 | 지원 | 지원 | 없음 |
| 사진에 적합 | 없음 | 없음 | 지원 |
| 로고와 아이콘에 적합 | 지원 | 지원 | 없음 |
| CSS·JS로 수정 | 지원 | 없음 | 없음 |
| 브라우저 지원 | 지원 | 지원 | 지원 |
웹사이트와 앱에서 SVG 쓰는 법
웹 페이지에 SVG를 넣는 방법은 크게 세 가지입니다:
- <img> 태그로 넣기: 가장 간단한 방법입니다. SVG를 다른 이미지와 똑같이 다루지만, CSS나 자바스크립트로 손댈 수는 없습니다.
- HTML에 직접 넣기: SVG 코드를 페이지의 HTML 안에 그대로 넣습니다. 색과 움직임, 상호작용까지 CSS와 JS로 모두 제어할 수 있어 반응하는 아이콘에 가장 많이 쓰는 방식입니다.
- CSS 배경으로 넣기:
background-image: url('icone.svg')처럼 씁니다. 장식용 아이콘에 편하지만 자바스크립트로 접근하기는 어렵습니다.
이미지를 SVG로 바꾸는 방법
사진이나 PNG를 SVG로 바꾸려면 픽셀을 도형으로 바꾸는 벡터화 과정을 거칩니다. 색이 적고 경계가 뚜렷한 단순한 이미지, 예를 들어 흰 배경의 로고에서 결과가 가장 좋습니다. ImageTools의 변환 도구를 쓰면 PNG와 JPG를 비롯한 주요 형식을 웹에서 쓰기 좋은 다른 형식으로 바꿀 수 있습니다.
SVG는 SEO에 도움이 되나요?
도움이 됩니다. SVG는 텍스트 기반이라 구글이 내용을 읽고 색인할 수 있습니다. 또 SVG 로고와 아이콘은 PNG보다 작은 편이라 페이지가 빨라지는데, 코어 웹 바이탈이 도입된 뒤로 속도는 구글 순위에 직접 영향을 주는 요소입니다.
SEO를 생각한다면 SVG 코드 안에 title과 desc를 넣어 두세요. 화면 낭독기와 검색엔진에 대체 텍스트 역할을 합니다.