SVG PNG 변환
SVG to PNG
SVG를 원하는 배율로 PNG·JPEG·WebP로 렌더링하며 배경을 투명하게 두거나 채울 수 있습니다.
SVG를 비트맵으로 바꾸는 것은 목적지가 벡터를 못 받을 때 하는 일입니다. 소셜 카드, 이메일, 앱 아이콘 같은 곳입니다. 함정은 브라우저가 이 SVG를 고립된 상태로 그린다는 점입니다. 연결된 이미지도, 외부 스타일시트도, 웹폰트도 쓰지 못하므로 결과가 페이지에서 보이던 것과 다를 수 있습니다.
SVG를 놓으세요
아래에 마크업을 붙여넣어도 됩니다.
원본
사용 방법
파일을 놓거나 마크업을 붙여넣습니다
고유 크기는 width·height나 viewBox에서 읽습니다. 추정해야 했다면 그렇다고 표시합니다.
배율을 정합니다
고유 크기에 곱합니다. 결과 픽셀 크기를 슬라이더 옆에 보여 주므로, 24px 아이콘의 3배가 짐작이 아니라 72px임이 눈에 보입니다.
투명 배경과 배경색 중에 고릅니다
JPEG에는 알파가 없어서 고르면 배경색을 쓰게 됩니다. 아무 말 없이 검정 위에 합치지 않습니다.
자주 묻는 질문
글자가 다른 글꼴로 나옵니다.
렌더러가 웹폰트를 가져올 수 없기 때문입니다. 이렇게 래스터화하는 SVG는 외부 자원을 전혀 불러오지 못합니다. 내보내기 전에 편집기에서 글자를 경로로 변환하세요. 어디서나 똑같이 래스터화되어야 하는 SVG에 대한 표준 조언입니다.
브라우저가 렌더링을 거절했다고 나옵니다.
대개 xmlns 속성이 없기 때문입니다. 그것이 없으면 브라우저가 그릴 수 있는 XML이 아닙니다. 마크업이 잘못되었거나 불러올 수 없는 자원을 참조하는 경우도 있습니다.
웹사이트에 쓸 것도 래스터화해야 하나요?
대개는 아닙니다. SVG는 어떤 화면 밀도에서도 또렷하고 PNG보다 작은 경우가 많습니다. CSS에 쓸 것이라면 data URI 인코더가 벡터 그대로 둡니다. 뒤에서 받는 쪽이 정말로 SVG를 못 읽을 때만 래스터화하세요.
이 도구로 이어지는 것
SVG 최적화
SVG Optimiser
편집기 잔여 데이터를 지우고 변환을 합치며 좌표 자릿수를 줄이고, 결과를 나란히 비교합니다.
이미지 벡터 변환
Image to SVG
비트맵을 SVG 경로로 추적해 벡터로 만듭니다. 사진보다는 로고·선화에 적합합니다.
SVG 패스 편집기
SVG Path Editor
패스 데이터를 절대·상대 명령으로 바꾸고 이동·확대·회전·방향 뒤집기를 적용하며 경계 상자와 미리보기를 보여 줍니다.
SVG 편집기 · 해설
SVG Editor and Explainer
SVG를 실시간 미리보기 옆에서 고치면서 파일을 해설합니다. viewBox와 확대, 변환, 경로 명령, 상속된 채색, 낭비되는 바이트, <img>·데이터 URI·인라인에서 무엇이 깨지는지 알려 줍니다.
다음 단계
이 도구의 결과를 그대로 받을 수 있는 도구들입니다.
파비콘 생성
Favicon Generator
ICO·PNG·애플 터치 아이콘·웹 매니페스트를 한 번에 만들고 붙여넣을 HTML까지 제공합니다.
이미지 크기 조절
Image Resizer
픽셀·비율·최대 변 길이 기준으로 크기를 바꾸고 가로세로 비율 고정과 일괄 처리를 지원합니다.
PNG 압축
PNG Compressor
색상 수를 줄이고 압축 스트림을 다시 써서 크기 변화 없이 PNG 용량을 줄입니다.
SVG 최적화
SVG Optimiser
편집기 잔여 데이터를 지우고 변환을 합치며 좌표 자릿수를 줄이고, 결과를 나란히 비교합니다.
이미지 배경 제거
Background Remover
단색이나 균일한 배경을 OKLab에서 키잉해 투명한 PNG로 만들고, 브러시로 경계를 다듬을 수 있습니다.
EXIF 정보 삭제
EXIF Remover
화질은 그대로 두고 카메라·GPS·편집 이력 메타데이터만 지웁니다.