SVG를 PNG로 변환

SVG란 무엇이며, 픽셀로 바꾸는 일이 왜 한쪽으로만 열리는가

SVG는 그림이 아닙니다. 그림에 대한 설명입니다 — 도형과 경로와 색과 글자의 목록이며, 저마다 좌표를 달고 있고, 다른 무언가가 읽어서 그리라고 텍스트 파일에 적혀 있습니다. JPG나 PNG는 그 반대입니다. 파일이 적히던 때에 한 번 정해진 픽셀의 격자입니다. 바로 그 하나의 차이가 이 페이지의 모든 것 뒤에 있으며, 이 변환기가 당신에게 반드시 물어야 하고 다른 두 변환기는 결코 묻지 않는 그 한 가지 물음도 거기에 들어갑니다.

• 읽을 수 있는 텍스트입니다. SVG를 아무 텍스트 편집기로나 열면 도형이 그대로 적혀 눈앞에 있고, 그래서 파일이 스스로 어떤 크기라고 말하는지, 또 무엇을 가리키고 있는지를 직접 확인할 수도 있습니다.
• 해상도라는 것이 아예 없습니다. 같은 파일이 마침표만 한 크기에서도 또렷한 아이콘이 되고 벽에 걸린 커다란 포스터에서도 또렷한 그림으로 남습니다. 그림이 어딘가에 저장되어 있는 것이 아니라 그것을 보여 주는 쪽이 그때그때 다시 계산해 내기 때문입니다.
• 잘하는 것은 평평한 그림입니다 — 로고, 아이콘, 도표, 그래프, 지도처럼 찍은 것이 아니라 그린 것 전부입니다. 아주 못하는 것은 사진입니다. 사진에는 설명할 도형이 없고 픽셀 하나마다 파일의 한 줄이 필요할 테니까요.
• 그것을 픽셀로 바꾸는 일이 이 페이지가 하는 일이며, 그 까닭은 거의 언제나 이 형식을 받아 주지 않는 어딘가가 있기 때문입니다. 업로드 양식, 오래된 이미지 편집기, 문서나 발표 자료의 서식, 소셜 미리보기, 전자우편, 인쇄 서비스 같은 곳입니다.

PNG로 바꾸는 것은 그림을 고른 하나의 크기에서 픽셀로 굳히는 일이고, 그것은 한쪽으로만 열리는 문입니다. 도형은 결과 안에 남지 않고 여기의 어떤 설정도 그것을 지키지 않으므로, 뒤에 PNG를 키우는 일은 무엇을 다시 그리는 것이 아니라 그 픽셀을 키우는 것입니다. 그리고 이 페이지는 어떤 벡터 형식도 적지 않습니다 — 그림을 다시 도형으로 되돌리는 일은 이 일의 역이 아니라 답이 다른 별개의 문제입니다. 그러니 SVG는 지니고 계십시오. 여기서 내려받는 것은 하나의 쓰임과 하나의 크기를 위해 만든 사본이며, 두 번째 크기를 얻는 길은 이미 가진 것의 크기를 바꾸는 것이 아니라 원본을 다시 변환하는 것입니다.

너비와 높이 칸에 들어 있는 크기는 어디서 왔는가

벡터에는 자기 픽셀이 없으므로 몇 픽셀로 나올지를 무언가가 정해야 하고, 이 페이지는 파일 스스로가 무엇을 말하고 있는지를 읽는 데서 시작합니다. 그 수가 너비와 높이 칸에 들어가고, 그 옆의 한 문장이 당신의 파일을 이름으로 부르며 그 수를 정확히 세 곳 가운데 어디에서 가져왔는지 말해 줍니다. 변환하기 전에 읽어 둘 만합니다. 셋은 똑같이 믿을 만하지 않고, 어느 쪽을 뜻했는지 말할 수 있는 사람은 당신뿐이기 때문입니다.

