# SVG를 이미지로 — 벡터를 원하는 크기의 PNG, JPEG, WebP로
크기를 말하세요. 벡터에는 잃어버릴 자기 크기가 없습니다.
> SVG를 브라우저에서 원하는 크기의 PNG, JPEG, WebP로 바꿉니다. 너비나 배수, 상자 크기를 말하면 @2x와 @3x 사본까지 받습니다. 투명도는 그대로 유지되고 아무것도 업로드되지 않습니다.
이 페이지는 브라우저 안에서만 동작하는 대화형 도구입니다(https://abox.tools/ko/svg-png-변환/). 도구에 넘긴 어떤 것도 업로드되지 않습니다. 아래는 이 페이지가 도구에 대해 글로 설명하는 내용 전부입니다. 도구를 쓰려면 이 주소를 여세요.
## SVG 파일은 **절대 업로드되지 않습니다**. 서버가 아예 없으니까요.
래스터화는 방금 이 그림을 화면에 그린 바로 그 엔진이 합니다. 파일을 디스크에서 읽어, 누구나 읽어 볼 수 있는 `src/svg.js`의 백 줄 남짓이 그 루트 태그를 요청한 크기로 고쳐 쓴 다음, 브라우저가 이미 갖고 있는 캔버스 위에 그립니다. 이 도구에는 네트워크 기능이 하나도 없습니다. 가져올 것도 보낼 것도 없어요. 설령 보내려 해도 이 페이지 반대편에는 로고를 받아 줄 서버 자체가 없습니다.
- ✗ 업로드 없음
- ✗ 가입 없음
- ✗ 워터마크 없음
- ✓ 오프라인 동작
- ✓ 오픈 소스
## 업로드하지 않고 SVG를 PNG로 바꾸는 방법
1. **SVG를 고릅니다.** 하나를 선택 영역에 끌어다 놓거나, 폴더를 골라 통째로 변환하세요. 브라우저가 디스크에서 곧바로 읽습니다. 그동안 어디로도 아무것도 나가지 않습니다. 각 줄에는 그 파일이 스스로 생각하는 크기가 적히는데, 그 크기가 `viewBox`에서 온 것인지 파일이 아무것도 선언하지 않아 가정한 것인지도 구별해 적습니다.
2. **얼마나 크게 할지 말합니다.** 파일 자기 크기의 배수가 가장 빠른 답이고, 여러 장을 한꺼번에 다룰 때 맞는 답입니다. 각 그림이 자기 출발점에서 확대되므로 아이콘 묶음의 비례가 그대로 유지되니까요. 그 밖에는 너비나 높이, 긴 변, 또는 양쪽을 다 준 상자를 지정하세요. 사진과 달리 여기서는 큰 숫자를 쓴다고 대가를 치르지 않습니다. 그 크기로 늘이는 게 아니라 그 크기로 다시 그리는 것이니까요.
3. **필요하다면 고해상도 사본을 추가합니다.** 휴대폰과 레티나 노트북은 CSS 픽셀 하나마다 기기 픽셀 두세 개를 그립니다. 그래서 200픽셀짜리 로고 뒤에는 400이나 600픽셀 파일이 필요합니다. `@2x`와 `@3x`를 요청하면 Xcode와 안드로이드 도구, CSS `image-set()`이 기대하는 이름 그대로 나오고, 각각이 따로 반올림된 것이 아니라 첫 번째의 정확히 두 배, 세 배입니다.
4. **형식을 고르고 투명도를 어떻게 할지 정합니다.** 특별한 이유가 없다면 PNG입니다. 무손실이고, 투명도를 지키며, 단색 면이 잘 압축됩니다. JPEG에는 투명도가 아예 없어서 고르시든 말든 배경색이 칠해집니다. 그러지 않으면 투명한 픽셀이 전부 검게 나오니까요. WebP는 둘 다 되고 파일도 더 작지만, 그걸 읽지 못할 만큼 오래된 소프트웨어가 대가입니다.
5. **내려받기 전에 미리보기를 봅니다.** 파일을 쓰는 바로 그 코드가 내 파일에서, 내 기기에서 그린 것입니다. 그림이 픽셀이 될 때 달라지는 두 가지가 여기 다 드러납니다. 반 픽셀 굵기였던 머리카락 선은 회색이 되고, 글자는 웹에서 가져온 글꼴이 아니라 이 컴퓨터에 있는 글꼴로 그려집니다.
6. **파일을 가져갑니다.** 파일 하나당 내려받기 하나, 또는 전체를 zip 하나로. 이름은 원본 SVG를 따르고 사본에는 `@2x`와 `@3x`가 붙습니다. 이름이 겹칠 뻔한 두 파일은 하나가 다른 하나를 조용히 덮어쓰는 대신 번호가 붙습니다.
## 자세한 설명
[SVG를 알맞은 크기의 PNG로 바꾸는 방법](https://abox.tools/ko/가이드/svg-png-변환하기/): 벡터에는 자기 픽셀 크기가 없으니 숫자는 직접 고르셔야 합니다. 화면과 앱 아이콘, 인쇄기에서 그 숫자가 어디서 나오는지, 그리고 그림이 픽셀이 될 때 무엇이 달라지는지.
## 상자 속 다른 도구
- [이미지를 SVG로](https://abox.tools/ko/이미지-svg-변환/): 형태 하나, 윤곽선 하나. 있으면 안 되는 것은 가리키기만 하세요.
- [키 비교 차트](https://abox.tools/ko/키-비교/): 키를 적으면 그림을 가져갑니다. 그리려고 어디로도 보내지 않습니다.
- [이미지 압축](https://abox.tools/ko/이미지-압축/): 용량만 말씀하세요. 나머지는 알아서 맞춥니다.
- [이미지 크기 조절](https://abox.tools/ko/이미지-크기-조절/): 크기를 말하고, 상자를 그리고, 형식을 고르세요.
## 자주 묻는 질문
### 제 SVG가 어딘가로 업로드되나요?
아닙니다. 파일을 읽는 것은 내 기기에서 도는 내 브라우저이고, 눈에 보이는 다른 모든 그림을 그리는 바로 그 엔진이 캔버스에 그린 다음 내려받기로 돌려줍니다. 이 도구에는 네트워크 기능이 하나도 없어서 무언가를 가져오지도, 보내지도 않습니다. 이 페이지의 `Content-Security-Policy`에 연결해도 되는 주소가 전부 적혀 있는데, 그중 이 사이트 것은 하나도 없습니다.
### SVG를 어떤 크기로 래스터화해야 하나요?
그것을 읽는 쪽이 요구하는 크기에, 보일 화면의 기기 픽셀 비율을 곱한 만큼입니다. CSS 픽셀 200을 차지하는 로고는 레티나 노트북에는 400, 요즘 휴대폰에는 600이 필요한데, 여기 `@2x`와 `@3x` 사본이 그것입니다. 앱 아이콘이나 스토어 등록 이미지라면 스토어가 정확한 숫자를 말해 주고, 그 숫자가 답입니다. 아무도 말해 주지 않았다면 긴 변 1024가 쓸 만한 기본값입니다. 거의 모든 용도에 충분히 크고 메일로 보낼 만큼 작으니까요.
### 크게 만들면 품질이 떨어지나요?
아닙니다. 그 대답이 정직하게 "아니오"인 유일한 자리입니다. 벡터는 픽셀이 아니라 지시라서, 브라우저가 요청받은 크기로 곡선을 다시 그립니다. 24픽셀 아이콘에서 뽑은 4000픽셀은 24픽셀만큼이나 선명합니다. 못 하는 것은 반대 방향입니다. 일단 PNG가 되면 다른 것과 똑같은 픽셀이므로, 결과를 나중에 키우지 말고 처음부터 필요한 크기로 래스터화하세요.
### 제 SVG에는 width도 height도 없습니다. 어떤 크기가 되나요?
`viewBox`가 있으면 그것을 씁니다. 그 너비와 높이는 픽셀이 아니라 사용자 단위이지만, 파일 안에 있는 숫자가 그것뿐이라 브라우저도 그림의 고유 크기로 취급합니다. viewBox마저 없으면 페이지가 그 줄 옆에 *가정함* 이라고 적고 300 × 150을 씁니다. `![]()
`가 그렸을 크기이기도 합니다. 어느 쪽이든 원하는 크기를 지정하면 그 크기로 그려집니다.
### PNG에서 글자가 왜 달라 보이나요?
글꼴이 SVG 안에 들어 있지 않기 때문입니다. 글자를 그리는 SVG는 글꼴 이름만 적어 두고 찾는 일은 기기에 맡기는데, `@import`로 구글 폰트를 가져오는 파일은 여기서 아무것도 얻지 못합니다. `![]()
`를 통해 그려지는 SVG는 무엇도 가져올 수 없거든요. 그 파일이 내 파일을 들고 어디로 신호를 보내지 못하게 막는 것과 같은 규칙입니다. 해법은 모든 디자이너가 이미 아는 그것입니다. 내보내기 전에 그림 프로그램에서 글자를 패스로 변환하세요. 그러면 도형이 되고, 어디서나 똑같이 보입니다.
### 파일 여러 개를 한 번에 변환할 수 있나요?
됩니다. 목록의 모든 SVG가 같은 설정으로 렌더링되고 묶음은 zip 하나로 내려옵니다. 여러 장에는 "파일이 요구하는 크기의 4×" 같은 배수 지정이 보통 맞는 설정입니다. 전부를 같은 픽셀 수로 강제하는 대신 각 그림이 자기 크기에서 확대되기 때문입니다. 아무 줄이나 누르면 그것이 미리보기에 올라옵니다.
### 크기 제한이 있나요?
우리 쪽이 아니라 브라우저 쪽에 있습니다. 캔버스는 한 변이 16,384픽셀을 조금 넘으면 포기하고, 아이폰과 아이패드의 Safari는 면적 약 1,670만 픽셀, 그러니까 4096 × 4096에서 멈춥니다. 그 위로는 빈 이미지를 돌려주는 대신 페이지가 미리 경고합니다. 브라우저가 한계에 부딪히면 하는 일이 그거거든요. `toBlob`이 아무것도 돌려주지 않고, 이유를 설명하는 오류도 없습니다. 1억 픽셀을 넘으면 도구가 거부합니다. 1바이트를 인코딩하기도 전에 캔버스만 400 MB이기 때문입니다.
### 투명한 부분은 어떻게 되나요?
PNG와 WebP에서는 그대로 유지됩니다. JPEG에는 알파 채널이 아예 없어서 요청하시든 말든 그림 전체 뒤에 색이 칠해집니다. 그러지 않으면 투명한 부분이 전부 검게 나오는데, JPEG답다기보다 버그처럼 보이니까요. PNG에 배경색을 고르는 것도 지극히 평범한 요구입니다. 구멍을 남기는 대신 그림을 그 색 위에 눌러 놓습니다.
### 스크립트나 외부 이미지가 든 SVG도 읽을 수 있나요?
읽을 수 있고, 브라우저가 그려 주려는 부분만 정확히 그립니다. `![]()
`로 불러온 SVG는 *secure static mode*에 있습니다. 스크립트는 돌지 않고, 외부 참조는 가져오지 않으며, 애니메이션은 재생되지 않습니다. 첫 프레임이 곧 결과예요. 그래서 원격 ``가 든 파일은 그 부분이 빠진 채로 나옵니다. 브라우저가 대신 거절해 주는 것이고, 이 페이지가 한 번도 본 적 없는 파일을 안심하고 열 수 있는 이유입니다.
### 이미지 크기 조절 도구와는 무엇이 다른가요?
출발점이 다릅니다. 이미지 크기 조절은 JPEG나 PNG 같은 픽셀에서 시작하므로, 크게 만들려면 애초에 없던 디테일을 지어내야 합니다. 이 도구는 그림에서 시작하므로 지어낼 것이 없고, 신경 쓸 만한 상한도 없습니다. 갖고 계신 것이 SVG라면 선명한 결과를 주는 쪽은 이 도구이고, 사진이라면 저쪽입니다.
### 무료인가요? 가입해야 하나요?
무료이고 계정도, 로그인도, 체험판도, 워터마크도 없습니다. 파일 개수나 용량 제한도 없습니다. 그 값을 치를 서버가 없으니까요. 작업은 내 기기에서 일어납니다. 이 사이트는 광고로 유지되는데, 그 광고에도 내 파일에 관한 것은 넘어가지 않습니다.
### 오프라인에서도 되나요?
됩니다. 페이지를 한 번 불러온 다음 인터넷을 끊어도 계속 동작합니다. 아무것도 업로드되지 않는다는 가장 간단한 증명이기도 하고요. 작업물을 어딘가로 보내서 렌더링해 오는 도구라면 선을 뽑는 순간 멈춰 버릴 테니까요.
## 이 약속을 직접 확인하는 방법
- **작업물은 나갈 곳이 없습니다.** 이 페이지가 연결해도 되는 주소는 Content-Security-Policy에 모두 적혀 있는데, 그중 이 사이트 것은 하나도 없습니다. 파일이 모일 만한 수신 지점이 없고, 설령 있더라도 거기로 파일을 보낼 코드가 없습니다.
- **여기서는 아무것도 가져오지 않습니다.** `src/` 어디에도 `fetch`도, `XMLHttpRequest`도, `sendBeacon`도 없습니다. 래스터화 전체가 내 파일의 블롭을 담은 `![]()
` 하나와, 캔버스 위의 `drawImage` 하나, `canvas.toBlob` 하나로 끝납니다.
- **SVG는 문서이고, 여기는 그 문서가 아무것도 할 수 없는 모드입니다.** SVG는 `