SVG 파일을 끌어다 놓거나 클릭해 선택하세요
SVG
작동 방식
SVG는 벡터 형식으로, 도형을 좌표로 기술하기 때문에 어떤 크기로도 선명하게 그릴 수 있습니다. 반면 PNG와 JPG는 픽셀 수가 고정된 비트맵입니다. 래스터화란 바로 그 과정, 즉 해상도를 정하고 벡터를 그 픽셀 격자 위에 그리는 일입니다.
그래서 해상도는 변환한 뒤가 아니라 변환하기 전에 선택합니다. 이 도구는 SVG의 width와 height를 요청한 크기로 바꾼 다음에 그리기 때문에, 작은 이미지를 확대하는 대신 브라우저가 그 배율로 곡선을 다시 그립니다. 배율(2×, 4× 등)이나 픽셀 단위의 정확한 너비·높이를 지정할 수 있습니다.
PNG는 투명도를 유지하지만 JPG는 지원하지 않으므로 투명한 부분은 선택한 배경색으로 채워집니다. 모든 그리기는 브라우저의 Canvas에서 이루어지며, 파일도 SVG 코드도 서버로 전송되지 않습니다.
예시
<svg viewBox="0 0 24 24" width="24" height="24">…</svg>PNG 96 × 96 px24 px 아이콘을 4× 배율로 변환하면 96 × 96 px이 되며, 고밀도 화면에서 흔히 쓰이는 크기입니다.<svg viewBox="0 0 1200 630">…</svg>JPG 1200 × 630 pxwidth와 height 속성이 없는 SVG는 viewBox에서 크기를 가져옵니다. 여기서는 소셜 미디어 미리보기 이미지용으로 1× 배율로 래스터화했습니다.활용 사례
- SVG를 받지 않는 앱 스토어나 웹 매니페스트가 요구하는 PNG 아이콘 만들기.
- 벡터 로고를 투명 배경 PNG로 변환해 프레젠테이션이나 문서에 삽입하기.
- SVG 다이어그램이나 차트를 JPG로 내보내 이메일에 첨부하거나 벡터를 받지 않는 플랫폼에 올리기.
- 고밀도 화면을 위해 같은 아이콘의 @2x, @3x 버전 만들기.
- SVG 템플릿으로 웹사이트의 미리보기 이미지(Open Graph) 만들기.
자주 묻는 질문
어떤 해상도를 고르는 게 좋나요?
최종 용도에 맞추면 됩니다. 일반 화면이라면 이미지가 표시될 크기 그대로면 충분하고, 고밀도 화면에서는 그 값의 2배나 3배가 적당합니다. 인쇄용이라면 인치 단위 크기에 300을 곱해 300dpi를 맞추세요.
왜 제 SVG가 예상과 다른 크기로 나오나요?
처음 크기는 width와 height 속성에서 가져옵니다. 두 속성이 없거나 백분율이면 viewBox의 비율을 사용합니다. 둘 다 없으면 브라우저는 300 × 150 px로 간주합니다. 사용자 지정 모드에서 그 값을 무시하고 정확한 너비와 높이를 입력할 수 있습니다.
투명도는 유지되나요?
PNG에서는 투명 배경 옵션을 켜 두면 유지됩니다. JPG는 알파 채널이 없어 항상 단색 위에 그려집니다. 기본값은 흰색이며 원하는 색으로 바꿀 수 있습니다.
외부 이미지나 글꼴을 사용하는 SVG는 왜 실패하나요?
이미지 안에서 그려질 때 SVG는 다른 도메인의 리소스를 내려받을 수 없고, 브라우저가 보안상 내보내기를 막습니다. 해결책은 해당 리소스를 SVG 자체에 포함하는 것입니다. 이미지는 데이터 URI로, 텍스트는 패스로 변환하세요.
PNG에서 SVG로 되돌릴 수 있나요?
직접 되돌릴 수는 없습니다. 래스터화하면 벡터 정보가 사라지고 픽셀만 남습니다. 곡선을 되살리려면 벡터 추적 과정을 거쳐야 하는데, 이는 근사한 형태를 재구성할 뿐 원본은 아닙니다. 원본 SVG는 항상 보관해 두는 편이 좋습니다.