SVG를 그림 파일로 바꾸는 이유
SVG는 점·선·면을 좌표와 숫자로 적어 둔 벡터 그림 파일입니다. 내용이 글자(XML)라 크기를 키워도 계단 현상이 없어서 로고·아이콘·도면을 주고받을 때 많이 씁니다. 반면 PNG·JPG는 정해진 수의 픽셀(점)로 된 그림이라 어디서나 바로 열립니다.
웹 브라우저와 디자인 프로그램은 SVG를 열지만, 문서 프로그램·메신저·쇼핑몰이나 게시판의 이미지 올리기처럼 PNG·JPG만 받는 곳이 아직 많습니다. 이럴 때 SVG를 필요한 크기의 PNG·JPG로 한 번 그려 두면 됩니다.
변환하는 방법
- 변환할 SVG 파일을 선택합니다. 여러 개를 한꺼번에 골라도 됩니다.
- 저장 형식을 고릅니다. 투명 배경을 살리려면 PNG, 배경을 채운 일반 그림이 필요하면 JPG입니다.
- 크기를 고릅니다. 목록에 파일마다 변환 기준 크기와 결과 픽셀 크기가 나옵니다.
- 변환을 누르고 미리보기를 확인한 뒤 하나씩 저장하거나 ZIP으로 한꺼번에 받습니다.
결과 크기 정하기
이 도구의 변환 기준 크기는 SVG 맨 바깥 svg 태그의 width·height입니다. mm·pt처럼 실제 길이 단위로 적혀 있으면 CSS 규칙(1인치 = 96px)으로 픽셀 수를 셉니다. width·height가 없거나 %·em 같은 상대 단위면 viewBox의 폭·높이를 픽셀 수로 쓰고, 한쪽만 있으면 viewBox 비율로 나머지를 채웁니다. viewBox 숫자 자체가 픽셀 크기라는 뜻은 아니고, 크기 정보가 없는 SVG를 위한 이 도구의 기준입니다.
| SVG 단위 | 1단위 = px | 근거 |
|---|---|---|
| px · 단위 없음 | 1 | 기준 단위 |
| in(인치) | 96 | 1in = 96px |
| pt(포인트) | 1.333… | 1pt = 1/72in |
| pc(파이카) | 16 | 1pc = 1/6in |
| cm | 37.795… | 1in = 2.54cm |
| mm | 3.7795… | 1mm = 1/10cm |
| Q | 0.9448… | 1Q = 1/40cm |
크기는 배율(1·2·3·4배)이나 가로 픽셀로 정합니다. 배율은 기준 크기에 곱해 가로·세로를 각각 반올림하고, 가로 픽셀을 정하면 세로는 원래 비율로 반올림합니다. SVG는 저장할 크기로 다시 그리므로 배율을 올려도 선이 흐려지지 않습니다.
- 24×24 아이콘을 4배로: 96×96px
- A4(width 210mm·height 297mm) 도면을 1배로: 794×1,123px, 2배로: 1,587×2,245px
- 300×100 로고를 가로 1000px로: 1,000×333px
결과 그림 한 장은 긴 변 16,384px, 4,000만 화소까지 만듭니다. 아이폰·아이패드 Safari는 한 장에 약 1,680만 화소까지만 그릴 수 있어, 그보다 크게 고르면 기기에서 저장되지 않을 수 있습니다. 제출처가 정한 용량(KB)에 맞춰야 하면 변환한 PNG·JPG를 사진·이미지 용량 줄이기에서 줄이세요.
원본과 다르게 보일 때
브라우저는 그림으로 쓰는 SVG를 안전하게 그리기 위해 일부 기능을 끕니다. W3C SVG Integration 문서는 HTML 그림으로 쓰는 SVG에서 스크립트를 실행하지 않고 바깥 자료를 불러오지 않도록 정합니다. 이 도구도 같은 방식으로 그리므로 다음 경우에는 결과가 디자인 프로그램 화면과 다를 수 있습니다.
- 바깥 주소의 그림·글꼴·CSS — https:// 주소로 연결한 그림은 불러오지 않아 그 자리가 비거나 브라우저에 따라 깨진 그림 표시로 나오고, 글꼴은 이 기기의 다른 글꼴로 대신 그려집니다. 그림은 SVG 안에 포함(임베드)하고, 글자는 윤곽선(패스)으로 바꿔 저장하세요.
- 애니메이션 — 움직임은 담지 않고 브라우저가 그려 주는 정지 화면 한 장으로 저장되며, 특정 장면을 고를 수는 없습니다.
- SVG 안의 CSS가 크기를 정한 경우 — svg 태그의 style에 적힌 width·height는 빼고 그리지만, style 요소의 CSS가 그림 크기를 바꾸면 비율이 어긋나므로 그 파일은 변환하지 않고 알려 줍니다.
- HTML을 품은 SVG(foreignObject) — 브라우저에 따라 보안 규칙 때문에 그림 저장이 막힐 수 있습니다.
- 압축된 .svgz — 압축을 풀어 .svg로 만든 뒤 선택하세요.
PNG와 JPG 고르기
로고·아이콘처럼 배경이 비어 있고 색 경계가 또렷한 그림은 PNG가 맞습니다. 투명한 부분이 그대로 남고 압축해도 선이 뭉개지지 않습니다. 투명 배경을 받지 않는 곳이나 용량을 줄여야 할 때는 JPG를 고르고, 투명했던 부분을 채울 배경색과 품질을 정합니다. 품질을 낮출수록 용량이 작아지지만 경계에 얼룩이 생기기 쉽습니다.
웹사이트 파비콘처럼 여러 크기가 든 아이콘 파일이 필요하면 PNG ICO 변환에서 SVG를 바로 ICO로 만들 수 있고, 일러스트레이터 원본(.ai)은 AI 파일 열기에서 그림으로 저장합니다.
자주 묻는 질문
SVG를 PNG로 바꾸면 화질이 떨어지나요?▾
SVG는 선과 면을 좌표로 적은 벡터 그림이라, 저장할 크기에 맞춰 다시 그리므로 그 크기에서는 선명합니다. 다만 PNG·JPG로 바꾼 뒤 그림을 다시 키우면 픽셀이 커져 흐려지므로, 쓸 크기를 정해 처음부터 그 크기(배율이나 가로 픽셀)로 저장하세요.
투명 배경이 그대로 남나요?▾
PNG로 저장하면 SVG의 투명한 부분이 그대로 투명하게 남습니다. JPG는 투명도를 담지 못하는 형식이라 고른 배경색(기본 흰색)으로 채웁니다.
크기를 정할 수 없다며 변환되지 않아요.▾
SVG 맨 바깥 svg 태그에 width·height도 viewBox도 없거나, width·height가 %처럼 상대 단위뿐이고 viewBox가 없으면 변환 기준 크기를 정할 수 없습니다. viewBox 값이 0·음수처럼 틀린 경우도 같습니다. 디자인 프로그램에서 문서(아트보드) 크기를 정해 다시 저장하면 됩니다.
글자가 원래와 다른 글꼴로 나와요.▾
SVG가 글꼴 파일을 바깥 주소에서 불러오거나 이 기기에 없는 글꼴을 쓰면, 그림으로 그릴 때 그 글꼴을 불러오지 않아 기기의 다른 글꼴로 대신 그려집니다. 디자인 프로그램에서 글자를 윤곽선(패스)으로 바꿔 저장한 SVG를 쓰면 모양이 그대로 나옵니다.
여러 파일을 한 번에 바꿀 수 있나요?▾
한 번에 30개(파일당 10MB)까지 선택할 수 있습니다. 같은 형식·크기 설정으로 차례로 변환하고, 결과는 하나씩 저장하거나 ZIP 파일 하나로 받습니다.
PNG·JPG를 SVG로 바꿀 수도 있나요?▾
이 도구는 SVG를 PNG·JPG 그림으로 바꾸는 방향만 합니다. 픽셀 그림을 SVG로 바꾸려면 윤곽을 따라 선을 새로 그리는 벡터화 작업이 필요해 여기서는 다루지 않습니다.
파일이 서버로 전송되나요?▾
아니요. SVG를 읽고 그림으로 그려 PNG·JPG로 저장하는 과정이 모두 현재 브라우저 안에서 진행되며 파일을 서버로 보내지 않습니다.
길이 단위 환산은 W3C CSS Values and Units Module Level 4(2024년 3월 작업 초안) 6.2절 절대 길이, 그림으로 쓰는 SVG의 제한은 W3C SVG Integration(2014년 4월 작업 초안)의 처리 모드를 따랐습니다. 실제 그리는 결과는 브라우저에 따라 조금 다를 수 있습니다.