SVG를 업로드하지 않고 원하는 크기의 PNG로

Q: 제 SVG에는 width도 height도 없습니다. 어떤 크기가 되나요?

viewBox가 있으면 그것을 씁니다. 그 너비와 높이는 픽셀이 아니라 사용자 단위이지만, 파일 안에 있는 숫자가 그것뿐이라 브라우저도 그림의 고유 크기로 취급합니다. viewBox마저 없으면 페이지가 그 줄 옆에 가정함 이라고 적고 ⁦300 × 150⁩을 씁니다. 가 그렸을 크기이기도 합니다. 어느 쪽이든 원하는 크기를 지정하면 그 크기로 그려집니다.

Q: 스크립트나 외부 이미지가 든 SVG도 읽을 수 있나요?

읽을 수 있고, 브라우저가 그려 주려는 부분만 정확히 그립니다. 로 불러온 SVG는 secure static mode에 있습니다. 스크립트는 돌지 않고, 외부 참조는 가져오지 않으며, 애니메이션은 재생되지 않습니다. 첫 프레임이 곧 결과예요. 그래서 원격 가 든 파일은 그 부분이 빠진 채로 나옵니다. 브라우저가 대신 거절해 주는 것이고, 이 페이지가 한 번도 본 적 없는 파일을 안심하고 열 수 있는 이유입니다.

이 약속을 직접 확인하는 방법

작업물은 나갈 곳이 없습니다. 이 페이지가 연결해도 되는 주소는 Content-Security-Policy에 모두 적혀 있는데, 그중 이 사이트 것은 하나도 없습니다. 파일이 모일 만한 수신 지점이 없고, 설령 있더라도 거기로 파일을 보낼 코드가 없습니다.

여기서는 아무것도 가져오지 않습니다. src/ 어디에도 fetch도, XMLHttpRequest도, sendBeacon도 없습니다. 래스터화 전체가 내 파일의 블롭을 담은 <img> 하나와, 캔버스 위의 drawImage 하나, canvas.toBlob 하나로 끝납니다.

SVG는 문서이고, 여기는 그 문서가 아무것도 할 수 없는 모드입니다. SVG는 <script>도, 원격 <image href="https://…">도, 스타일시트도, 웹폰트도 담을 수 있습니다. 그런데 <img>를 통해 그려질 때 SVG는 명세가 secure static mode라고 부르는 상태에 들어갑니다. 스크립트는 돌지 않고 그 주소 중 어느 것도 요청되지 않습니다. 우리가 하는 약속이 아니라 브라우저가 보장하는 것이고, 이 페이지가 한 번도 본 적 없는 파일을 열어도 그 파일이 어디로 신호를 보낼 수 없는 이유입니다.

구글이 불러오는 것과, 구글에게 주지 않는 것. 광고와 측정 스크립트는 구글에서, 후원 버튼은 Buy Me a Coffee에서 옵니다. 어느 쪽에도 내 그림에 관한 것은 넘어가지 않습니다. 파일을 읽고 크기를 정하고 그리는 코드는 한 줄도 빠짐없이 이 출처에서 제공되고 저장소에 공개되어 있습니다.

오프라인에서도 동작합니다. 네트워크를 끊어도 도구는 그대로입니다. 애초에 네트워크를 쓰는 단계가 없었으니까요. 가장 간단한 증거입니다.

직접 확인해 보세요. 위에 적은 어느 것도 그냥 믿으실 필요는 없습니다. 이 페이지는 저장소 안의 템플릿과 설정을 빌드 스크립트가 찍어 낸 결과이고, 그 스크립트는 누구나 읽고 직접 돌려 볼 수 있습니다. 결과물은 dist 브랜치에 그대로 올라가 있고요. 그래서 실제로 제공되는 파일과 소스를 빌드한 결과를 나란히 놓고 비교해 보실 수 있습니다:

github.com/A-Box-of-Tools/website

먼저 읽어 볼 파일을 꼽자면, Content-Security-Policy는 config/site.toml, 파일 자신의 크기를 어떻게 읽고 루트 태그를 어떻게 고쳐 쓰는지는 src/svg.js, 실제로 래스터화하는 여덟 줄은 src/render.js에 있습니다. <img> 하나, drawImage 하나, toBlob 하나가 전부이고 그 사이에는 아무것도 없습니다.