• 파일이 자기 크기를 픽셀로 밝히고 있는 경우. 셋 가운데 가장 강한 경우입니다. 그림을 내보낸 누군가가 얼마나 커야 하는지를 말해 두었고, 칸은 그것을 그대로 되풀이할 뿐입니다.
• 파일이 크기를 물리 단위로 — 인치, 센티미터, 밀리미터, 포인트, 파이카로 — 밝히고 있어서 인치당 구십육 픽셀로 환산된 경우. 그것은 웹이 인치라는 말로 뜻하는 바이지 당신 화면을 잰 값이 아닙니다. 인쇄를 위해 준비한 그림은 흔히 이런 모습으로 도착하고, 거기서 나오는 픽셀 크기는 애초에 픽셀과는 무관하던 수를 충실히 옮긴 값입니다.
• 파일이 쓸 만한 크기를 전혀 밝히지 않아서 크기를 대신 viewBox에서 잰 경우. 이것이 두 번 들여다볼 만한 경우입니다. viewBox는 도형이 그려지는 좌표계이지 누군가 고른 크기가 아니므로, 좌표가 영에서 이십사까지 가는 아이콘은 마침표만 한 크기의 그림이 되겠다고 청하는 셈입니다. 아이콘 묶음은 너비와 높이를 백분율로 적어 두는 일도 흔한데, 그것은 이 파일이 갖고 있지 않은 무언가에 대한 크기라서 크기 없음으로 읽히고, 그런 파일도 여기로 옵니다.

셋 가운데 무엇이 답했든 그 수는 읽히는 그 순간에 한 번, 정수 픽셀로 반올림됩니다. 캔버스는 정수 픽셀로 잡히고 소수를 둘 자리가 없기 때문입니다. 그 점이 특히 중요해지는 대목이 하나 있습니다. 나머지 모두가 뒤에 있는 소수가 아니라 당신이 볼 수 있는 반올림된 수에서 계산되므로, 너비가 삼십일 픽셀로 보이는 그림의 두 배는 육십이 픽셀이지 두 번째 반올림이 낳을 육십삼 픽셀이 아닙니다. 화면의 크기와 셈이 쓰는 크기가 같은 크기이며, 칸이 말하는 그대로를 뜻하게 되는 배치는 그것뿐입니다.

필요한 크기 고르기 — 그리고 아무 크기도 밝히지 않는 그림

파일이 말하는 크기는 언제까지나 출발점일 뿐이고, 강요되는 대신 제안됩니다. 두 칸을 둘러싼 모든 것은 흔한 경우에는 생각할 것이 없고 정확해야 하는 경우에도 길이 열려 있도록 놓여 있으며, 그것이 이 페이지와 두 형제 페이지의 차이 전부입니다 — 사진은 이미 가진 크기 그대로 변환되고 정할 것이 없습니다.

• 너비를 적으면 높이가 따라오고 높이를 적으면 너비가 따라오므로, 당신이 따로 계산하지 않아도 그림이 비율을 지킵니다. 그것이 기본인 까닭은 로고를 실수로 일그러뜨리는 일이야말로 아예 못 하게 해 둘 만한 잘못이기 때문입니다.
• 정확한 상자가 정말로 필요할 때는 — 띠 배너의 자리, 크기가 정해진 프로필 그림, 아이콘을 늘어놓은 한 장 — ‘비율 유지’를 끄십시오. 그러면 두 칸은 서로에게서 풀려납니다. 그림은 당신이 청한 만큼 늘어나는데, 그것이 당신이 원한 바이고 동시에 그 일이 기본값이 아니라 일부러 하는 행동인 까닭이기도 합니다.
• 배율이 늘어선 줄은 사람들이 실제로 원하는 크기로 가는 지름길이며, 그 하나하나는 그때 칸에 들어 있는 값이 아니라 파일이 밝힌 크기를 기준으로 잽니다. 그래서 같은 배율을 두 번 눌러도 같은 답이 두 번 나오지, 청하지 않은 무엇으로 불어나지 않습니다.
• 답이 없는 배율은 눌러도 아무 일도 하지 않는 단추가 아니라 고를 수 없는 것으로 보입니다. 이미 거대한 그림에 배율을 걸면 어떤 이미지 형식으로도 나타낼 수 없는 크기에 닿을 수 있고, 조용히 물러서는 조작은 못 한다고 보여 주는 조작보다 나쁘기 때문입니다.

