SVG 벡터를 고화질 래스터 이미지(PNG/JPG/WebP)로 변환하는 실무 가이드
SVG는 점과 선의 좌표로 그림을 그리는 벡터(Vector) 파일로 아무리 크게 확대해도 깨지지 않는 장점이 있지만, 카카오톡, 노션, 파워포인트, SNS 등에서는 SVG 파일을 직접 지원하지 않아 흔히 사용하는 PNG나 JPG 이미지로 변환해야 하는 경우가 많습니다.
본 도구는 사용자의 컴퓨터/스마트폰 브라우저 화면 안에서 SVG를 원하는 크기(1x부터 8K 해상도까지)로 선명하게 다시 그려(래스터라이징) 저장해 줍니다.
서버로 파일을 전송하지 않아 회사 로고나 비공개 디자인 자산도 안심하고 안전하게 변환할 수 있습니다.
깨짐 없는 초고화질 확대 변환
일반 이미지를 확대하면 픽셀이 뭉개지지만, SVG는 4K, 8K 이상의 거대한 크기로 변환해도 원본 그대로 깨끗하게 출력됩니다.
비율 고정 & 자유로운 크기 조절
가로세로 비율을 유지하면서 원하는 너비와 높이를 픽셀 단위로 정확하게 맞출 수 있습니다.
투명 배경 및 원하는 배경색 채우기
아이콘용 투명 배경(PNG/WebP)은 물론, 웹 썸네일이나 배너에 필요한 흰색 또는 맞춤 컬러 배경을 지정할 수 있습니다.
클립보드 즉시 복사 & 파일 저장
파일 다운로드뿐만 아니라, Figma나 슬랙 등에 [Cmd + V]로 바로 붙여넣을 수 있는 클립보드 복사를 지원합니다.
1. 벡터(SVG)와 래스터(PNG/JPG)는 무엇이 다를까요?
2. 어떤 파일 포맷으로 저장해야 할까요? (포맷별 선택 요령)
작업 목적에 가장 알맞은 파일 형식을 선택해보세요.
| 포맷 | 특징 및 장점 | 배경 투명도 | 추천 사용 상황 |
|---|---|---|---|
| PNG | 화질 손실 없이 원본 그대로 깨끗함 | 완벽 지원 (투명 배경) | 로고, UI 아이콘, 스티커, 투명 배경 그래픽 (추천 기본 포맷) |
| WebP | PNG 수준 화질에 파일 용량은 훨씬 가벼움 | 완벽 지원 (투명 배경) | 웹사이트 로딩 속도 최적화, 모던 웹 및 모바일 앱 서비스 |
| JPEG | 용량을 작게 압축 (단색 배경 필수) | 지원 안 됨 (배경 채움) | 사진이 포함된 이미지, 문서 첨부, 투명 배경이 필요 없을 때 |
3. 배율 프리셋(1x, 2x, 4x, 8x) 활용 요령
4. SVG 변환 시 알아두면 좋은 실무 팁
Ctrl + Shift + O (윤곽선 만들기 / Outline)를 실행하여 패스로 변환한 뒤 SVG로 내보내면 어떤 환경에서도 글꼴이 완벽하게 유지됩니다.Cmd + V (Ctrl + V)로 붙여넣으면 편리합니다.개발자를 위한 언어별 SVG 래스터라이징 구현 스니펫
웹 프론트엔드, Node.js 백엔드, 파이썬 데이터 파이프라인에서 즉시 활용할 수 있는 표준 변환 코드입니다.
| 1 | // 브라우저 클라이언트 사이드 SVG to PNG 변환 함수 |
| 2 | async function convertSvgToPng( |
| 3 | svgString: string, |
| 4 | targetWidth: number, |
| 5 | targetHeight: number |
| 6 | ): Promise<Blob> { |
| 7 | return new Promise((resolve, reject) => { |
| 8 | // 1. SVG 문자열을 Blob URL로 생성 |
| 9 | const blob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' }); |
| 10 | const url = URL.createObjectURL(blob); |
| 11 | const img = new Image(); |
| 12 | |
| 13 | img.onload = () => { |
| 14 | // 2. 출력 캔버스 생성 및 크기 설정 |
| 15 | const canvas = document.createElement('canvas'); |
| 16 | canvas.width = targetWidth; |
| 17 | canvas.height = targetHeight; |
| 18 | const ctx = canvas.getContext('2d'); |
| 19 | if (!ctx) return reject(new Error('Canvas context not available')); |
| 20 | |
| 21 | // 3. 고해상도 래스터 드로잉 |
| 22 | ctx.drawImage(img, 0, 0, targetWidth, targetHeight); |
| 23 | URL.revokeObjectURL(url); |
| 24 | |
| 25 | // 4. PNG Blob 추출 |
| 26 | canvas.toBlob((pngBlob) => { |
| 27 | if (pngBlob) resolve(pngBlob); |
| 28 | else reject(new Error('PNG export failed')); |
| 29 | }, 'image/png'); |
| 30 | }; |
| 31 | |
| 32 | img.onerror = () => { |
| 33 | URL.revokeObjectURL(url); |
| 34 | reject(new Error('SVG parsing error')); |
| 35 | }; |
| 36 | |
| 37 | img.src = url; |
| 38 | }); |
| 39 | } |
| 1 | const sharp = require('sharp'); |
| 2 | const fs = require('fs'); |
| 3 | |
| 4 | async function convertSvgFile(inputPath, outputPath, width, height) { |
| 5 | // SVG 파일을 읽어 지정된 해상도의 PNG로 래스터라이징 |
| 6 | await sharp(inputPath) |
| 7 | .resize(width, height) |
| 8 | .png({ quality: 100, compressionLevel: 9 }) |
| 9 | .toFile(outputPath); |
| 10 | |
| 11 | console.log(`변환 완료: ${outputPath}`); |
| 12 | } |
| 13 | |
| 14 | convertSvgFile('icon.svg', 'icon-4k.png', 3840, 2160); |
| 1 | import cairosvg |
| 2 | |
| 3 | # 1. 파일 기반 SVG to PNG 변환 (너비/높이 커스텀 지정) |
| 4 | cairosvg.svg2png( |
| 5 | url='input_logo.svg', |
| 6 | write_to='output_logo.png', |
| 7 | output_width=2048, |
| 8 | output_height=2048 |
| 9 | ) |
| 10 | |
| 11 | # 2. SVG 문자열 직접 바이트 변환 |
| 12 | svg_code = '<svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="red"/></svg>' |
| 13 | png_bytes = cairosvg.svg2png(bytestring=svg_code.encode('utf-8'), scale=4.0) |
| 1 | using SkiaSharp; |
| 2 | using Svg.Skia; |
| 3 | using System.IO; |
| 4 | |
| 5 | public class SvgConverter { |
| 6 | public static void ConvertToPng(string svgPath, string pngPath, int width, int height) { |
| 7 | var svg = new SKSvg(); |
| 8 | svg.Load(svgPath); |
| 9 | |
| 10 | var info = new SKImageInfo(width, height); |
| 11 | using (var surface = SKSurface.Create(info)) |
| 12 | { |
| 13 | var canvas = surface.Canvas; |
| 14 | canvas.Clear(SKColors.Transparent); |
| 15 | |
| 16 | // 캔버스 크기에 맞춰 벡터 스케일링 |
| 17 | float scaleX = (float)width / svg.Picture.CullRect.Width; |
| 18 | float scaleY = (float)height / svg.Picture.CullRect.Height; |
| 19 | canvas.Scale(scaleX, scaleY); |
| 20 | canvas.DrawPicture(svg.Picture); |
| 21 | |
| 22 | using (var image = surface.Snapshot()) |
| 23 | using (var data = image.Encode(SKEncodedImageFormat.Png, 100)) |
| 24 | using (var stream = File.OpenWrite(pngPath)) |
| 25 | { |
| 26 | data.SaveTo(stream); |
| 27 | } |
| 28 | } |
| 29 | } |
| 30 | } |
| 1 | package main |
| 2 | |
| 3 | import ( |
| 4 | "fmt" |
| 5 | "os" |
| 6 | "github.com/kanrichan/resvg-go" |
| 7 | ) |
| 8 | |
| 9 | func main() { |
| 10 | svgData, _ := os.ReadFile("logo.svg") |
| 11 | |
| 12 | // resvg 라이브러리를 통한 고속 무손실 래스터라이징 |
| 13 | pngData, err := resvg.Render(svgData, resvg.Options{ |
| 14 | Width: 1024, |
| 15 | Height: 1024, |
| 16 | Dpi: 300, |
| 17 | }) |
| 18 | if err != nil { |
| 19 | panic(err) |
| 20 | } |
| 21 | |
| 22 | os.WriteFile("logo.png", pngData, 0644) |
| 23 | fmt.Println("SVG to PNG 변환 완료!") |
| 24 | } |
클라이언트 로컬 래스터라이징 FAQ
Q.SVG를 PNG로 변환하면 화질이 깨지거나 뭉개지지 않나요?
전혀 깨지지 않습니다. SVG는 픽셀이 아닌 좌표 도면 형태의 벡터 데이터이므로, 4K나 8K 등 원하는 배율에 맞춰 브라우저가 선명하게 다시 그립니다. 따라서 8배(8x) 이상의 초고해상도로 변환해도 계단 현상 없이 원본 그대로 깔끔한 화질을 얻을 수 있습니다.
Q.업로드한 SVG 파일이나 그래픽 디자인이 서버에 저장되나요?
저장되지 않습니다. Toolbase의 모든 파일 처리는 사용자의 웹 브라우저 내부 HTML5 Canvas 메모리에서만 동작하므로 기업의 비밀 로고나 비공개 디자인 자산도 안전하게 다룰 수 있습니다.
Q.투명 배경(Transparent)을 유지하려면 어떤 포맷을 선택해야 하나요?
PNG 또는 WebP 포맷을 선택하시면 알파(Alpha) 투명 채널이 완벽하게 보존됩니다. JPEG 포맷은 규격상 투명도를 지원하지 않으므로 자동으로 흰색(또는 사용자가 지정한 배경색)으로 채워져 저장됩니다.
Q.가로세로 비율(Aspect Ratio)을 유지하면서 크기를 조절하려면 어떻게 하나요?
설정 패널의 [가로세로 비율 고정] 자물쇠 아이콘이 활성화된 상태에서 가로(Width) 또는 세로(Height) 값을 입력하면, 원본 SVG의 종횡비에 맞춰 다른 한쪽의 크기가 자동으로 정수 픽셀로 계산됩니다. 또한 1x, 2x, 4x, 8x 프리셋 버튼을 누르면 원본 비율을 유지하며 즉시 배율을 적용할 수 있습니다.
Q.클립보드 복사(Copy to Clipboard) 기능은 어떻게 활용하나요?
[PNG 클립보드 복사] 버튼을 누르면 래스터라이징된 PNG 이미지가 브라우저 클립보드에 바이너리 데이터로 저장됩니다. 별도의 파일 저장이나 탐색기 열기 없이 Figma, Photoshop, 노션, 슬랙, 카카오톡 등에 Ctrl + V (Cmd + V)로 즉시 붙여넣을 수 있습니다.
Q.SVG 파일에 외부 폰트나 CSS 스타일이 포함되어 있어도 정상 변환되나요?
SVG 파일 내부에 인라인 스타일(<style>)이나 <text> 태그가 표준 형식으로 포함되어 있다면 브라우저가 정확히 렌더링합니다. 단, 외부 웹폰트 URL 링크의 경우 브라우저 보안 정책(CORS)으로 인해 시스템 기본 폰트로 대체될 수 있으므로, 디자인 도구(Figma/Illustrator)에서 텍스트를 아웃라인(Outline / Path)으로 변환 후 SVG로 저장하는 것을 권장합니다.
Q.최대 몇 픽셀 해상도까지 변환할 수 있나요?
현대의 웹 브라우저는 대개 최대 16,384 × 16,384 픽셀 이상의 캔버스 크기를 지원합니다. 본 도구를 통해 포스터 및 인쇄물에 필요한 8K(7680×4320) 이상의 초고해상도 PNG 파일도 원활하게 렌더링할 수 있습니다.
Q.SVG 코드(XML 텍스트)를 직접 붙여넣어 변환할 수도 있나요?
네, 지원합니다. 파일 업로드뿐만 아니라 상단 탭에서 SVG XML 코드를 직접 붙여넣거나 수정하면 실시간으로 렌더링 프리뷰가 갱신되어 즉시 변환할 수 있습니다.