비트맵 vs 벡터 이미지
이미지는 두 종류입니다:
- 비트맵 (JPEG/PNG/WebP): 픽셀 점으로 구성되어 일정 수준 이상 확대하면 모자이크처럼 흐려집니다
- 벡터 이미지 (SVG): 수학적 경로로 그래픽을 설명하여 아무리 확대해도 선명합니다
이 본질적 차이를 이해하면 SVG가 어떤 상황에 적합한지 알 수 있습니다.
SVG의 핵심 장점
무한 확대해도 선명
SVG는 픽셀이 아니라 경로, 곡선, 도형으로 그래픽을 설명합니다. 어떤 크기로 확대해도 날카롭고 선명하며 모자이크가 생기지 않습니다. 이것이 SVG의 가장 큰 장점으로, 여러 크기로 사용해야 하는 아이콘, 로고에 특히 적합합니다.
용량이 작음 (단순 그래픽 기준)
단순한 아이콘, 로고는 SVG 파일이 동급 PNG보다 훨씬 작습니다. 간결한 로고 PNG가 몇 KB에서 수십 KB라면 SVG는 1~2 KB일 수 있습니다. 단 복잡한 사진류 이미지에는 SVG가 적합하지 않습니다.
코드로 편집 가능
SVG는 본질적으로 XML 텍스트라 텍스트 편집기로 색상, 도형, 글자를 직접 수정할 수 있습니다. 프론트엔드에서 CSS로 색상을 제어하고 JS로 동적으로 수정할 수 있는 건 비트맵이 할 수 없는 일입니다.
애니메이션 지원
SVG는 내장 애니메이션과 CSS/JS 애니메이션을 지원합니다. 로딩 애니메이션, 아이콘 인터랙션 효과를 SVG로 구현하면 가볍고 부드럽습니다.
검색과 인덱싱 가능
SVG 안의 글자는 실제 텍스트라 검색엔진에 색인되고 접근성 리더기로 읽을 수 있어 이미지 속 글자보다 더 친절합니다.
SVG에 적합한 것
- 아이콘: 내비게이션 아이콘, 기능 아이콘, UI 디자인 최우선
- 로고: 브랜드 로고는 여러 크기로 사용해야 해 벡터가 가장 적합
- 일러스트: 플랫 일러스트, 장식 그래픽
- 차트: 데이터 시각화 차트에 벡터를 쓰면 확장해도 선명
- 아이콘 폰트: 아이콘 폰트의 본질은 SVG
SVG에 부적합한 것
- 사진: 사진은 색이 풍부하고 디테일이 많아 벡터로 설명하면 용량이 폭발하고 왜곡됩니다. 사진은 JPEG/WebP
- 복잡한 그라데이션, 텍스처: 지나치게 복잡한 그라데이션과 텍스처는 SVG 용량이 커져 비트맵만 못합니다
- 필터 효과가 필요할 때: 복잡한 필터 효과는 비트맵이 더 효율적
SVG의 한계
호환성 구석 문제
최신 브라우저는 SVG를 완벽히 지원하지만 일부 오래된 환경, 일부 메일 클라이언트는 SVG 지원이 좋지 않습니다. 중요한 상황에서는 테스트해 보세요.
복잡한 이미지는 용량이 오히려 커짐
사진류를 SVG로 변환하면 극단적으로 커지고 왜곡됩니다. SVG가 만능은 아니고 벡터 그래픽에만 적합합니다.
학습 비용
SVG를 디자인하려면 벡터 드로잉 기술이 필요해 비트맵처럼 사진으로 찍을 수는 없습니다. 단 기성 SVG 자원이나 비트맵→SVG 변환 도구를 쓰면 진입 장벽을 낮출 수 있습니다.
비트맵을 SVG로
비트맵(예: PNG)을 SVG로 변환하는 건 "트레이싱" 과정입니다 — 도구가 이미지 속 도형 경계를 인식해 근사 벡터 경로를 생성합니다.
이미지를 SVG로 변환 도구를 사용하세요:
- 비트맵 업로드 (간결하고 고대비인 로고 같은 이미지 권장)
- 도구가 트레이싱해 SVG 생성
- SVG 다운로드
변환 시 주의
- 단순 그래픽 (로고, 아이콘)은 SVG 변환 효과가 좋습니다
- 사진, 복잡한 이미지를 SVG로 변환하면 왜곡되고 용량이 커져 권장하지 않습니다
- 변환 뒤 가장자리가 매끄러운지, 색이 정확한지 확인
- 변환된 SVG는 텍스트 편집기로 추가 최적화 가능
SVG 사용 권장 사항
HTML에 인라인
작은 SVG는 HTML에 직접 인라인해 HTTP 요청을 줄이고 CSS로 제어할 수 있습니다.
아이콘에 currentColor 사용
아이콘 SVG를 currentColor로 채우면 CSS에서 color만 바꿔 아이콘 색을 바꿀 수 있어 한 벌의 아이콘을 여러 색으로 재사용할 수 있습니다.
SVG 압축
SVG는 텍스트라 도구로 압축(주석 제거, 경로 간소화)할 수 있습니다. 공개 전에 압축해 용량을 줄이세요.
정리
SVG의 핵심은 "벡터, 확장 가능, 편집 가능"입니다. 아이콘, 로고, 일러스트, 차트에는 SVG가 최적이고 사진은 비트맵을 쓰세요. 비트맵→SVG 변환은 단순 그래픽에 적합합니다. DocsAll SVG 변환 도구는 브라우저에서 처리해 비트맵 로고를 한 번에 벡터로 변환해 이후 다양한 크기로 사용하기 편합니다.