본문으로 건너뛰기
Toolars
둘러보기

SVG를 PNG로 변환

SVG를 열면 이 페이지가 엄격한 허용 목록으로 파일을 정리한 뒤, 안전해진 내용을 선택한 배율로 투명 PNG에 렌더링합니다. 모두 브라우저 안에서 처리됩니다. 스크립트는 실행되지 않고 파일도 업로드되지 않습니다. 알아 둘 점은 CSS 스타일, 필터, 마커, 포함된 이미지처럼 허용 목록에 없는 요소는 렌더링 전에 제거된다는 것입니다.

도구 요약

SVG 크기 한도
마크업 2 MiB, image/svg+xml로 식별되어야 합니다
배율
1x, 2x, 3x, 4x 버튼(이 페이지는 2x로 미리 설정). '내보내기 배율'에는 0.01~32도 입력할 수 있습니다
출력 상한
배율 적용 후 한 변 8,192px, 24 MP
렌더링 전에 제거되는 것
스크립트, 이벤트 핸들러, style 속성과 <style>, 필터, 마커, <image>, foreignObject, 외부 URL과 data: URL
아예 거부되는 것
DOCTYPE 또는 ENTITY 선언, width/height와 viewBox가 모두 없는 파일
배경
PNG에서는 투명. 채우기 색은 JPEG로 바꿨을 때만 적용됩니다

작업 경로 / 입력에서 결과까지

SVG를 PNG로 래스터화하는 방법

  1. 01

    SVG 추가

    '파일 선택'으로 .svg 파일을 한 번에 하나씩 고를 수 있습니다. 원본 마크업은 페이지에 삽입되지 않으며, 미리보기는 무해화한 렌더링이 끝난 뒤에야 나타납니다.

  2. 02

    크기 선택

    '내보내기 배율' 아래의 1x, 2x, 3x, 4x를 누르거나 '출력 너비'와 '출력 높이'에 정확한 픽셀 값을 입력하세요.

  3. 03

    무해화 후 변환

    '무해화 후 변환'을 누르세요. 요약에 최종 픽셀 크기와, 안전하지 않거나 지원되지 않아 제거된 항목 수가 표시됩니다.

  4. 04

    확인 후 다운로드

    제거된 항목이 하나라도 있다면 PNG를 다운로드하기 전에 미리보기를 원래 아트워크와 비교하세요.

벡터 아트워크를 픽셀로 바꾸기

SVG는 도형을 기술하므로 어떤 크기에서도 선명하지만, 슬라이드 도구, 문서 편집기, 스토어 등록 페이지처럼 고정된 비트맵을 원하는 곳이 많습니다. PNG로 래스터화하면 투명도가 유지되고, 잃는 것은 선택한 픽셀 격자의 한계뿐입니다.

중요한 결정은 바로 그 격자입니다. 배율은 SVG 자체의 width와 height(이 속성이 없으면 viewBox)에 곱해지므로, 64×64 아이콘은 2x에서 128×128이 됩니다. PNG를 나중에 확대하면 흐려지니 필요한 가장 큰 크기로 렌더링하세요.

예상 밖의 결과는 대부분 무해화 때문입니다. 패스, 기본 도형, 텍스트, 그라데이션, 클리핑 패스, 마스크, 패턴, 로컬 <use> 참조는 남고, fill이나 stroke 같은 표현 속성도 유지됩니다. CSS 클래스, style 속성, <style> 블록에 들어 있는 스타일은 제거되므로, 그런 방식으로 내보낸 아트워크는 검게 나오거나 채우기가 사라질 수 있습니다.

자주 묻는 질문

PNG가 검게 나오거나 색이 사라지는 이유는 무엇인가요?
색이 CSS(<style> 블록, 클래스 규칙, style 속성)로 지정되었을 가능성이 큽니다. 이런 스타일은 제거되고, SVG 도형은 기본적으로 검은색으로 채워집니다. CSS 대신 표현 속성(fill, stroke)으로 SVG를 다시 내보내거나, 디자인 도구에서 인라인 속성 방식의 내보내기를 선택하세요.
고밀도 화면에는 어떤 배율을 골라야 하나요?
이 페이지는 2x로 열립니다. SVG에 선언된 치수를 두 배로 늘리는 값으로, 대부분의 고밀도 디스플레이에 알맞습니다. 더 크게 배치할 때는 3x나 4x를 쓰되, 결과가 한 변 8,192px와 24 MP 안에 들어와야 한다는 점을 기억하세요.
화살표 머리나 그림자가 사라지는 이유는 무엇인가요?
SVG에서 화살표 머리는 marker 요소로, 그림자는 filter 요소로 그리는데 둘 다 새니타이저의 허용 목록에 없습니다. SVG를 내보내기 전에 편집기에서 그런 효과를 일반 패스로 변환하세요.
SVG가 거부된 이유는 무엇인가요?
흔한 원인은 DOCTYPE이나 ENTITY 선언, 2 MiB를 넘는 파일, image/svg+xml로 인식되지 않는 파일, width·height·viewBox가 모두 없는 루트 요소입니다. 렌더링이 픽셀 상한을 넘게 되는 배율도 해당 한도를 밝히며 거부됩니다.
링크된 글꼴과 이미지가 PNG에 나타나나요?
아니요. 외부 URL, data: URL, <image> 요소는 제거되므로 링크된 그림과 웹 글꼴은 불러오지 않습니다. 텍스트는 지정된 font-family에 대해 브라우저가 이미 가진 글꼴로 그려지니, 글자 모양이 정확해야 한다면 편집기에서 텍스트를 윤곽선으로 변환하세요.

SVG → 이미지 변환