SVG to PNG 변환기 (JPG 변환도 지원)
SVG 파일이나 붙여넣은 SVG 코드를 무료로 PNG 또는 JPG 이미지로 변환합니다. 원하는 출력 크기를 정확히 선택할 수 있으며, 모든 과정이 브라우저 안에서만 실행됩니다.
PNG와 JPG, 어느 것을 선택해야 할까요?
| 형식 | 특징 | 추천 용도 |
|---|---|---|
| PNG | 품질 손실이 없는 무손실 압축이며, 투명 배경도 그대로 유지됩니다. | 투명도나 선명한 경계선이 필요한 로고, 아이콘, 일러스트 |
| JPG | 파일 크기를 작게 유지하는 손실 압축이지만, 투명한 영역은 선택한 배경색으로 채워집니다. | 사진 배경이 있는 이미지, 또는 파일 크기를 최소화하는 것이 가장 중요한 경우 |
SVG to PNG 변환기란?
SVG to PNG 변환기는 SVG(벡터 이미지) 파일이나 붙여넣은 SVG 코드를 원하는 픽셀 크기의 PNG 또는 JPG 이미지로 바꿔주는 도구입니다. SVG는 아이콘, 로고, 일러스트에 널리 쓰이지만, 웹 양식에 업로드하거나 SVG를 지원하지 않는 앱 또는 오래된 환경에서 표시해야 하는 등 일반적인 이미지 형식이 필요한 상황도 많습니다. 이 도구는 그 간극을 몇 초 만에 메워줍니다.
변환은 브라우저의 Canvas API 기능을 이용해 전적으로 클라이언트 측에서 이루어지므로, SVG 파일이나 코드가 서버로 전송되는 일은 없습니다. SVG는 벡터 형식이기 때문에 내보낼 때의 픽셀 크기는 어딘가에서 결정되어야 하는데, 이 도구는 SVG 자체에서 합리적인 기본값을 감지한 뒤 자유롭게 조정할 수 있도록 해줍니다.
사용 방법
- SVG 불러오기 파일을 선택하세요(드래그 앤 드롭도 가능합니다). 또는 SVG 코드를 직접 붙여넣으세요.
- 출력 형식 선택하기 PNG(투명도 유지) 또는 JPG(투명 영역을 배경색으로 채움) 중에서 선택하세요.
- 출력 크기 조정하기 너비/높이를 직접 입력하거나, 배율 버튼(1x/2x/4x)으로 두 값을 한꺼번에 바꾸세요.
- 변환 후 다운로드하기 "변환하기"를 클릭해 미리보기를 확인한 다음 바로 다운로드하세요.
더 잘 활용하기 위한 팁
- SVG에 width/height 속성이나 viewBox가 없으면 초기 출력 크기는 기본적으로 512×512px로 설정됩니다. 필요에 맞게 언제든지 원하는 크기로 바꿀 수 있습니다.
- 배율 버튼(1x/2x/4x)은 SVG에서 감지된 크기를 한 번에 곱해줍니다. 레티나(고해상도) 디스플레이용으로 아이콘 세트를 2x/4x로 내보낼 때 유용합니다.
- 투명 배경을 유지해야 한다면 PNG를 선택하세요. JPG는 알파 채널이 없어서 투명한 영역이 선택한 배경색(기본값은 흰색)으로 채워집니다.
- SVG에 포함된 복잡한 그라디언트나 필터 효과는 사용 중인 브라우저가 해석하는 대로 렌더링됩니다. SVG가 외부 폰트나 이미지를 참조하는 경우, 브라우저가 실제로 그 자원을 불러올 수 있어야 올바르게 표시됩니다.
- 너비나 높이를 비율을 유지한 채 바꾸려면 "가로세로 비율 고정"을 체크된 상태로 두세요. 너비와 높이를 각각 독립적으로 설정하려면 체크를 해제하세요.
활용 사례
아이콘·로고 래스터화
디자인 도구에서 내보낸 SVG 아이콘을 PNG로 변환한 뒤, SVG를 지원하지 않는 시스템이나 앱에 삽입하세요.
웹 양식에 업로드하기
많은 양식과 서비스가 SVG 업로드를 허용하지 않습니다. 미리 PNG/JPG로 변환해 이런 제약을 우회하세요.
레티나 디스플레이용 여러 크기 내보내기
배율 버튼을 사용해 고해상도 아이콘 세트용 1x/2x/4x 버전을 빠르게 생성하세요.
소셜 미디어나 슬라이드에 붙여넣기
SVG를 직접 받아주지 않는 플랫폼이나 슬라이드 프로그램을 위해 일반적인 이미지 형식으로 변환하세요.
용어집
- SVG (Scalable Vector Graphics)
- 도형을 XML 텍스트로 된 좌표와 경로로 표현하는 벡터 이미지 형식입니다. 크기를 확대하거나 축소해도 절대 계단처럼 거칠어지지 않습니다.
- 래스터화
- 벡터 이미지를 특정 크기의 픽셀 격자(래스터 이미지)로 변환하는 과정입니다.
- viewBox
- SVG 콘텐츠가 내부적으로 차지하는 좌표 범위를 정의하는 속성입니다. width/height가 없을 때 크기의 대체 값으로 사용됩니다.
- 알파 채널
- 이미지의 픽셀마다 저장되는 투명도 정보입니다. PNG는 이를 유지하지만 JPG에는 없어서, 변환 시 투명한 영역이 배경색으로 채워집니다.
- Canvas API
- 이미지를 그리고 조작하기 위한 브라우저의 표준 자바스크립트 인터페이스입니다. 이 도구는 별도의 라이브러리 없이 오직 Canvas API만으로 SVG를 래스터화합니다.
자주 묻는 질문
여담 ― SVG는 사실 XML로 작성된 하나의 텍스트 파일입니다
이미지를 픽셀 격자로 저장하는 PNG나 JPG와 달리, SVG(Scalable Vector Graphics)는 도형을 수학적인 좌표와 경로로 표현하며 그 내용을 XML 텍스트로 기술합니다. 그래서 크기를 확대하거나 축소해도 절대 계단처럼 거칠어지지 않으며, 메모장 같은 일반 텍스트 편집기로 파일을 열어 내용을 그대로 읽을 수도 있습니다. 바로 이러한 구조적 특징 때문에 SVG는 다양한 크기에서도 선명하게 보여야 하는 로고나 아이콘에 가장 널리 쓰이는 형식이 되었습니다.
SVG는 애초에 "해상도"라는 개념 자체를 가지고 있지 않습니다. 순수하게 벡터로 기술된 설명으로만 저장되기 때문입니다. 이를 PNG나 JPG처럼 일반적인 픽셀 기반 형식으로 래스터화하는 순간, 어떤 픽셀 크기로 렌더링할지를 누군가는 반드시 결정해야 합니다. 이 도구가 너비와 높이를 직접 지정할 수 있도록 만들어진 것도 바로 이런 SVG의 근본적인 성질에서 자연스럽게 나온 결과입니다.
실제로 많은 SVG 파일은 width/height 속성을 전혀 지정하지 않거나, 퍼센트 같은 상대 단위로만 표현하는 경우가 흔합니다. 이런 경우 도구들은 보통 viewBox 속성을 대신 참고합니다. viewBox는 SVG 내부 콘텐츠가 차지하는 좌표 범위를 정의하는 속성입니다. 이 도구도 같은 관례를 따라, width/height가 없을 때는 viewBox를 픽셀 크기의 대체 값으로 사용합니다.