SVG → PNG·JPG 변환기 — 한글 폰트 보존

1. 기본 사용법

파일을 업로드하고 출력 포맷·해상도 배율을 선택한 뒤 [변환하기]만 누르면 끝입니다. 모든 처리는 브라우저 안에서 이루어지며, 파일이 서버로 전송되지 않습니다.

1. 1단계 — SVG 업로드드래그·드롭 또는 클릭으로 SVG 파일을 가져옵니다. 업로드되면 SVG 안에 사용된 한글 폰트들이 자동 감지되어 칩으로 표시됩니다.
2. 2단계 — 포맷 선택PNG는 투명 배경을 그대로 보존합니다. JPG는 용량이 작지만 투명 영역은 배경색으로 채워집니다.
3. 3단계 — 배율 결정1x는 SVG 원본 크기, 2x·3x·4x는 각각 두·세·네 배 큰 비트맵으로 렌더링됩니다. 인쇄나 고해상도 디스플레이용은 2x 이상을 권장합니다.
4. 4단계 — 변환·다운로드폰트 임베드 → 캔버스 렌더링 → PNG·JPG 인코딩이 한 번에 이뤄집니다. 결과 미리보기에서 글자가 의도한 폰트로 나오는지 확인 후 [다운로드]를 누르세요.

2. 한글 폰트가 깨지지 않는 이유

브라우저는 SVG를 비트맵으로 렌더링할 때, SVG 안에 명시된 폰트만 사용합니다. 일반적인 SVG 변환 도구는 폰트를 별도로 임베드하지 않기 때문에, 결과 이미지에서 한글이 시스템 기본 폰트(Helvetica·Arial 등)로 대체되어 글자 모양과 줄 간격이 모두 어긋나는 일이 자주 일어납니다.

editpixel의 SVG 변환기는 다음 단계로 폰트 깨짐을 막습니다.

• SVG 내 모든 `font-family` 참조와 텍스트 글자를 자동 추출.
• Google Fonts CSS API에 사용된 글자 집합(`text=...`)만 요청해 필요한 글리프를 가져옵니다 — 풀 폰트 다운로드보다 수십 배 빠릅니다.
• 내려받은 WOFF2 파일을 base64 데이터 URL로 변환해 SVG의 `<style>` 안에 `@font-face`로 인라인 — 비트맵 렌더 시 외부 네트워크 요청 없이도 폰트가 적용됩니다.
• 같은 폰트를 `document.fonts`에도 등록해 캔버스 렌더링 직전 폰트가 준비된 상태를 보장합니다.

3. PNG vs JPG, 언제 무엇을 쓸까

복잡한 그라데이션이나 사진 같은 SVG는 JPG가 PNG보다 5~10배 작아질 수 있습니다. 반면 텍스트·도형·로고는 PNG가 압도적으로 깔끔합니다.

4. 결과 품질을 끌어올리는 팁

• 인쇄·고해상도 화면용은 2x 이상 — Retina·4K 디스플레이에서 텍스트가 흐릿하지 않으려면 최소 2배 이상 렌더해야 합니다.
• JPG는 배경색을 신중히 — SVG의 투명 영역은 JPG로 변환하면 흰색 또는 지정 배경색으로 채워집니다. 다크 테마용이면 #000 또는 의도한 색상을 미리 지정하세요.
• 폰트 weight는 SVG 안에서 명시 — `font-weight: 700`처럼 굵기를 지정하면 변환기가 같은 굵기를 자동으로 가져옵니다.
• 용량이 클 때는 글자 수 줄이기 — SVG 안의 텍스트가 매우 많을 때는 폰트 글리프 임베드 용량이 늘어납니다. 가능하면 한 SVG 안의 텍스트는 화면에 보이는 만큼만 두세요.

5. SVG 변환을 가장 많이 쓰는 케이스

• Figma·일러스트레이터에서 받은 한글 로고 SVG를 인스타·카카오톡·블로그용 PNG로 정리.
• 카드뉴스 템플릿(SVG)을 색상·텍스트만 바꿔 가며 다양한 PNG로 출력.
• 한글 캘리그라피 폰트로 만든 인용구 SVG를 SNS 게시물용 비트맵으로 변환.
• PPT·Keynote 슬라이드에 넣을 고해상도 PNG가 필요할 때.