SVG를 PNG로 — 업로드 없이 벡터 그래픽을 원하는 크기로 렌더링

사람들은 흔히 "품질 손실 없이" SVG를 PNG로 변환하는 방법을 묻는데, 이 질문에는 먼저 짚고 넘어갈 오해가 담겨 있습니다. SVG에는 잃을 품질이 없습니다. 애초에 픽셀이 전혀 없기 때문입니다.

벡터는 설명하고, 픽셀은 저장합니다

SVG는 고정된 픽셀 크기가 없는 좌표계 안에서 도형(곡선, 채우기, 텍스트)을 설명한 것입니다. PNG는 고정된 픽셀 격자입니다. 따라서 SVG를 PNG로 변환한다는 것은 언제나 크기를 선택한다는 뜻이며, 어떤 크기를 선택하든 결과는 선명합니다.

SVG를 텍스트 편집기로 열면 명령어들이 보입니다. 이 점으로 이동하고, 저 점까지 곡선을 그리고, 이 색으로 채워라. 그림이 몇 픽셀 너비인지는 어디에도 적혀 있지 않습니다. 브라우저가 표시할 때 결정하며, 매번 다르게 결정해도 됩니다.

viewBox, width, height가 실제로 뜻하는 것

루트 요소의 세 가지 속성이 크기를 제어합니다. viewBox는 좌표계를 정의합니다. "이 그림은 가로 0~240, 세로 0~160에 걸쳐 있다"는 식입니다. width와 height는 있을 경우 기본 표시 크기를 제안합니다. 많은 SVG가 viewBox만 갖고 있고, 일부는 width와 height만, 소수는 둘 다 없습니다.

이 변환기는 존재하는 속성을 읽어 브라우저와 같은 방식으로 고유 크기를 계산하고 이를 1× 기준으로 사용합니다. 아무것도 선언되지 않았다면 1,024픽셀로 대체하여 여전히 쓸 만한 이미지를 얻을 수 있게 합니다.

"품질 손실 없이"가 잘못된 질문인 이유

SVG는 같은 명령어로 어떤 크기로든 렌더링할 수 있으므로, 4,000픽셀 PNG는 400픽셀 PNG와 정확히 같은 선명도를 갖습니다. 렌더러가 더 많은 디테일을 그릴 뿐입니다. 품질을 잃는 유일한 방법은 작게 렌더링한 뒤 나중에 PNG를 확대하는 것입니다. 해결책은 여기서, 변환 시점에 최종 크기를 정하고 PNG를 절대 확대하지 않는 것입니다.

이 도구는 브라우저에서 SVG 파일을 읽고, 실행 가능한 요소를 모두 제거한 뒤, 브라우저 자체 엔진으로 선택한 크기에 맞춰 하나씩 렌더링하고, 투명도를 그대로 유지한 무손실 PNG를 개별 파일 또는 ZIP으로 돌려줍니다.

브라우저와 같은 렌더러

서버 측 변환기는 librsvg, Inkscape, ImageMagick 같은 별도 라이브러리를 사용하며 저마다 빈틈이 있습니다. 지원하지 않는 필터, 대체되는 글꼴, 미묘하게 다르게 그려지는 그라데이션. 돌려받은 PNG가 여러분이 본 SVG와 일치하지 않을 수 있습니다.

여기서는 사용 중인 브라우저에 따라 Blink, Gecko, WebKit이 렌더링을 맡아 SVG를 캔버스에 그립니다. SVG가 브라우저에서 제대로 보인다면 PNG도 똑같이 보입니다. 말 그대로 같은 그림이기 때문입니다.

스크립트 제거, 업로드 없음

SVG는 XML이므로 <script> 요소, onload 핸들러, 내장 HTML을 담을 수 있습니다. 출처를 모르는 파일은 함부로 열 것이 아닙니다. 렌더링 전에 변환기는 스크립트, 이벤트 속성, foreignObject 블록을 제거하고, 어차피 코드를 실행할 수 없는 이미지 요소 안에서 결과를 렌더링합니다. 두 겹의 방어, 모두 로컬에서 이루어집니다.

어느 시점에도 업로드는 없습니다. 일괄 변환이 진행되는 동안 브라우저 개발자 도구의 Network 패널은 비어 있습니다.

크기는 선택의 문제이므로, 각 선택지가 무엇을 위한 것인지 알아두면 도움이 됩니다. 두 가지 모드로 거의 모든 경우를 해결할 수 있습니다.