회사 보안 소프트웨어가 업로드를 경고한다면. 그것은 브라우저에서 파일이 선택되는 순간을 지켜보며, 페이지가 그것을 보낼 생각인지는 알 수 없습니다 — 그래서 고르는 순간에 경고합니다. 여기서는 아무것도 보내지 않습니다. 브라우저 개발자 도구를 열고 네트워크 탭으로 옮긴 뒤 파일을 골라 보세요. 그것을 실어 나르는 요청은 없고, 이 페이지 자체의 로컬 미리보기 말고는 요청 자체가 없습니다. 같은 확인을 IT 팀도 삼십 초면 할 수 있습니다.

1 SVG 파일 고르기

여기에 SVG를 놓으세요 또는 클릭해서 고르기. 여러 개를 한 번에 넣어도 됩니다

2 얼마나 크게 할지 말하기

벡터가 대신 답해 줄 수 없는 유일한 질문입니다. SVG 안에는 픽셀이 없습니다. 그리는 방법이 적혀 있을 뿐이라, 어떤 크기를 말하든 그대로 따릅니다. 아래의 숫자는 사진에서라면 그랬을 법한 한계선이 아닙니다. 24 픽셀 아이콘에서 뽑은 4000픽셀은 24픽셀만큼이나 선명하니까요.

크기를 정하는 기준

곱할 값

목록의 모든 파일이 자기 크기에서 곱해지므로, 서로 다른 크기로 그려진 아이콘 묶음도 서로의 비례를 그대로 지킵니다.

고해상도 사본도 함께 쓰기

3 형식 고르기

화질 90 JPEG와 WebP에만 해당합니다. PNG는 무손실이라 화질 다이얼이 없습니다. 단색 면과 또렷한 가장자리는 손실 인코더가 가장 못 다루는 것인데, SVG를 이루는 것이 대부분 그것입니다. 그래서 사진일 때보다 이 값을 높게 잡아 두었습니다.

형식

배경

4 보고 나서 저장하기

미리보기는 파일을 쓰는 바로 그 코드가, 고르신 파일에서, 이 기기에서 그린 것입니다. 확인할 만한 것은 그림이 픽셀이 될 때 달라지는 두 가지입니다. 반 픽셀 굵기였다가 회색이 되어 버린 머리카락 선, 그리고 웹에서 가져온 글꼴이 아니라 이 기기에 있는 글꼴로 그려지는 글자입니다.

SVG를 넣으면 여기 나타납니다.

