Sharp SVG to PNG: 크기, 밀도와 선명한 내보내기

현재 Sharp 처리 과정에서는 매번 SVG에서 시작하고 실제로 필요한 픽셀 너비로 resize()를 호출하세요. 2x 에셋이 필요하면 출력 픽셀을 두 배로 요청하세요. 작은 PNG를 먼저 만들어 확대하지 마세요. 오래된 density 해결책을 모든 과정에 복사하지도 마세요. Sharp 0.34.4 테스트는 입력 밀도를 높였을 때와 그렇지 않을 때 같은 픽셀을 렌더링했습니다.

SVG에서 1x·2x PNG 렌더링하기

Sharp 생성자는 SVG 파일·버퍼를 받고 resize API는 출력 크기를 설정합니다. 256 CSS 픽셀로 표시할 정사각형 64단위 아이콘은 1x용 256픽셀 PNG, 2x용 512픽셀 PNG로 내보내세요.

import sharp from "sharp";
 
const source = "icon.svg";
 
await Promise.all([
  sharp(source).resize({ width: 256 }).png().toFile("icon-1x.png"),
  sharp(source).resize({ width: 512 }).png().toFile("icon-2x.png"),
]);

높이를 생략하면 Sharp의 일반 크기 조절 동작에 따라 원본 비율을 유지합니다. 대상에 맞는 실제 출력 너비를 선택하세요. ‘2x’는 의도한 CSS 표시 크기 대비 픽셀 크기이며 SVG 속성이나 모든 화면에 대한 보장이 아닙니다. 256 CSS 픽셀로 보려면 256·512픽셀 PNG를 그 표시 크기에서 비교해 큰 파일의 용량이 가치 있는지 정하세요.

원본 테스트 아이콘은 width="64" height="64" viewBox="0 0 64 64"를 선언했습니다. 저장소의 고정 Sharp 0.34.4로 64, 512, 1,024픽셀을 렌더링했습니다. 512·1,024픽셀 출력은 SVG에서 생성됐고 모서리는 투명, 칠한 중앙은 불투명하며 요청 크기를 보고했습니다. 해당 예제·버전의 관찰이며 모든 SVG 그림의 벤치마크는 아닙니다.

원본 Sharp 0.34.4 렌더링 테스트

그림은 실패 방식을 구체적으로 보여 줍니다. 첫 출력이 64픽셀 PNG가 되면 이후 크기 조절은 픽셀을 보간합니다. 다시 그릴 경로가 없습니다. 테스트에서 직접·밀도 조정 512픽셀 결과의 원시 RGBA 채널은 모두 같았습니다. 소스 SVG, 렌더링 스크립트와 결과 메타데이터는 글의 조사 자료에 보관되어 있습니다.

Sharp에서 density가 필요한가요?

Sharp 생성자 옵션 density는 SVG·PDF 입력을 읽을 때 쓰는 DPI를 제어하며 문서상 기본값은 72입니다. resize()의 최종 너비 요청과 별개입니다. 오래된 예제에서 흐린 확대를 피하려 입력 밀도를 높이는 방법을 볼 수 있습니다. 실제 과거 증상을 설명합니다. Sharp 이슈 #1421은 2018년에 32픽셀 SVG를 512픽셀로 확대하면 픽셀화된다고 보고합니다. 현재 설치에도 해결책이 필요하다는 증거는 아닙니다.

Sharp 0.34.4에서 다음 정확한 두 과정을 테스트했습니다.

const direct = await sharp("icon.svg")
  .resize({ width: 512 })
  .png()
  .toBuffer();
 
const densityFirst = await sharp("icon.svg", { density: 576 })
  .resize({ width: 512 })
  .png()
  .toBuffer();

64픽셀 벡터 아이콘에서 둘 다 같은 512 × 512 RGBA 픽셀을 냈습니다. 특정 파일과 설치 Sharp 버전에서 필요가 드러날 때만 입력 밀도를 설정하고 업그레이드 후 비교를 반복하세요. 높은 DPI를 범용 선명도 스위치로 취급하지 마세요. 먼저 물을 것은 Sharp가 최종 PNG를 렌더링할 때 벡터 도형이 남아 있는지입니다.

PDF도 처리한다면 별도 테스트하세요. 이 SVG 실험은 PDF 동작을 입증하지 않습니다. 마찬가지로 새 Sharp 문서의 withDensity()는 출력 DPI 메타데이터이며 생성자의 SVG 입력 렌더링 밀도와 다른 작업입니다.

크기, 투명도와 소스 내용 확인하기

미리보기 확대를 보고 추측하지 말고 출력에 Sharp 메타데이터 API를 쓰세요.