그리고 아무것도 밝히지 않는 파일이 있습니다. 이 도구가 읽을 수 있는 너비와 높이도 없고 잴 viewBox도 없습니다. 들리는 것보다 흔한 일이라, 어떤 편집기에서 그대로 내보낸 그림이나 CSS로 크기를 줄 작정이던 페이지를 위해 손으로 적은 그림이 그렇습니다. 그 안에는 크기가 정말로 없으므로 칸은 빈 채로 열리고, 수가 어디서 왔는지에 대한 문장도 나타나지 않으며, 곱할 것도 지킬 비율도 없고, 그 줄은 물러서면서 당신에게 너비와 높이를 묻습니다. 그 물러섬은 실패가 아니라 요점입니다. 그런 파일을 건네받은 브라우저는 아무도 고르지 않은 작고 고정된 상자로 물러나므로, 그것을 내려받고 한참 뒤에 알게 되는 것보다 한 번 질문을 받는 편이 낫습니다.

크기가 아닌 짝은 그 나름의 말로 거절되며, 그것이 같은 배려의 나머지 반쪽입니다. 영, 음수, 반 픽셀, 또는 어떤 이미지 형식으로도 나타낼 수 없을 만큼 큰 수는 반올림되거나 잘리거나 파일 자신의 크기로 조용히 바뀌지 않고 저마다 거절됩니다 — 아무도 청하지 않은 크기로 변환하는 일이야말로 이 페이지가 하지 않으려고 존재하는 바로 그것입니다. 그리고 당신이 고른 것이 그림이 아니라 사진이라면 크기 칸은 아예 나타나지 않습니다. 래스터 이미지는 자기 크기로 변환되고, 아무것도 바꿀 수 없는 조작은 없느니만 못하기 때문입니다.

어떤 형식으로 그려 낼 것인가

이 페이지가 PNG로 열리는 것은 거의 모든 벡터에 대해 그것이 옳은 답이기 때문이고, 다른 형식들은 또 하나의 페이지 뒤가 아니라 한 번의 누름 앞에 있습니다. 당신이 고르는 것은 픽셀을 정확히 그대로 담는 형식과 그중 얼마를 내주고 더 작은 파일을 얻는 두 형식 사이입니다. 그리고 그림은 유난히 한쪽으로 기운 증거입니다. 평평한 색과 뚜렷한 모서리야말로 손실 압축이 가장 못 다루는 내용이기 때문입니다.

• PNG는 기본이며 대개 그것으로 이야기가 끝납니다. 그려 낸 그림을 정확히 그대로 담고 투명을 실어 나르며 한 가지 색으로 평평한 면을 아주 잘 꾸립니다 — 로고나 아이콘은 대체로 그런 것으로 되어 있으므로, 파일은 이 형식의 평판에서 짐작하는 것보다 작게 나오는 일이 많습니다.
• JPG는 건너편의 무언가가 꼭 그것이어야 한다고 할 때에만 고를 만합니다. 투명을 전혀 담지 못하므로 먼저 그림 뒤에 배경색을 칠해야 하고, 그 압축은 벡터를 그려 내면서까지 지키려던 바로 그 또렷한 모서리와 글자를 따라 잿빛 테를 남깁니다.
• WebP는 웹 페이지를 위한 중간의 답입니다. 투명을 실어 나르고 대개 PNG보다 작습니다. 여기서는 어떤 품질 설정에서도, 조절기의 맨 위에서도 손실이므로, 페이지에 올릴 그림에는 좋은 선택이고 다시 편집할 원본에는 나쁜 선택입니다.
• 셋 가운데 어느 것도 벡터가 아니며, 이 페이지는 어떤 벡터 형식도 적지 않습니다. 크기를 마음대로 바꿀 수 있는 파일이 필요하다면 이미 갖고 있는 SVG가 바로 그것입니다 — 그것을 지니시고, 여기서 내려받는 것은 한 자리를 위해 만든 사본으로 여기십시오.