{name}: 이 도구는 SVG 파일만 읽습니다. PNG나 JPEG는 이미 픽셀이라, 그런 것에는 이미지 크기 조절이 있습니다. {name}: 이 파일에는 <svg> 요소가 없습니다. 이 파일에는 <svg> 요소가 없습니다. {name}: {why} 이 브라우저는 SVG를 그리지 못했습니다. 올바른 XML이 아닐 수 있습니다. 이 브라우저는 그 크기로 {format}을 쓰지 않았습니다. → {size} → 너무 큼: {why} SVG를 넣으면 어떤 크기로 나오는지 여기에 적힙니다. 파일은 자신을 ⁦{fromWidth} × {fromHeight}⁩로 그립니다. 이것은 ⁦{width} × {height}⁩로 나오며, 그 {times}입니다. 상자를 채우도록 모양이 늘어나서 그림이 일그러집니다. 상자 가운데에 놓이고, 양옆으로 배경이 보입니다. @{d}x에서 ⁦{width} × {height}⁩ 여기에 {list}. ⁦{width} × {height}⁩는 캔버스 한 변의 한계인 {max}픽셀을 넘습니다. 빈 이미지 말고는 아무것도 돌아오지 않습니다. {size}는 브라우저가 감당하는 것보다 많습니다. 아무것도 인코딩하기 전에 캔버스만 {mb} MB입니다. 더 작은 크기가 필요합니다. {size}는 iPhone이나 iPad의 Safari에 있는 {ceiling}메가픽셀 상한을 넘습니다. 데스크톱에서는 되지만 휴대전화에서는 비어서 돌아올 수 있습니다. {n}메가픽셀 손실이 없고, 셋 중에서 모든 소프트웨어가 읽는 유일한 형식입니다. 단색면과 또렷한 가장자리—그림은 대개 그것으로 이루어집니다—가 잘 압축되므로, 래스터로 바꾼 로고는 어차피 JPEG보다 PNG가 더 작은 편입니다. 투명을 담지 못하고, 손실이 하필 이런 그림에서 가장 심하게 드러납니다. 또렷한 가장자리마다 얼룩 고리가 생깁니다. 사진 같은 음영이 주를 이루는 그림에는 쓸 만하지만, 그 밖에는 드뭅니다. PNG처럼 투명을 담고, 같은 품질이면 나머지 둘보다 파일이 작습니다. 요즘 브라우저는 모두 읽지만, 오래된 소프트웨어와 일부 인쇄소는 아직 열지 못합니다. 이 브라우저는 WebP를 쓰지 못해서 대신 PNG가 나옵니다. 나머지 둘 중 하나를 고르세요. 그림에서 투명한 부분은 투명한 채로 남습니다. 그림 전체 뒤에 칠해지므로 파일 안에 투명한 곳은 없습니다. {format}에는 투명이 없어서 이 색이 그림 뒤에 칠해집니다. 그것이 없으면 투명하던 곳은 모두 검게 나옵니다. 나올 크기 그대로 보여 줍니다. {size} 파일의 {times}로 보여 줍니다. 줄인 것이 아니라 벡터에서 다시 그린 것이라, 그 크기에서 실제로 이렇게 보입니다. 바둑판 무늬는 파일에서 투명해질 자리입니다. {a} {b} {a}와 {b} {a} · {b} {a}, {b} {n} B {n} KB {n} MB 이미지 만들기 이미지 {count}개 만들기 파일 한 개 선택됨 파일 {count}개 선택됨 이미지 한 개를 그리는 중… 이미지 {count}개를 그리는 중… {name} 그리는 중… 완료. {name}, {size}, {bytes}. 그림 {drawings}개에서 이미지 {count}개를 썼습니다. 모두 {bytes}. {size} — 파일이 요구하는 크기 {size} — 한 변은 파일에서, 다른 한 변은 viewBox에서 {size} — 픽셀 크기가 없어 viewBox에서 가져옴 {size}로 가정 — 이 파일은 크기도 viewBox도 밝히지 않습니다 이것을 미리보기에 표시 목록에서 {name} 빼기 {size}로 자신을 그리는 {name}에서 — 그것의 {times}. {size}로 자신을 그리는 {name}에서 — 그것의 {times}, 그리고 위 파일의 @{density}x. 내려받기 WebP — 이 브라우저는 쓰지 못합니다 파일은 어디로도 가지 않았습니다. 파일 {total}개를 불러왔고 모두 이 사이트의 것입니다. {platform} 무언가가 {hosts}에 접속했는데, 이 도구는 절대 그러지 않습니다. 살펴볼 만합니다. {platform} 광고와 측정과 후원 버튼을 위한 이 사이트 자신의 스크립트가 호스트 {hosts}곳에서 왔습니다. 그중 어느 쪽도 파일이나 그 1바이트도 받지 않았습니다. 광고와 측정과 후원 버튼을 위한 이 사이트 자신의 스크립트가 호스트 {hosts}곳에서 왔습니다. 그중 어느 쪽도 파일이나 그 1바이트도 받지 않았습니다.

