SVG PNG 변환기

사용 방법

1. .svg 파일을 상자에 끌어 놓거나 클릭해서 고릅니다. 여러 개를 한 번에 골라도 됩니다. 코드를 바로 변환하려면 ‘SVG 코드 붙여넣기’를 엽니다. 클립보드에 SVG 코드나 SVG 파일이 있으면 페이지 어디서든 Ctrl/⌘+V로 변환할 수 있습니다.
2. 변환 결과가 바로 나타나고, 위쪽에 픽셀 크기와 파일 크기가 표시됩니다.
3. ‘크기’에서 배율(1x–4x 또는 임의의 수), 너비, 높이, ‘너비 × 높이’ 중 하나를 고릅니다. 너비나 높이만 정하면 가로세로 비율을 유지합니다.
4. 형식(PNG, JPEG, WebP)과 배경(투명, 흰색, 원하는 색)을 고릅니다. 설정을 바꾸면 결과도 바로 바뀝니다.
5. ‘PNG 다운로드’를 누릅니다. 파일이 여러 개면 줄마다 있는 버튼이나 ‘모두 다운로드(.zip)‘를 씁니다.

네이버 블로그에 SVG 도표 올리기

네이버 고객센터의 블로그 사진 첨부 안내에 따르면 스마트에디터 ONE이 받는 형식은 JPG, GIF, PNG, BMP, WEBP이고, 사진 한 장은 최대 20MB입니다. SVG는 목록에 없으므로 먼저 변환해야 합니다. 아래는 2026-09-30 macOS의 Chrome 152에서 잰 결과입니다. 입력은 viewBox=“0 0 960 400”에 ‘요청’, ‘응답’ 두 상자를 그리고, 글꼴은 CSS @import로 Google Fonts의 Noto Sans KR을 불러오도록 쓴 도표입니다.

두 경우 모두 미리보기 아래에 CSS가 참조한 https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@700을 불러오지 않는다는 안내가 나오고, 글자는 이 Mac에 설치된 글꼴로 그려집니다. 블로그에 올릴 글꼴을 고정하려면 글꼴 파일을 data: URI로 @font-face에 넣거나, 디자인 도구에서 글자를 윤곽선으로 바꾼 뒤 SVG를 내보내세요. 같은 안내 페이지는 사진 파일명을 영문·숫자로 바꿔 올리라고 권합니다. 이 도구는 원래 파일명을 그대로 쓰므로, SVG 파일 이름을 먼저 영문으로 지어 두면 편합니다.

출력 크기를 정하는 규칙

1x에서는 SVG 루트 요소에 적힌 크기로 내보냅니다. 단위는 CSS 절대 길이 기준입니다(1in = 96px, 1mm = 96/25.4px).

그리기 전에 출력 크기를 SVG의 width와 height에 적고, viewBox가 없으면 채워 넣습니다. 작은 그림을 늘리는 대신 최종 해상도로 벡터를 다시 그립니다. ‘너비 × 높이’의 비율이 SVG와 다르면 SVG의 preserveAspectRatio대로(기본은 가운데) 배치하고 알려 줍니다.

자동으로 고치거나 알려 주는 것

• xmlns 누락: HTML 안에 쓴 <svg>에는 xmlns가 필요 없어서, 웹 페이지나 React 컴포넌트에서 복사한 코드에는 흔히 빠져 있습니다. 이대로 저장한 SVG는 이미지로 열리지 않으므로 xmlns=“http://www.w3.org/2000/svg”를 채워 변환하고 그 사실을 표시합니다.
• 외부 참조: <img>로 그려지는 SVG는 SVG Integration 명세의 secure animated mode로 처리되어 스크립트와 외부 파일을 쓰지 못합니다. Chrome은 외부 <image>를 ‘이미지 없음’ 아이콘으로 그려 버리기 때문에, 링크를 지우고 주소를 목록으로 보여 줍니다.
• XML 오류: 예를 들어 글자 안에 HTML 엔티티  가 있으면 몇 번째 줄인지 알려 주고  로 바꾸라고 안내합니다.
• <foreignObject>: Chrome은 SVG 안의 HTML을 그린 canvas를 내보내지 못하게 막습니다. 빈 결과 대신 원인을 표시합니다.

변환 전에 SVG 용량을 줄이려면 SVG 최적화, React 컴포넌트로 쓰려면 SVG → JSX, PNG를 CSS나 HTML에 바로 넣으려면 이미지 Base64 변환을 이어서 쓰세요.

다른 변환기와 비교

2026-09-30 데스크톱 Chrome에서 같은 파일로 확인했습니다.

크기 계산은 bokgoon.com이 정확했습니다(width=“200” viewBox=“0 0 24 12” → 200×100, 50mm → 189×94). svgtopng.com은 같은 파일을 400×24로 눌러서 내보냈습니다. 두 곳 모두 브라우저 안에서 변환하며 여러 파일을 한 번에 받습니다.

제한 사항

• 그리기는 브라우저 자체의 SVG 엔진이 맡으므로 Chrome, Firefox, Safari 사이에 글자 안티에일리어싱과 필터 결과가 조금 다를 수 있습니다.
• 글자는 이 기기에 설치된 글꼴로 그려집니다. 다른 PC에서는 글꼴이 달라질 수 있습니다.
• <foreignObject>가 든 SVG는 Chrome(152에서 확인)과 같은 엔진을 쓰는 Edge에서 내보낼 수 없습니다.
• SMIL 애니메이션이 있는 SVG는 첫 프레임만 저장합니다.
• canvas에서 WebP를 인코딩하지 못하는 브라우저는 PNG를 돌려주며, 이 도구는 그 PNG를 저장하고 알려 줍니다.
• .svgz(gzip으로 압축한 SVG)는 지원하지 않습니다. 압축을 푼 뒤 여세요.

명령줄에서 일괄 변환

파일이 많거나 빌드 단계에 넣어야 한다면 librsvg로 SVG를 그리는 Node.js 라이브러리 sharp를 쓸 수 있습니다. sharp 0.34.5(librsvg 2.61.2)로 viewBox만 있는 24 × 24 아이콘을 변환한 결과:

import sharp from 'sharp'; // npm install sharp

await sharp('icon.svg').resize(512, 512).png().toFile('icon-512.png');   // 512 × 512
await sharp('icon.svg', { density: 288 }).png().toFile('[email protected]');   // 4 × the SVG size

resize나 density를 지정하지 않으면 PNG는 SVG 자체 크기(여기서는 24 × 24)가 됩니다. 기본 밀도는 72이므로 density: 288이면 96 × 96입니다. librsvg는 브라우저와 다른 렌더러여서 웹 폰트나 CSS @import에 의존하는 글자는 다르게 보일 수 있습니다. 폴더 전체를 변환하기 전에 파일 하나를 이 페이지 결과와 비교해 보세요.