const oneX = await sharp("icon-1x.png").metadata();
const twoX = await sharp("icon-2x.png").metadata();
 
console.log({
  oneX: [oneX.width, oneX.height, oneX.hasAlpha],
  twoX: [twoX.width, twoX.height, twoX.hasAlpha],
});

이 정사각형 예제의 예상 크기는 256 × 256과 512 × 512입니다. hasAlpha는 알파 채널을 뜻하지만 특정 모서리가 투명하다는 증거는 아닙니다. 전달에 투명도가 중요하면 파일을 보거나 픽셀을 측정하세요. 예제는 모든 출력의 모서리 알파가 0, 중앙 알파가 255였습니다. SVG 안에 흰 사각형이 있으면 PNG 형식과 무관하게 모든 출력에 칠해집니다.

새로 크게 렌더링해도 픽셀화되면 SVG 내용을 확인하세요. 표준은 래스터를 삽입·링크하는 <image> 요소를 허용합니다. 확장자는 .svg여도 내부 그림은 저해상도 PNG일 수 있습니다. SVG 내부 래스터 이미지 찾기 가이드는 객체와 XML 확인법을 보여 줍니다. Sharp 출력 너비를 높여도 삽입 픽셀이 경로가 되지는 않습니다.

대상도 확인하세요. 512픽셀 파일을 1,024픽셀로 표시하면 흐릴 수 있습니다. 100%를 크게 넘겨 확대한 뷰어는 올바른 내보내기에서도 PNG 격자를 드러냅니다. 실제 렌더링 크기·배경에서 비교하고 더 큰 PNG나 SVG 자체를 전달할지 정하세요. 웹 전달의 인라인 SVG와 이미지 요소 SVG는 통합 선택이 다르지만 대상이 SVG를 지원하면 어느 쪽도 PNG가 필요하지 않습니다.

PerfectVector의 역할

Sharp는 SVG를 래스터화하며 PNG에서 편집 경로를 복원하지 않습니다. 마스터 그림이 래스터 아이콘·로고뿐이면 이 내보내기 전에 SVG를 만들고 확인하세요. PNG 아이콘 SVG UI 키트 가이드는 세트의 일관된 도형과 전달 검사를 다룹니다. PerfectVector의 이미지 벡터 작업 흐름은 래스터에서 SVG 후보를 만듭니다. 결과를 열어 실루엣, 작은 세부와 실제 경로를 확인하고 승인 SVG에서 1x·2x PNG를 렌더링하세요. 깔끔한 원본 SVG가 있으면 유지하고 Sharp를 직접 쓰세요.

FAQ

Sharp SVG-to-PNG 출력이 흐린 이유는 무엇인가요? 작은 PNG를 먼저 만든 뒤 확대했는지 확인하세요. 다음으로 SVG의 삽입 래스터와 전달 PNG의 실제 표시 크기를 확인하세요. 현재 Sharp에서는 입력 밀도 대안을 추가하기 전에 SVG에서 최종 크기로 직접 렌더링하세요.

8배 확대에 density: 576이 필요한가요? Sharp 0.34.4의 64→512픽셀 SVG 예제에서는 필요 없었습니다. 직접·밀도 조정 크기 조절이 같은 RGBA 픽셀을 냈습니다. 자신의 SVG·설치 렌더러는 다를 수 있어 그 숫자를 규칙으로 쓰지 말고 정확한 입력을 테스트하세요.

투명한 2x PNG는 어떻게 만드나요? 의도한 CSS 크기의 두 배로 SVG에서 렌더링해 PNG로 내보내세요. 너비·높이를 확인하고 칠하지 않은 영역의 투명도를 검사하세요. 투명 캔버스가 SVG에 이미 있는 배경 도형을 제거하지는 않습니다.

Sources

1. Sharp — 생성자 — SVG 입력 지원과 입력 density 옵션입니다.
2. Sharp — 이미지 크기 조절 — 예제의 출력 크기 동작입니다.
3. Sharp — 입력 메타데이터 — 크기·알파 메타데이터 검사입니다.
4. Sharp GitHub — SVG to PNG 픽셀화 이슈 #1421 — 고정 현재 버전 테스트와 구분한 과거 보고 증상입니다.
5. Sharp — 출력 옵션 — 새로운 출력 밀도 메타데이터와 입력 렌더링 밀도를 구분합니다.
6. W3C — SVG 2 삽입 콘텐츠 — SVG에 래스터 픽셀이 있는 이유를 설명합니다.

마스터가 래스터뿐이면 PerfectVector로 SVG 후보를 만들고 경로를 확인하세요. 승인 파일을 Sharp로 필요한 각 PNG 크기에 렌더링하세요.