# 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⁩을 씁니다. `<img>`가 그렸을 크기이기도 합니다. 어느 쪽이든 원하는 크기를 지정하면 그 크기로 그려집니다. ### PNG에서 글자가 왜 달라 보이나요? 글꼴이 SVG 안에 들어 있지 않기 때문입니다. 글자를 그리는 SVG는 글꼴 이름만 적어 두고 찾는 일은 기기에 맡기는데, `@import`로 구글 폰트를 가져오는 파일은 여기서 아무것도 얻지 못합니다. `<img>`를 통해 그려지는 SVG는 무엇도 가져올 수 없거든요. 그 파일이 내 파일을 들고 어디로 신호를 보내지 못하게 막는 것과 같은 규칙입니다. 해법은 모든 디자이너가 이미 아는 그것입니다. 내보내기 전에 그림 프로그램에서 글자를 패스로 변환하세요. 그러면 도형이 되고, 어디서나 똑같이 보입니다. ### 파일 여러 개를 한 번에 변환할 수 있나요? 됩니다. 목록의 모든 SVG가 같은 설정으로 렌더링되고 묶음은 zip 하나로 내려옵니다. 여러 장에는 "파일이 요구하는 크기의 4×" 같은 배수 지정이 보통 맞는 설정입니다. 전부를 같은 픽셀 수로 강제하는 대신 각 그림이 자기 크기에서 확대되기 때문입니다. 아무 줄이나 누르면 그것이 미리보기에 올라옵니다. ### 크기 제한이 있나요? 우리 쪽이 아니라 브라우저 쪽에 있습니다. 캔버스는 한 변이 16,384픽셀을 조금 넘으면 포기하고, 아이폰과 아이패드의 Safari는 면적 약 1,670만 픽셀, 그러니까 ⁦4096 × 4096⁩에서 멈춥니다. 그 위로는 빈 이미지를 돌려주는 대신 페이지가 미리 경고합니다. 브라우저가 한계에 부딪히면 하는 일이 그거거든요. `toBlob`이 아무것도 돌려주지 않고, 이유를 설명하는 오류도 없습니다. 1억 픽셀을 넘으면 도구가 거부합니다. 1바이트를 인코딩하기도 전에 캔버스만 400 MB이기 때문입니다. ### 투명한 부분은 어떻게 되나요? PNG와 WebP에서는 그대로 유지됩니다. JPEG에는 알파 채널이 아예 없어서 요청하시든 말든 그림 전체 뒤에 색이 칠해집니다. 그러지 않으면 투명한 부분이 전부 검게 나오는데, JPEG답다기보다 버그처럼 보이니까요. PNG에 배경색을 고르는 것도 지극히 평범한 요구입니다. 구멍을 남기는 대신 그림을 그 색 위에 눌러 놓습니다. ### 스크립트나 외부 이미지가 든 SVG도 읽을 수 있나요? 읽을 수 있고, 브라우저가 그려 주려는 부분만 정확히 그립니다. `<img>`로 불러온 SVG는 *secure static mode*에 있습니다. 스크립트는 돌지 않고, 외부 참조는 가져오지 않으며, 애니메이션은 재생되지 않습니다. 첫 프레임이 곧 결과예요. 그래서 원격 `<image>`가 든 파일은 그 부분이 빠진 채로 나옵니다. 브라우저가 대신 거절해 주는 것이고, 이 페이지가 한 번도 본 적 없는 파일을 안심하고 열 수 있는 이유입니다. ### 이미지 크기 조절 도구와는 무엇이 다른가요? 출발점이 다릅니다. 이미지 크기 조절은 JPEG나 PNG 같은 픽셀에서 시작하므로, 크게 만들려면 애초에 없던 디테일을 지어내야 합니다. 이 도구는 그림에서 시작하므로 지어낼 것이 없고, 신경 쓸 만한 상한도 없습니다. 갖고 계신 것이 SVG라면 선명한 결과를 주는 쪽은 이 도구이고, 사진이라면 저쪽입니다. ### 무료인가요? 가입해야 하나요? 무료이고 계정도, 로그인도, 체험판도, 워터마크도 없습니다. 파일 개수나 용량 제한도 없습니다. 그 값을 치를 서버가 없으니까요. 작업은 내 기기에서 일어납니다. 이 사이트는 광고로 유지되는데, 그 광고에도 내 파일에 관한 것은 넘어가지 않습니다. ### 오프라인에서도 되나요? 됩니다. 페이지를 한 번 불러온 다음 인터넷을 끊어도 계속 동작합니다. 아무것도 업로드되지 않는다는 가장 간단한 증명이기도 하고요. 작업물을 어딘가로 보내서 렌더링해 오는 도구라면 선을 뽑는 순간 멈춰 버릴 테니까요. ## 이 약속을 직접 확인하는 방법 - **작업물은 나갈 곳이 없습니다.** 이 페이지가 연결해도 되는 주소는 Content-Security-Policy에 모두 적혀 있는데, 그중 이 사이트 것은 하나도 없습니다. 파일이 모일 만한 수신 지점이 없고, 설령 있더라도 거기로 파일을 보낼 코드가 없습니다. - **여기서는 아무것도 가져오지 않습니다.** `src/` 어디에도 `fetch`도, `XMLHttpRequest`도, `sendBeacon`도 없습니다. 래스터화 전체가 내 파일의 블롭을 담은 `<img>` 하나와, 캔버스 위의 `drawImage` 하나, `canvas.toBlob` 하나로 끝납니다. - **SVG는 문서이고, 여기는 그 문서가 아무것도 할 수 없는 모드입니다.** SVG는 `<script>`도, 원격 `<image href="https://…">`도, 스타일시트도, 웹폰트도 담을 수 있습니다. 그런데 `<img>`를 통해 그려질 때 SVG는 명세가 *secure static mode*라고 부르는 상태에 들어갑니다. 스크립트는 돌지 않고 그 주소 중 어느 것도 요청되지 않습니다. 우리가 하는 약속이 아니라 브라우저가 보장하는 것이고, 이 페이지가 한 번도 본 적 없는 파일을 열어도 그 파일이 어디로 신호를 보낼 수 없는 이유입니다. - **구글이 불러오는 것과, 구글에게 주지 않는 것.** 광고와 측정 스크립트는 구글에서, 후원 버튼은 Buy Me a Coffee에서 옵니다. 어느 쪽에도 내 그림에 관한 것은 넘어가지 않습니다. 파일을 읽고 크기를 정하고 그리는 코드는 한 줄도 빠짐없이 이 출처에서 제공되고 저장소에 공개되어 있습니다. - **오프라인에서도 동작합니다.** 네트워크를 끊어도 도구는 그대로입니다. 애초에 네트워크를 쓰는 단계가 없었으니까요. 가장 간단한 증거입니다. **직접 확인해 보세요.** 위에 적은 어느 것도 그냥 믿으실 필요는 없습니다. 이 페이지는 저장소 안의 템플릿과 설정을 빌드 스크립트가 찍어 낸 결과이고, 그 스크립트는 누구나 읽고 직접 돌려 볼 수 있습니다. 결과물은 `dist` 브랜치에 그대로 올라가 있고요. 그래서 실제로 제공되는 파일과 소스를 빌드한 결과를 나란히 놓고 비교해 보실 수 있습니다: https://github.com/A-Box-of-Tools/website 먼저 읽어 볼 파일을 꼽자면, Content-Security-Policy는 `config/site.toml`, 파일 자신의 크기를 어떻게 읽고 루트 태그를 어떻게 고쳐 쓰는지는 `src/svg.js`, 실제로 래스터화하는 여덟 줄은 `src/render.js`에 있습니다. <img> 하나, `drawImage` 하나, `toBlob` 하나가 전부이고 그 사이에는 아무것도 없습니다.