1×, 2×, 3× — 화면 밀도 맞추기

일반 모니터는 CSS 포인트당 1픽셀을 표시합니다. Retina나 HiDPI 디스플레이는 2픽셀, 요즘 휴대폰 대부분은 3픽셀을 표시합니다. 따라서 화면에서 32포인트인 아이콘에는 각각 32, 64, 96픽셀 PNG가 필요합니다. 1×, 2×, 3×의 의미는 이것이 전부입니다.

웹과 앱 작업에서는 보통 같은 SVG를 세 배율 모두로 내보냅니다. 파일을 한 번 놓고 1×로 변환한 뒤 설정을 바꿔 다시 변환하거나, 그냥 3×로 내보내고 플랫폼이 축소하게 두면 됩니다.

자주 쓰는 용도별 크기 표

파비콘: 16, 32, 48픽셀. 512픽셀 PNG로 PNG를 ICO로 도구를 쓰는 것이 가장 좋습니다. 앱 아이콘: 스토어용 1024픽셀, 그다음 아이콘 세트 생성기. 소셜 아바타: 400~800픽셀. Open Graph 이미지: 1200 × 630. 마켓플레이스 상품 이미지: 보통 긴 변 2000픽셀.

인쇄와 마켓플레이스를 위한 사용자 지정 너비

인쇄용은 300 DPI 기준으로 실제 크기에서 역산합니다. A4 페이지는 너비 2,480픽셀, A3는 3,508, 6인치 스티커는 1,800입니다. 너비 모드로 전환해 숫자를 입력하면 높이는 SVG의 종횡비를 따릅니다. 변환기는 출력의 긴 변을 16,384픽셀로 제한하며(브라우저가 캔버스에 두는 한계입니다), 요청을 줄여야 했다면 알려줍니다.

로고, 아이콘, 일러스트 등 대부분의 SVG에는 배경이 없습니다. 도형이 빈 공간 위에 떠 있습니다. PNG는 이를 저장할 수 있으며, 이 작업에 JPG 대신 PNG를 선택해야 하는 두 가지 이유 중 하나입니다.

배경을 투명하게 유지하기

여기서는 투명이 기본값입니다. SVG가 칠하지 않은 픽셀은 모두 투명하게 남으며, 곡선과 대각선 가장자리를 따라 부분적으로 덮인 픽셀도 포함됩니다. 이 부드러운 가장자리 픽셀 덕분에 PNG가 어두운 슬라이드, 색상 버튼, 사진 위에 눈에 띄는 윤곽선 없이 놓일 수 있습니다.

결과는 체커보드 위에 표시되므로 다운로드 전에 투명도를 확인할 수 있습니다.

단색으로 평탄화해야 할 때

알파를 처리하지 못하는 곳도 있습니다. 오래된 이메일 클라이언트, 일부 인쇄 워크플로, 뒤에서 몰래 JPG로 변환하는 몇몇 마켓플레이스 업로더가 그렇습니다. 그런 경우 배경 설정에서 흰색, 검은색 또는 사용자 지정 색을 고릅니다. 도형이 그 색 위에 합성되어 PNG는 완전히 불투명해집니다.

이미지가 놓일 곳과 같은 색을 선택하십시오. 흰색으로 평탄화한 뒤 PNG를 어두운 배경에 올리면, 가장자리 픽셀(이제는 연한 주황, 연한 파랑 등 도형 색의 옅은 버전)이 희미한 헤일로로 나타납니다. 이 헤일로는 변환된 로고에 대한 가장 흔한 불만이지만, 렌더링 결함이 아니라 배경 선택의 문제입니다.

브라우저에서 렌더링한다는 것은 PNG가 화면과 일치한다는 뜻이지만, 동시에 이미지가 무엇을 불러올 수 있는지에 대한 브라우저의 규칙도 물려받는다는 뜻입니다.

글꼴 누락

SVG 안의 텍스트는 지정된 글꼴로 렌더링됩니다. 그 글꼴이 컴퓨터에 설치되어 있지 않고 파일에 내장되어 있지도 않으면 브라우저가 다른 글꼴로 대체하며, PNG에는 대체 글꼴이 나타납니다. URL로 참조된 웹 글꼴도 불러오지 못합니다. 이미지로 렌더링되는 SVG는 외부 리소스를 가져올 수 없기 때문입니다.

확실한 해결책은 SVG를 내보내기 전에 디자인 도구에서 텍스트를 윤곽선으로 변환하는 것입니다. 글자가 패스가 되어 어디서나 똑같이 렌더링됩니다.

