결론부터: 언제 SVG, 언제 PNG·JPG
| 이미지 종류 | 추천 포맷 | 이유 |
|---|---|---|
| 로고, 아이콘, 심플한 일러스트 | SVG | 확대해도 깨지지 않고, 파일 용량도 훨씬 작음 |
| 사진, 스크린샷 | PNG·JPG·WEBP | 색이 연속적으로 변해 벡터로 표현하기 비효율적 |
| 지도 위 심볼·마커 | SVG | 줌 레벨이 바뀌어도 선명하게 유지 |
| 인쇄용 고해상도 이미지 | PNG·TIFF | 인쇄소 대부분이 래스터 포맷을 기준으로 함 |
| 차트·그래프(수치 기반) | SVG | 텍스트·선이 어떤 화면에서도 흐릿해지지 않음 |
벡터(Vector)와 래스터(Raster)의 근본적인 차이
래스터(픽셀) 이미지는 PNG, JPG, WEBP처럼 수많은 작은 사각형(픽셀) 각각에 색상 값을 저장하는 방식입니다. 사진처럼 색이 미세하고 연속적으로 변하는 이미지를 표현하기에 적합하지만, 원본보다 크게 확대하면 픽셀 하나하나가 보이면서 흐릿해지거나 계단처럼 각져 보입니다. 반면 벡터 이미지인 SVG는 "이 점에서 저 점까지 이런 곡선으로 이런 색을 채워라"는 수학적인 좌표·경로 정보로 이미지를 표현합니다. 그래서 화면 크기나 배율에 관계없이 항상 선명하게 다시 계산되어 그려집니다.
SVG 파일은 실제로 어떻게 생겼나요
SVG는 이미지 파일이지만 실제로는 XML 기반의 텍스트 코드입니다. 메모장 같은 텍스트 편집기로 SVG 파일을 열어보면 <svg>, <path>, <circle> 같은 태그와 좌표 숫자들이 나열되어 있는 것을 볼 수 있습니다. 텍스트이기 때문에 CSS나 자바스크립트로 색상·크기·애니메이션을 쉽게 조작할 수 있고, 검색엔진이 내용을 읽을 수도 있다는 점도 PNG·JPG와의 큰 차이입니다.
PNG·JPG를 SVG로 바꾸면 어떻게 되나요
단순히 확장자만 바꾸는 것은 의미가 없습니다. 진짜 래스터→벡터 변환(트레이싱, tracing)은 이미지 안의 색상 경계를 인식해서 도형 경로로 재구성하는 과정을 거칩니다. 이 과정은 로고나 텍스트처럼 색상 영역이 단순하고 뚜렷할수록 결과가 깔끔하고, 사진처럼 색이 미세하게 계속 바뀌는 이미지일수록 결과물이 부자연스럽거나 오히려 파일이 커집니다. 반대로 SVG를 PNG·JPG로 바꾸는 것(래스터화, rasterizing)은 비교적 간단하며, 원하는 픽셀 크기를 지정해 특정 해상도의 이미지로 "구워내는" 개념입니다. 이 방향의 변환은 앱 아이콘 제작, 벡터로 받은 로고를 SNS 프로필에 올릴 때처럼 실무에서 자주 필요합니다.
웹사이트에서 SVG를 쓸 때 장단점
로고·아이콘·심플한 다이어그램을 SVG로 쓰면 레티나(고밀도) 디스플레이에서도 별도의 2배·3배 이미지를 따로 준비할 필요 없이 항상 선명하고, 파일 용량도 같은 도형 기준으로 PNG보다 훨씬 작은 경우가 많습니다. 다만 브라우저가 SVG 코드를 매번 해석해서 그림을 그려야 하므로, 경로(path)가 지나치게 많고 복잡한 SVG는 오히려 PNG보다 렌더링이 느릴 수 있습니다. 또한 SVG는 텍스트 파일이라 외부에서 가져온 SVG에 악성 스크립트가 숨어 있을 수 있으므로, 출처가 불분명한 SVG를 웹사이트에 그대로 삽입하는 것은 피하는 것이 안전합니다.
자주 묻는 질문
SVG는 어떤 파일인가요?
SVG(Scalable Vector Graphics)는 점·선·도형의 수학적 좌표 정보로 이미지를 표현하는 벡터 파일 형식입니다. XML 텍스트 형태로 저장되어 있어 아무리 확대해도 계단 현상 없이 선명하며, 파일을 열어보면 코드로 이루어져 있습니다.
사진도 SVG로 만들 수 있나요?
이론적으로는 가능하지만 실용적이지 않습니다. 사진처럼 색이 연속적으로 미세하게 변하는 이미지를 벡터 도형으로 표현하려면 엄청나게 많은 도형 데이터가 필요해 파일이 오히려 PNG·JPG보다 커지고 원본과 똑같이 재현되지도 않습니다. 사진은 PNG·JPG·WEBP 같은 래스터 포맷을 쓰는 것이 맞습니다.
PNG를 SVG로 변환하면 화질이 좋아지나요?
아니요. PNG는 이미 픽셀로 고정된 래스터 이미지이기 때문에, 파일 확장자만 SVG로 바꾼다고 벡터 정보가 생기지는 않습니다. 진짜 벡터화를 하려면 도형을 추적(트레이싱)하는 별도 변환 과정이 필요하며, 로고처럼 단순한 도형일수록 결과가 깨끗하고 사진일수록 결과가 부자연스럽습니다.
웹사이트에서 SVG를 쓰면 뭐가 좋나요?
로고·아이콘·일러스트처럼 단순한 도형이라면 SVG가 PNG보다 파일 용량이 훨씬 작고, 화면 크기(레티나 디스플레이 등)에 관계없이 항상 선명하게 보이며, CSS로 색상을 쉽게 바꿀 수 있다는 장점이 있습니다. 다만 브라우저가 SVG 코드를 매번 해석해서 그려야 하므로 아주 복잡한 SVG는 오히려 렌더링이 느려질 수 있습니다.