자주 묻는 질문

제 SVG가 어딘가로 업로드되나요?

아닙니다. 파일을 읽는 것은 내 기기에서 도는 내 브라우저이고, 눈에 보이는 다른 모든 그림을 그리는 바로 그 엔진이 캔버스에 그린 다음 내려받기로 돌려줍니다. 이 도구에는 네트워크 기능이 하나도 없어서 무언가를 가져오지도, 보내지도 않습니다. 이 페이지의 Content-Security-Policy에 연결해도 되는 주소가 전부 적혀 있는데, 그중 이 사이트 것은 하나도 없습니다.

SVG를 어떤 크기로 래스터화해야 하나요?

그것을 읽는 쪽이 요구하는 크기에, 보일 화면의 기기 픽셀 비율을 곱한 만큼입니다. CSS 픽셀 200을 차지하는 로고는 레티나 노트북에는 400, 요즘 휴대폰에는 600이 필요한데, 여기 @2x와 @3x 사본이 그것입니다. 앱 아이콘이나 스토어 등록 이미지라면 스토어가 정확한 숫자를 말해 주고, 그 숫자가 답입니다. 아무도 말해 주지 않았다면 긴 변 1024가 쓸 만한 기본값입니다. 거의 모든 용도에 충분히 크고 메일로 보낼 만큼 작으니까요.

크게 만들면 품질이 떨어지나요?

아닙니다. 그 대답이 정직하게 "아니오"인 유일한 자리입니다. 벡터는 픽셀이 아니라 지시라서, 브라우저가 요청받은 크기로 곡선을 다시 그립니다. 24픽셀 아이콘에서 뽑은 4000픽셀은 24픽셀만큼이나 선명합니다. 못 하는 것은 반대 방향입니다. 일단 PNG가 되면 다른 것과 똑같은 픽셀이므로, 결과를 나중에 키우지 말고 처음부터 필요한 크기로 래스터화하세요.

제 SVG에는 width도 height도 없습니다. 어떤 크기가 되나요?

viewBox가 있으면 그것을 씁니다. 그 너비와 높이는 픽셀이 아니라 사용자 단위이지만, 파일 안에 있는 숫자가 그것뿐이라 브라우저도 그림의 고유 크기로 취급합니다. viewBox마저 없으면 페이지가 그 줄 옆에 가정함 이라고 적고 ⁦300 × 150⁩을 씁니다. <img>가 그렸을 크기이기도 합니다. 어느 쪽이든 원하는 크기를 지정하면 그 크기로 그려집니다.

PNG에서 글자가 왜 달라 보이나요?

