PNG → SVG 사용 방법
- PNG, GIF, WebP 스프라이트를 넣습니다.
- 출력 모드를 고릅니다. 색상별 경로(가장 작음), 병합 사각형, 픽셀별 rect 중 하나입니다.
- 표시 크기를 정합니다. viewBox는 픽셀 단위로 유지되므로 SVG는 어차피 깔끔하게 확대됩니다.
- 원하면 단색 배경을 추가합니다.
- .svg를 내려받거나 마크업을 복사합니다.
결과물
- shape-rendering="crispEdges"가 적용된 SVG
- 모드별 파일 크기 비교
- 복사할 수 있는 SVG 소스
게임을 만들며 얻은 팁
- 경로 모드가 보통 가장 작고, 웹, 아이콘, 레이저 커터용으로 적합합니다.
- 사각형 모드는 블록마다 요소가 따로 있어서 직접 편집하거나 CSS로 애니메이션하기 가장 쉽습니다.
- 스프라이트는 작게 유지하세요. 64×64 스프라이트는 바로 변환되지만, 색이 수천 개인 사진 같은 이미지는 거대한 SVG가 됩니다.
- 반투명 픽셀은 fill-opacity로 바뀌므로 부드러운 그림자도 변환 후에 남습니다.
활용 사례
- 웹사이트에서 스프라이트를 선명한 아이콘이나 로고로 사용
- 픽셀 아트를 크게 인쇄(포스터, 스티커, 굿즈)
- Figma, Illustrator, Inkscape로 픽셀 아트 가져오기
- 픽셀 디자인으로 레이저 커팅, 커팅 시트 제작
자주 묻는 질문
무손실 변환인가요?
네. 모든 픽셀이 정확한 색과 알파를 가진 도형 하나로 덮입니다. SVG를 원래 크기로 래스터화하면 원본 PNG가 그대로 나옵니다.
그냥 이미지 트레이스를 쓰면 안 되나요?
트레이스 도구는 가장자리를 곡선으로 부드럽게 만들어 픽셀 아트를 망칩니다. 이 변환기는 픽셀 그리드에 맞춘 90° 각진 가장자리를 그대로 유지합니다.
어떤 모드가 파일이 가장 작나요?
경로 모드입니다. 같은 색의 사각형들이 짧은 상대 명령으로 path 요소 하나를 공유합니다. 모드별 크기가 표시되니 비교해 보세요.
확대하면 흐려지나요?
아니요. SVG에 shape-rendering="crispEdges"와 정수 좌표를 쓰므로 어떤 배율에서도 가장자리가 선명합니다.
크기 제한이 있나요?
최대 512×512 픽셀입니다. 그보다 큰 이미지는 SVG가 너무 커져서 쓸모가 없습니다.
이미지가 업로드되나요?
아니요, 변환은 브라우저에서 이루어집니다.