링크된 이미지 누락

같은 규칙이 <image href="https://…">에도 적용됩니다. URL에서 가져오는 래스터 이미지는 빈 채로 나옵니다. 대신 내장하십시오. 대부분의 편집기에 "이미지 포함" 내보내기 옵션이 있으며, 링크를 SVG 안의 data URI로 바꿔 줍니다. 내장된 이미지는 문제없이 렌더링됩니다.

빈 출력 또는 아주 작은 출력

viewBox도 width와 height도 없는 SVG는 여기서 대체 크기로 렌더링됩니다. 그림이 원점에서 멀리 떨어져 있으면 보이는 영역 밖에 놓일 수 있습니다. 아트워크를 감싸는 viewBox를 추가하십시오. 출력이 아주 작다면 거의 항상 SVG가 작은 width와 height를 선언한 것입니다. 너비 모드로 전환해 실제로 원하는 크기를 입력하십시오.

SVG가 완벽하게 확대·축소된다면 왜 굳이 SVG를 PNG로 변환할까요? 아직도 수많은 소프트웨어가 벡터를 받지 못하기 때문입니다.

아이콘 세트와 파비콘

앱 스토어, 파비콘 형식, 많은 아이콘 시스템은 고정 크기 PNG를 요구합니다. 필요한 가장 큰 크기로 한 번 변환한 뒤, 나머지는 아이콘 생성기나 PNG를 ICO로로 잘라내십시오.

SVG를 거부하는 플랫폼

소셜 네트워크, 마켓플레이스, 커뮤니티 포럼, 대부분의 CMS 미디어 라이브러리는 SVG 업로드를 거부합니다. SVG가 스크립트를 담을 수 있어 보안상의 이유도 있습니다. 투명 배경의 2× PNG가 범용 대체품입니다.

이메일 서명과 뉴스레터

메일 클라이언트는 SVG를 제거하거나 깨진 이미지를 보여줍니다. 이메일 속 로고는 PNG이며, 이상적으로는 2×로 내보내고 절반 크기로 표시해 Retina 화면에서도 선명하게 유지합니다.

인쇄와 대형 출력

인쇄소는 PDF와 고해상도 래스터를 받습니다. 너비 모드로 로고를 3,000 또는 4,000픽셀로 렌더링하면 포스터 크기로도 깔끔하게 인쇄됩니다. 목표 크기로 래스터화된 벡터에는 확대로 인한 흐릿함이 없습니다.

온라인의 거의 모든 SVG를 PNG로 변환하는 도구는 파일을 업로드하고 서버에서 librsvg, Inkscape 또는 헤드리스 브라우저로 렌더링합니다. 단순한 도형에는 잘 되지만 조금만 복잡해지면 어긋납니다.

충실도

렌더링 라이브러리마다 지원하는 SVG 사양의 범위가 조금씩 다릅니다. 필터, 마스크, 블렌드 모드, 파일 안의 CSS, 패스 위의 텍스트가 흔한 희생양입니다. 브라우저 엔진은 현존하는 가장 완전한 SVG 렌더러이며, 여러분 기기의 엔진으로 렌더링하면 PNG가 미리보기와 어긋날 수 없습니다.

개인정보와 제한

미공개 로고, 제품 도면, 내부 수치가 담긴 차트. 이런 것을 변환기에 업로드하는 것은 아무도 의도하지 않은 작은 유출입니다. 서버 도구는 렌더링에 비용이 들기 때문에 파일 크기와 일일 사용량에도 제한을 둡니다. 자신의 기기에서 렌더링하면 두 가지 모두 사라집니다. 유출될 것도, 계량할 것도 없습니다.

서버가 더 나은 점: 아주 오래된 하드웨어는 복잡한 SVG 여러 개를 데이터 센터보다 느리게 렌더링합니다. 로고 열 개 정도에서는 차이가 없습니다.

출력은 표준 PNG이므로 여기 있는 모든 도구가 또 업로드할 필요 없이 그대로 받습니다.

웹용이라면 PNG 압축을 거치거나 WebP로 변환하십시오. 둘 다 투명도를 유지하면서 용량을 줄입니다. 이메일이나 사진용이라면 PNG를 JPG로가 평탄화하고 줄여 줍니다. 나중에 정확한 크기가 필요하면 이미지 크기 조정을 쓰십시오. 래스터로 시작했는데 벡터가 있었으면 싶다면, PNG를 SVG로가 반대 방향으로 갑니다.