글꼴이 SVG 안에 들어 있지 않기 때문입니다. 글자를 그리는 SVG는 글꼴 이름만 적어 두고 찾는 일은 기기에 맡기는데, @import로 구글 폰트를 가져오는 파일은 여기서 아무것도 얻지 못합니다. <img>를 통해 그려지는 SVG는 무엇도 가져올 수 없거든요. 그 파일이 내 파일을 들고 어디로 신호를 보내지 못하게 막는 것과 같은 규칙입니다. 해법은 모든 디자이너가 이미 아는 그것입니다. 내보내기 전에 그림 프로그램에서 글자를 패스로 변환하세요. 그러면 도형이 되고, 어디서나 똑같이 보입니다.

파일 여러 개를 한 번에 변환할 수 있나요?

됩니다. 목록의 모든 SVG가 같은 설정으로 렌더링되고 묶음은 zip 하나로 내려옵니다. 여러 장에는 "파일이 요구하는 크기의 4×" 같은 배수 지정이 보통 맞는 설정입니다. 전부를 같은 픽셀 수로 강제하는 대신 각 그림이 자기 크기에서 확대되기 때문입니다. 아무 줄이나 누르면 그것이 미리보기에 올라옵니다.

크기 제한이 있나요?

우리 쪽이 아니라 브라우저 쪽에 있습니다. 캔버스는 한 변이 16,384픽셀을 조금 넘으면 포기하고, 아이폰과 아이패드의 Safari는 면적 약 1,670만 픽셀, 그러니까 ⁦4096 × 4096⁩에서 멈춥니다. 그 위로는 빈 이미지를 돌려주는 대신 페이지가 미리 경고합니다. 브라우저가 한계에 부딪히면 하는 일이 그거거든요. toBlob이 아무것도 돌려주지 않고, 이유를 설명하는 오류도 없습니다. 1억 픽셀을 넘으면 도구가 거부합니다. 1바이트를 인코딩하기도 전에 캔버스만 400 MB이기 때문입니다.

투명한 부분은 어떻게 되나요?

PNG와 WebP에서는 그대로 유지됩니다. JPEG에는 알파 채널이 아예 없어서 요청하시든 말든 그림 전체 뒤에 색이 칠해집니다. 그러지 않으면 투명한 부분이 전부 검게 나오는데, JPEG답다기보다 버그처럼 보이니까요. PNG에 배경색을 고르는 것도 지극히 평범한 요구입니다. 구멍을 남기는 대신 그림을 그 색 위에 눌러 놓습니다.

스크립트나 외부 이미지가 든 SVG도 읽을 수 있나요?

읽을 수 있고, 브라우저가 그려 주려는 부분만 정확히 그립니다. <img>로 불러온 SVG는 secure static mode에 있습니다. 스크립트는 돌지 않고, 외부 참조는 가져오지 않으며, 애니메이션은 재생되지 않습니다. 첫 프레임이 곧 결과예요. 그래서 원격 <image>가 든 파일은 그 부분이 빠진 채로 나옵니다. 브라우저가 대신 거절해 주는 것이고, 이 페이지가 한 번도 본 적 없는 파일을 안심하고 열 수 있는 이유입니다.

이미지 크기 조절 도구와는 무엇이 다른가요?

출발점이 다릅니다. 이미지 크기 조절은 JPEG나 PNG 같은 픽셀에서 시작하므로, 크게 만들려면 애초에 없던 디테일을 지어내야 합니다. 이 도구는 그림에서 시작하므로 지어낼 것이 없고, 신경 쓸 만한 상한도 없습니다. 갖고 계신 것이 SVG라면 선명한 결과를 주는 쪽은 이 도구이고, 사진이라면 저쪽입니다.

무료인가요? 가입해야 하나요?

무료이고 계정도, 로그인도, 체험판도, 워터마크도 없습니다. 파일 개수나 용량 제한도 없습니다. 그 값을 치를 서버가 없으니까요. 작업은 내 기기에서 일어납니다. 이 사이트는 광고로 유지되는데, 그 광고에도 내 파일에 관한 것은 넘어가지 않습니다.

오프라인에서도 되나요?

됩니다. 페이지를 한 번 불러온 다음 인터넷을 끊어도 계속 동작합니다. 아무것도 업로드되지 않는다는 가장 간단한 증명이기도 하고요. 작업물을 어딘가로 보내서 렌더링해 오는 도구라면 선을 뽑는 순간 멈춰 버릴 테니까요.