SVG 안의 글자가 특정 글꼴에 의존하면 변환 환경에서 그 글꼴을 찾지 못할 때 대체 글꼴이 사용될 수 있습니다. 결과 PNG의 글자 모양뿐 아니라 폭과 줄바꿈, 잘림까지 확인하세요.
SVG → PNG
SVG의 텍스트가 환경에 의존하는 이유를 이해하세요
SVG는 도형뿐 아니라 문자와 글꼴 속성을 포함할 수 있습니다. 텍스트 요소가 특정 글꼴 패밀리, 굵기와 스타일을 요청하면 렌더러는 사용 가능한 글꼴 가운데 조건에 맞는 항목을 선택합니다. 원본을 만든 컴퓨터에서는 정확히 보이더라도 변환 서버나 다른 브라우저에 같은 글꼴 파일과 굵기가 없으면 결과가 달라질 수 있습니다.
대체 글꼴은 단순히 글자 모양만 바꾸지 않습니다. 글자 폭, 기준선, 자간과 높이가 달라져 줄바꿈 위치가 이동하고, 가운데 정렬이 어긋나거나 텍스트가 상자 밖으로 잘릴 수 있습니다. 특히 로고, 배너, 인증서와 작은 UI 문구처럼 배치가 촘촘한 SVG에서는 한 글자의 폭 차이도 전체 구성을 흔들 수 있습니다.
- 사용 글꼴의 패밀리·굵기·스타일 확인하기
- 모양뿐 아니라 글자 폭과 기준선 변화도 살피기
같은 문장이라도 선택된 글꼴이 다르면 PNG에서 차지하는 공간과 정렬이 달라질 수 있습니다.
변환 전에 글꼴 사용 가능성을 확인하세요
SVG 소스에서 font-family와 굵기 지정, 외부 글꼴 참조가 있는지 확인하세요. 웹 글꼴을 연결했다면 변환기가 네트워크 요청이나 스타일 규칙을 실제로 불러오는지 보장할 수 없습니다. 로컬 컴퓨터에만 설치된 상용 글꼴은 온라인 변환 환경에서 사용할 수 없을 가능성이 있으므로 배포 권한과 포함 방법도 함께 검토해야 합니다.
대체 후보를 지정하더라도 각 글꼴의 글자 폭과 지원 문자 범위는 다릅니다. 한글, 숫자, 특수문자와 혼합된 문구를 대표 샘플로 시험하세요. 글꼴 로딩이 늦은 화면에서 먼저 대체 글꼴로 렌더링된 뒤 변환이 시작될 수도 있으므로, 변환 결과가 매번 일관적인지 같은 파일로 두 번 이상 확인하는 방법도 유용합니다.
- 외부·로컬 글꼴 참조와 사용 권한 확인하기
- 한글·숫자·특수문자를 포함한 실제 문구로 시험하기
원본 제작 환경에 글꼴이 있다는 사실만으로 온라인 변환 환경에서도 사용할 수 있다고 볼 수 없습니다.
패스 변환의 장점과 손실을 비교하세요
텍스트를 윤곽선 패스로 바꾸면 렌더러가 글꼴을 찾지 않아도 외형을 비교적 고정할 수 있습니다. 로고처럼 문구가 확정됐고 픽셀 결과의 일관성이 중요한 경우에 적합할 수 있습니다. 그러나 패스가 정확한 결과를 보장하려면 원래 글꼴이 정상적으로 적용된 제작 환경에서 먼저 변환해야 하며, 파일이 복잡해질 수 있습니다.
패스로 바뀐 글자는 일반 텍스트처럼 수정하거나 검색하기 어렵고, SVG 자체를 웹에서 사용할 때 접근성과 선택 기능에도 영향을 줄 수 있습니다. 따라서 원본 편집용 SVG는 텍스트 상태로 보관하고, 필요한 경우에만 출력 전용 복사본에서 윤곽선으로 바꾸세요. PNG는 어차피 픽셀 결과이므로 최종 목적이 정지 이미지인지도 함께 고려합니다.
- 편집 가능한 원본 SVG와 출력용 복사본 분리하기
- 외형 고정과 텍스트 편집·접근성 손실을 비교하기
텍스트를 패스로 바꾸는 것은 글꼴 문제의 한 해결책이지만 원본의 의미와 편집 기능을 바꾸는 선택입니다.
크기와 렌더링 조건을 맞춰 비교하세요
SVG는 확대해도 도형을 다시 계산하지만 PNG는 지정된 픽셀 크기로 고정됩니다. 변환할 때 가로·세로 출력 치수와 배율을 명확히 정하고, 원본 미리보기와 PNG를 같은 실제 크기로 놓으세요. 확대율이 다르면 글자가 흐리거나 두꺼워 보이는 원인이 글꼴인지 픽셀 스케일링인지 구분하기 어렵습니다.
글자 가장자리, 획 두께, 자간, 줄바꿈, 정렬과 잘림을 순서대로 확인합니다. 배경이 투명한 디자인은 밝고 어두운 배경에 모두 올려 반투명 가장자리의 색도 살펴보세요. 작은 텍스트는 100% 픽셀 보기뿐 아니라 실제 웹페이지나 문서에 배치되는 크기에서 읽을 수 있는지 확인해야 합니다.
- 출력 픽셀 크기와 비교 확대율을 동일하게 맞추기
- 글자 외형·폭·줄바꿈·정렬·잘림을 각각 확인하기
글꼴 차이와 PNG 크기 조절로 생긴 흐림을 구분하려면 같은 표시 조건에서 비교해야 합니다.
실제 사용처에서 최종 PNG를 검증하세요
대표 SVG 한 개를 PNG로 변환하고 다운로드본을 독립적인 뷰어에서 다시 엽니다. 원본과 나란히 두고 모든 문구가 있는지, 오탈자처럼 보이는 대체 문자가 없는지, 텍스트 상자가 잘리지 않았는지 확인하세요. 여러 굵기가 쓰였다면 각 굵기가 유지됐는지 보고, 파일의 실제 가로·세로 픽셀도 기록합니다.
그 PNG를 웹페이지, 프레젠테이션이나 앱에 실제 크기로 배치해 가독성과 정렬을 확인하세요. 문제가 있으면 무작정 해상도만 높이기보다 글꼴 로딩, 대체 글꼴과 텍스트 폭부터 해결합니다. 승인된 PNG와 편집 가능한 SVG 원본을 구분해 보관하고 사용한 글꼴 처리 방식을 기록하세요. 언어별 문구가 있다면 가장 긴 문장도 같은 기준으로 시험하세요. 완료 기준은 변환 성공이 아니라 의도한 문구와 배치가 최종 화면에서 정확한지입니다.
- 다운로드본에서 모든 글자와 굵기 다시 확인하기
- 최종 배치 크기에서 가독성과 정렬 검증하기
- 사용한 글꼴 처리 방식과 출력 크기 기록하기
최종 PNG의 글자는 원본 디자인과 같은 내용·폭·배치를 실제 사용 크기에서 보여야 합니다.
핵심만 정리했어요
- SVG 텍스트는 사용 가능한 글꼴과 글꼴 선택 규칙에 따라 모양과 폭이 달라질 수 있습니다.
- 변환 환경에 지정 글꼴이 없으면 대체 글꼴 때문에 줄바꿈과 정렬이 변할 수 있습니다.
- 글자를 패스로 바꾸면 외형을 고정할 수 있지만 편집성과 접근성이 달라집니다.
- 결과 PNG를 실제 픽셀 크기와 최종 배치 위치에서 원본과 비교하세요.
자주 묻는 질문
SVG를 PNG로 바꾸면 왜 글꼴이 달라지나요?
변환 환경에 지정 글꼴이나 필요한 굵기가 없으면 렌더러가 다른 글꼴을 선택할 수 있기 때문입니다.
대체 글꼴은 글자 모양만 바꾸나요?
아니요. 글자 폭과 기준선이 달라져 줄바꿈, 정렬과 텍스트 상자 잘림까지 변할 수 있습니다.
글자를 패스로 바꾸면 항상 안전한가요?
외형을 고정하는 데 도움이 되지만 편집성, 검색과 접근성이 달라지므로 원본을 보존하고 출력용 복사본에서 사용하세요.
PNG 해상도를 높이면 글꼴 문제가 해결되나요?
픽셀 가장자리는 개선될 수 있지만 잘못 선택된 글꼴이나 달라진 줄바꿈은 해상도만으로 해결되지 않습니다.
변환 후 무엇을 비교해야 하나요?
글자 모양, 굵기, 폭, 자간, 줄바꿈, 정렬, 잘림과 최종 사용 크기에서의 가독성을 확인하세요.