품질 조절기는 내주고 바꿀 것이 있는 두 형식, 곧 JPG와 WebP에서만 나타납니다. PNG는 아무것도 버리지 않으므로, 자리만 차지하고 아무 일도 하지 않는 조절기를 두는 대신 아예 두지 않습니다. 각 줄이 파일이 나온 크기를 보여 주므로 당신이 하는 거래는 눈앞의 숫자가 됩니다. 그 조절기를 움직이면 가능한 곳에서는 그림을 다시 그려 내는 대신 이미 그려 둔 것을 다시 부호화하고, 크기를 바꾸는 쪽은 다시 그려야만 합니다 — 그것이 옳은 순서입니다. 정말로 다른 픽셀을 내놓는 쪽은 뒤엣것이기 때문입니다.

픽셀로 그려 내면 건너오지 못하는 것

여기서 일어나는 일은 모두 브라우저에 이미 들어 있는 그림 그리는 장치로 이루어집니다. 파일은 그림으로 건네지고, 당신이 고른 크기에서 한 번 그려지며, 청한 형식으로 다시 적힙니다. 그것이 아무것도 업로드하지 않고 아무것도 설치하지 않고 페이지 자체 말고는 아무것도 내려받지 않으면서 이 도구가 일할 수 있는 까닭입니다 — 그리고 벡터의 경우에는 그것이 결과에 무엇이 담길 수 있는지까지 정합니다. SVG는 픽셀 덩어리가 아니라 문서이고, 문서는 무언가를 청할 수 있기 때문입니다.

여기서 건네지는 방식으로는 그것을 얻지 못합니다. 파일 안의 어떤 것도 돌지 않고 파일 밖의 어떤 것도 가져와지지 않습니다. 이는 일부러 만든 성질이고 정말로 값진 성질입니다. SVG는 스크립트를 실을 수 있고, 그림이 화면에 나타나는 순간 요청될 어딘가의 주소에 대한 참조도 실을 수 있습니다. 낯선 사람의 그림을 여기서 열어도 그 어느 쪽도 일어나지 않습니다. 그 안전이 무엇을 대가로 하는지는 아래에 적어 두었고, 그중 앞의 둘은 당신이 알아채기를 기다리는 대신 줄 위에서 알려집니다.

• 파일이 자기 밖을 가리키는 것은 무엇이든 불러와지지 않습니다 — 연결된 이미지, 스타일시트, 글꼴이 그렇습니다. 이는 웹의 주소에 대해서도 참이고 같은 폴더에 놓인 파일에 대해서도 똑같이 참이며 뒤쪽이 훨씬 흔한 경우인데, 그래서 알림은 그것들이 멀리 있었다고 말하는 대신 그 부분이 불러와지지 않는다고 말합니다. 그것들이 맡고 있던 몫은 결과에서 빠지고, 고치는 길은 그것들을 그림 안에 박아 넣고 다시 변환하는 것입니다.
• 글자는 이 컴퓨터에 설치된 글꼴로 그려집니다. 글자는 결과 안에 있고 당신 눈에는 제대로 보이지만, 같은 파일을 다른 컴퓨터에서 그려 내면 다른 서체가 골라져 다른 그림이 나올 수 있습니다. 글자의 모양 자체가 중요하다면 그 파일을 그린 프로그램에서 글자를 경로로 바꾸십시오. 그러면 찾아볼 것이 아예 없어집니다.
• 그림이 시간을 두고 하는 일은 결과에 담기지 않습니다. 내놓는 것은 어떤 형식에서든 한 장의 정지한 그림이므로, 스스로 움직이는 파일은 그려진 그 한 순간만 내놓고, 손길에 반응하던 것도 이 길을 건너오지 못합니다.

