SVG → PNG 변환기

확장 가능한 SVG 벡터를 바로 사용할 수 있는 PNG 이미지로 변환

SVG 파일은 완성된 그림이 아니라 일련의 지시사항입니다. 텍스트 편집기에서 열어 보면 브라우저가 어떤 크기로든 아트워크를 새로 그리기 위해 따르는 경로, 도형, 채우기, 곡선을 설명하는 XML이 나타납니다. PNG는 그 반대입니다. 고정된 너비와 높이로 동결된 색상 픽셀의 격자입니다. 하나를 다른 것으로 변환하는 것을 래스터화라고 하며, 이 도구는 브라우저 안에서 완전히 수행합니다. 출력 크기를 선택하면 SVG가 HTML 캔버스에 그려지고 PNG가 반환됩니다. 파일은 내 기기를 벗어나지 않습니다.

벡터와 래스터, 쉬운 용어로 설명

핵심 차이는 해상도 처리 방식입니다. SVG는 픽셀 대신 수학을 저장하기 때문에 해상도 독립적입니다. 로고를 파비콘에서 광고판 크기로 확대해도 모든 가장자리가 수학적으로 선명하게 유지되도록 다시 계산됩니다. PNG에는 그런 자유가 없습니다. 픽셀이 고정되어 있으므로 네이티브 크기를 넘어 확대하면 뷰어가 기존 점들을 늘려야 하고, 래스터 이미지의 특징인 흐림과 계단 현상이 나타나기 시작합니다.

이 절충은 양방향으로 작용합니다. 벡터는 깨끗한 도형으로 만들어진 로고, 아이콘, 플랫 일러스트레이션에 탁월하며 파일이 보통 매우 작습니다. PNG 같은 래스터 형식은 그라데이션, 부드러운 그림자, 사진적 세부 정보를 더 자연스럽게 처리하며, 결정적으로 거의 모든 곳에서 이해됩니다. 래스터화할 때는 SVG의 무한한 확장성을 선택한 크기에서의 PNG의 범용 호환성으로 교환하는 것입니다.

SVG를 래스터화하는 이유

SVG가 그렇게 아름답게 확장된다면 왜 변환할까요? 호환성이 보통 그 답입니다. SVG를 허용하지 않는 곳이 많습니다. 많은 이메일 클라이언트가 SVG를 제거하거나 렌더링을 거부하고, 문서 편집기와 프레젠테이션 소프트웨어는 종종 평면 이미지를 원하며, 마켓플레이스와 광고 네트워크는 PNG나 JPG를 요구하고, 대부분의 소셜 플랫폼은 벡터 업로드를 무시합니다. 일부 콘텐츠 시스템은 형식이 스크립트를 포함할 수 있다는 보안상의 이유로 SVG를 완전히 차단하기도 합니다.

두 번째 이유는 때로는 고정 크기 자산을 원하기 때문입니다. 앱 아이콘, 썸네일, Open Graph 미리보기 이미지, 인쇄물은 모두 정확한 픽셀 크기를 예상합니다. PNG는 아트워크를 그 목표에 고정하여 벡터를 다르게 해석하는 뷰어에서의 예상치 못한 결과 없이 어디서나 동일하게 렌더링됩니다. 소스 SVG를 플랫폼이 요구하는 정확한 크기로 변환하는 것은 종종 일관된 결과를 얻는 가장 깔끔한 방법입니다.

올바른 내보내기 해상도 선택

PNG는 우아하게 확대될 수 없으므로 내보내는 크기가 벡터보다 더 중요합니다. 너무 작게 내보내면 현대 화면에서 부드러워 보이고, 불필요하게 크게 내보내면 대역폭을 낭비합니다. 간단한 규칙: 이미지가 표시될 최대 크기를 결정하고, 적어도 그 크기로, 이상적으로는 고밀도 디스플레이를 위해 더 크게 렌더링하세요.

표준 화면은 1x, 즉 아트워크의 공칭 크기로 괜찮습니다. 고DPI 및 Retina 디스플레이는 같은 공간에 약 두 배의 픽셀을 넣으므로, 2x 내보내기는 아이콘과 그래픽을 흐릿하지 않고 선명하게 유지합니다. 인쇄, 포스터, 매우 큰 디스플레이의 경우 3x 또는 4x가 여유를 줍니다. 소스가 벡터이므로 더 크게 내보내는 것은 화질 면에서 비용이 없습니다. 곡선이 더 높은 픽셀 수로 단순히 다시 계산된 후 평탄화됩니다. 의심스러울 때는 넉넉한 크기로 렌더링하세요. 큰 PNG는 항상 축소할 수 있지만, 작은 것을 확대하여 세부 정보를 복구할 수는 없습니다.

투명도도 함께 유지됩니다

PNG는 완전한 알파 채널을 지원하므로 변환 시 투명도가 유지됩니다. SVG에 배경 채우기가 없으면 결과 PNG도 해당 영역이 투명하게 유지되므로, 로고나 아이콘이 어떤 색상 위에도 보기 흉한 흰색 박스 없이 깔끔하게 놓입니다. 대신 단색 배경이 필요하다면 변환하기 전에 SVG에 배경을 추가하세요. 어느 쪽이든 벡터에서 보이는 것이 PNG가 보존하는 것이며, 이것이 바로 아이콘, 배지, 오버레이에 JPG가 아닌 PNG가 자연스러운 대상인 이유입니다.

모든 것이 내 기기에 남습니다

이 변환기는 캔버스 API를 사용하여 브라우저에서 로컬 코드로 실행됩니다. SVG가 서버로 전송되지 않고 읽히고, 그려지고, 내보내지므로 업로드도, 대기열도, 다른 사람의 스토리지에 아트워크 사본도 없습니다. 출시 전 브랜딩부터 내부 다이어그램까지 제3자에게 넘기고 싶지 않은 것들에 더 빠르고 더 안전합니다. 여기서 작업이 끝나면 나머지 이미지 도구를 살펴보세요. Windows 또는 파비콘 자산을 만들고 있다면 PNG를 ICO로 변환기가 자연스러운 다음 단계입니다.

자주 묻는 질문