SVG를 PNG로 변환하는 법

SVG가 웹에서는 더 나은 포맷이지만, 때로는 PNG가 필요합니다 — 이메일 서명, 앱스토어 에셋, 소셜 미리보기, 벡터를 못 받는 도구 등. 핵심은 적절한 크기로 래스터화하는 것입니다. PNG는 픽셀이 고정이라 해상도를 미리 정해야 합니다.

내보낼 크기를 먼저 정하세요

SVG와 달리 PNG는 나중에 깨끗하게 확대되지 않습니다. 실제로 표시할 가장 큰 크기로, 또는 고해상도(레티나) 화면을 위해 그 2~3배로 내보내세요. 레티나에서 보일 24px 아이콘이라면 48~72px로 내보내야 선명함이 유지됩니다.

1. 온라인 (설치 불필요)

가장 빠른 길: 웹 도구에서 SVG를 열고 크기를 정해 PNG로 받기. Icony에서는 아이콘을 고르고 16px~512px 크기를 선택, 색을 지정하거나 투명하게 둔 뒤 클릭 한 번으로 PNG를 내보냅니다 — 업로드도 가입도 없습니다.

2. 브라우저 canvas로

직접 도구를 만든다면 SVG를 <canvas>에 그린 뒤 PNG로 다시 읽으면 됩니다. 스케일 배수를 곱하면 고해상도에서도 선명합니다:

// Browser: rasterize an SVG to a PNG at any scale
const svg = document.querySelector('svg');
const blob = new Blob([svg.outerHTML], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);
const img = new Image();
img.onload = () => {
  const scale = 3; // export at 3x for a crisp result
  const canvas = document.createElement('canvas');
  canvas.width = img.width * scale;
  canvas.height = img.height * scale;
  canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
  canvas.toBlob((png) => {/* download png */}, 'image/png');
  URL.revokeObjectURL(url);
};
img.src = url;

3. Node.js의 sharp

빌드 스크립트나 서버에는 sharp가 빠르고 품질이 좋습니다. density를 높게 줘서 벡터를 선명하게 래스터화한 뒤 목표 크기로 리사이즈하세요:

// Node.js: convert with sharp (npm i sharp)
import sharp from 'sharp';

await sharp('icon.svg', { density: 300 })
  .resize(512, 512)
  .png()
  .toFile('icon.png');

4. 커맨드라인 (ImageMagick / Inkscape)

일회성·일괄 변환엔 CLI가 편합니다. ImageMagick은 기본 72 DPI로 래스터화해 흐릿하므로 density를 높이세요. Inkscape는 SVG를 네이티브로 렌더해 보통 가장 정확합니다:

# ImageMagick (use a high density so the vector rasterizes sharply)
magick -background none -density 300 icon.svg -resize 512x512 icon.png

# Inkscape
inkscape icon.svg --export-type=png --export-width=512

배경은 투명하게 유지

PNG는 투명을 지원하고, SVG 아이콘은 대개 배경이 없습니다. 도구가 흰 배경을 칠하지 않게 하세요. ImageMagick은 -background none, Icony는 "투명" 배경 옵션으로 알파 채널을 그대로 보존합니다.

어떤 방법이든 트레이드오프를 기억하세요 — PNG는 내보낸 크기에 고정됩니다. 나중에 더 크게 다시 내보낼 수 있도록 원본 SVG를 보관하세요. 어떤 포맷이 유리한지는 SVG vs PNG 가이드를 참고하세요.