내놓는 파일에 대한 두 가지 한계는 나중에 발견되게 두는 대신 분명히 말해 둘 만합니다. PNG는 브라우저 자신의 압축기가 적는데 그것은 쓸 만하지만 철저하지는 않아서, 전용 최적화 도구라면 픽셀 하나 바꾸지 않고도 파일에서 한 겹을 더 깎아 낼 수 있습니다. 그리고 WebP는 어떤 설정에서도 손실 부호화입니다. 브라우저에 이 형식의 무손실 모드를 청할 방법이 아예 없기 때문입니다. 둘 다 진짜 인코더를 페이지 안에서 돌도록 함께 실어 보내면 걷어 낼 수 있지만, 이 도구는 일부러 그렇게 하지 않습니다. 그것은 수백 킬로바이트짜리이고, 그중 일부만 조금 더 작은 파일을 얻자고 찾아오는 모든 사람이 그것을 내려받게 되는데, 다른 모든 페이지가 그려지는 순간 일하는 사이트에서 그렇습니다. 게다가 바로 이 페이지에서는 겉보기보다 얻는 것이 적습니다. 픽셀로 그려 내는 일은 브라우저가 당신의 벡터를 스스로 그린 것이고, 인코더는 그것이 어떻게 그려졌는지를 바꾸지 못합니다.

각 줄이 당신의 그림에 대해 알려 주는 것, 그리고 거절할 때

말없이 일하는 변환기야말로 누군가 검은 배경 위의 로고를 갖게 되거나 가리키고 있던 그림이 빠진 결과를 갖게 되고 며칠 뒤 다른 곳에서 그것을 알게 되는 까닭입니다. 여기의 모든 줄은 그 파일에 실제로 무엇이 행해졌는지에 대한 짧은 설명을 함께 내놓고 — 눈여겨볼 일이 아무것도 없었다면 아무것도 내놓지 않는데, 그 점이 이 알림들을 멈춰 서서 읽을 만한 것으로 지켜 줍니다. 벡터가 만나는 알림은 사진이 만나는 것과 다르고, 이 도구의 알림 가운데 셋은 벡터에는 아예 해당하지 않습니다. 그림에는 버릴 카메라 정보가 없고, 어느 쪽이 위인지 알려 주는 것도 없으며, 잃을 프레임도 없기 때문입니다.

• 그림이 가리키는 무언가가 불러와지지 않습니다. 파일 안에 있지 않은 이미지나 스타일시트나 글꼴을 가리키는 파일에 나타나며, 주소로 가리켰든 옆에 놓인 경로로 가리켰든 마찬가지이고, 한 조각이 빠진 채 나온 결과에 대한 설명이 됩니다.
• 글자가 이 컴퓨터의 글꼴로 그려졌습니다. 그림이 정말로 캔버스 위에 글자를 놓는 경우에만 나타나므로, 속이 빈 글자 요소만 들어 있는 파일은 아무 말도 하지 않고, 글자가 아예 없는 그림도 아무 말도 하지 않습니다.
• 투명이 채워졌고, 어떤 색으로 채워졌는지. JPG로 바꾸려면 그림 뒤에 무언가를 두어야 하고, 목록의 파일이 실제로 그것을 필요로 하는 순간 색 설정이 나타납니다. 이 알림은 가정이 아니라 측정된 것입니다. 그려진 그림에서 정말로 비치는 픽셀이 발견될 때까지 기다리므로, 그려진 것이 화면 전체를 덮는 그림은 JPG로 바꿔도 그에 대해 아무 말도 하지 않습니다.
• 이름과 내용이 어긋납니다. 형식은 파일의 내용으로 정해지고 결코 확장자로 정해지지 않으므로, 누군가 엉뚱한 끝맺음을 붙여 저장해 둔 그림도 실제 그것인 SVG로 옳게 읽혀 변환됩니다 — 그리고 그 사실을 알려 드립니다. 당신 파일에 대한 참인 사실이고 아마 모르고 있던 것이기 때문입니다.
• 이 설정에서도 WebP는 손실입니다. 그림을 픽셀로 바꾼 다음 품질 조절기의 맨 끝을 청하면 그려진 것이 그대로 돌아올 듯한 느낌이 들지만 그렇지 않습니다. 이 알림이 바로잡으려는 것이 그 믿음이고, 그래서 거기에서만 나타나며 그보다 낮은 어느 자리에도 나타나지 않습니다.

파일을 아예 변환할 수 없는 곳에서는 도구가 무언가를 내놓는 대신 까닭을 말합니다. 읽는 형식 가운데 어느 것도 아닌 파일은 이름을 밝혀 거절되고, 지원하는 형식이지만 그 첫머리를 읽을 수 없는 파일도 그러한데 — 그림의 경우 그것은 여는 태그이고, 그것이 벡터가 헤더 대신 가진 유일한 것입니다. 웹 페이지 어딘가에 그림이 들어 있는 것은 이미지 파일이 아니므로 그렇게 거절되고, 겉보기에는 멀쩡했는데 당신의 브라우저가 끝내 그리지 못하는 것으로 드러난 그림도 그렇습니다. 아무것도 짐작하지 않고, 절반만 된 것을 다 된 것처럼 돌려주지도 않습니다.

여기서 만날 가능성이 가장 높은 거절은 크기에 관한 것이고, 그것은 당신의 파일이 아니라 이 페이지에 관한 사실입니다. 배수는 한 번의 누름 거리에 있고, 그림은 어떤 크기를 청해도 선선히 응하며, 벡터 쪽에는 당신을 막을 것이 없습니다. 막는 것은 브라우저인데, 그림을 담아 주는 넓이에 한계가 있습니다. 그 넓이는 휴대폰과 데스크톱에서 다르고, 같은 기계 위의 두 브라우저에서 또 다릅니다. 그것을 넘어도 오류는 전혀 나지 않고, 나오는 것은 몇 킬로바이트짜리 빈 이미지뿐이며 열어 보기 전까지는 끝난 변환처럼 보입니다. 그래서 이 도구는 형태를 하나도 그리기 전에, 청한 크기의 그림에 알고 있는 픽셀 하나를 적어 넣고 곧바로 다시 읽습니다. 돌아오지 않으면 크기가 담긴 거절이 오고 파일은 오지 않습니다. 어디에서도 정해진 수와 견주는 일이 없으니, 당신이 부딪히는 한계는 당신 기기의 것이지 남을 위해 고른 것이 결코 아닙니다.

당신의 그림이 이 탭을 떠나지 않는 까닭

그림은 사진보다 더 많은 것을 내줍니다. 그림은 글자로 된 파일이고, 읽히기 때문입니다. 층의 이름, 내보낸 사람의 이름, 누군가 안에 남긴 주석, 가리키고 있던 조각마다의 주소 — 그 모두가 파일 안에 그대로 적혀 있고, 그 가운데 어느 것도 어디로 가지 않습니다. 당신의 SVG를 읽는 것은 이 브라우저 탭이고, 픽셀로 바꾸는 것은 당신 기기의 처리 장치입니다. 이 페이지의 건너편에는 그런 파일을 받을 수 있는 서버가 없습니다. 그러니 이것은 이 도구가 무엇으로 지어졌는지에 대한 서술이지, 어떻게 운영되는지에 대한 약속이 아닙니다.

브라우저 개발자 도구의 네트워크 패널에서 몇 초면 판가름이 나고, 그림일 때는 볼 것이 하나가 아니라 둘입니다. 당신의 파일을 싣고 나가는 것이 없고, 파일을 대신해 나가는 것도 없습니다. 안에 주소가 아무리 많이 적혀 있어도 마찬가지입니다. 읽히고 난 뒤의 페이지는 다른 어디에서도 도는 코드가 없는 정적 파일 몇 개일 뿐이므로, 네트워크를 완전히 끊고도 원하는 만큼 계속 픽셀로 바꿀 수 있습니다.

• 낯선 사람에게는 보내지 않을 그림도 — 아직 공개하지 않은 로고, 평면도, 내부의 무언가를 그린 도표 — 기기를 조금도 떠나지 않은 채 여기서 픽셀로 바꿀 수 있습니다.
• 픽셀로 바꾸어 나온 것은 당신이 저장하기 전까지 이 탭에 놓여 있고, 탭을 닫는 것이 그 지움의 전부입니다. 가져온 그림도, 거기서 만들어진 그림도 방문 사이에 기억되지 않습니다.
• 온전히 믿기는 어려운 곳에서 온 그림도 여기서 열기에 안전합니다. 그 안의 어떤 것도 돌지 않고 그것이 가리키는 어떤 것도 가져와지지 않기 때문입니다. 픽셀로 그려 내는 일은 그것을 벗겨 내는 방법이기도 합니다. 내려받는 것은 픽셀이고, 픽셀은 아무것도 청하지 못합니다.