SVG 글꼴이 내보내기나 가져오기 후 바뀌는 이유
원하는 글꼴을 사용할 수 없거나 텍스트가 다르게 해석되면 SVG 글꼴이 바뀝니다. 편집 가능한 텍스트, 대체 글꼴, 윤곽선 경로를 진단하세요.
목차
SVG 글꼴이 바뀌는 이유는 편집 가능한 텍스트가 보통 글꼴 이름만 지정하고 글자 형태를 파일 안에 자동 포함하지 않기 때문입니다. 브라우저, 편집기, 커팅 소프트웨어, 수신 컴퓨터에서 해당 글꼴을 쓰지 못하면 대체 글꼴을 고릅니다. 달라진 글자 폭이 줄바꿈, 정렬, 주변 작품 위치를 바꿉니다.
신뢰할 수 있는 전달 전략은 두 가지입니다. 선택, 검색, 편집 가능한 단어가 필요하고 글꼴을 올바르게 제공할 수 있다면 텍스트를 유지하세요. 모습이 고정돼야 하고 문구 편집이 필요 없다면 벡터 윤곽선으로 바꾸세요. 둘 다 별도 편집 원본을 유지하세요.
자동 PNG 출력은 resvg에 글꼴 파일을 명시적으로 로드하고 전달 전에 원본 글자와 비교하세요.
문서 그림에는 LaTeX의 SVG 일러스트와 조판 라벨을 비교하세요. 그림과 라벨을 분리하면 SVG 원본을 유지하며 문서가 문구를 조판합니다.
빠른 진단
- 텍스트 편집기로 열어
<text,<tspan,font-family를 검색하세요. - 편집 텍스트가 있으면 환경에 정확한 글꼴 패밀리와 굵기가 있는지 확인하세요.
- 웹페이지가 글꼴을 제공하면
@font-face자원이 실제 로드되는지 보세요. - 글자가
<path>뿐이면 글꼴 대체는 불가능합니다. 출력 형태와 앱 지원을 비교하세요. - 고정 로고나 인쇄 이미지는 전달 사본을 윤곽선으로 바꾸고 원본의 텍스트를 유지하세요.
먼저 텍스트가 남아 있는지 확인
확장자만으로 알 수 없습니다. 글자를 표현하는 흔한 방식은 적어도 두 가지입니다.
<text font-family="Example Sans" font-weight="600">Sample</text>편집 가능한 텍스트입니다. 문자와 스타일 명령을 저장하며 렌더러가 글꼴을 찾아 보이는 글리프로 만듭니다.
윤곽선 텍스트는 다음과 비슷합니다.
<path d="M ... Z" />각 글자가 벡터 도형이 됐습니다. 글꼴은 필요 없지만 일반 편집 문자열은 아닙니다.
모든 마크업을 몰라도 확인할 수 있습니다.
- SVG 사본을 만드세요.
- 일반 텍스트 편집기로 여세요.
<text와<tspan를 검색하세요.- 보이는 글꼴 이름을 검색하세요.
- 없다면 글자가
<path>로 만들어졌는지 보세요.
벡터 편집기에서 텍스트 도구로 글자를 클릭하세요. 깜박이는 커서는 텍스트, 글리프 주변 노드는 윤곽선입니다.
원인 1: 원하는 글꼴이 설치되지 않음
font-family는 우선순위 있는 패밀리 목록입니다. MDN 문서처럼 렌더러는 목록에서 선택합니다. 첫 패밀리가 없으면 다음으로 넘어가 결국 sans-serif나 serif 같은 일반 패밀리를 씁니다.
흔한 경우입니다.
- 디자이너의 로컬 글꼴을 수신자가 갖고 있지 않음
- 한 컴퓨터에서만 구독 서비스 글꼴이 활성화됨
- 데스크톱에서 휴대폰, 태블릿, 커팅 앱, 오피스로 이동
- 글꼴 내부 패밀리 이름이 파일명이나 폴더 표시 이름과 다름
- 한 스타일만 설치됐지만 다른 굵기나 기울임을 요청
‘비슷한 것’을 설치해도 레이아웃은 복원되지 않습니다. 두 산세리프도 폭, 어센더, 커닝, 기준선 치수가 다릅니다. 닮아 보여도 가운데 단어가 벗어날 수 있습니다. 원하는 글꼴을 확보한 뒤 SVG 텍스트 수직 정렬 예제로 기준선과 텍스트 상자 및 시각 중심을 구분하세요.
원인 2: 기대한 웹 글꼴이 로드되지 않음
웹페이지 SVG는 페이지 CSS에서 글꼴을 받거나 @font-face가 있는 스타일 블록을 포함합니다. SVG 2는 CSS Fonts 모델의 다운로드 글꼴 지원을 요구합니다. URL 오류, 미배포 파일, 접근 차단, 미지원 형식, 스타일을 제공하는 페이지 대신 단독으로 열기에서 실패합니다.
개발자 도구를 열어 새로고침하세요. Network에서 글꼴 파일을 필터링해 실패 요청을 찾고 <text>의 계산 스타일에서 선언 이름 대신 실제 렌더링 글꼴을 확인하세요.
한 사이트에 삽입할 때만 되는 SVG는 독립 전달 파일이 아닐 수 있습니다. 비공개 브라우저 창과 다른 기기에서 직접 열어 로그인 글꼴 서비스, 캐시, 사이트 스타일시트 의존성을 드러내세요.
글꼴 내장은 휴대성을 높이지만 크기를 늘리고 앱 지원 한계가 있으며 라이선스가 허용해야 합니다. 데스크톱 라이선스가 데이터 재배포를 허용한다고 가정하지 말고 실제 조건을 보세요.
원인 3: 패밀리나 굵기가 정확히 맞지 않음
CSS 글꼴 매칭은 보이는 이름 이상을 사용합니다. 다음을 요청할 수 있습니다.
font-family: "Example Sans";
font-style: normal;
font-weight: 600;400과 700 파일만 있으면 굵기를 합성하거나 가까운 형태를 고릅니다. 가변 글꼴의 축과 인스턴스 이름은 앱마다 다르게 해석될 수 있습니다. 오래된 디자인이나 커팅 소프트웨어는 일부 OpenType 기능, 합자, 변형 설정을 무시할 수 있습니다.
원본과 SVG를 나란히 확인하세요.
- 정확한 패밀리 이름
- 스타일과 숫자 굵기
- 글자 간격
- 대소문자와 실제 문자
- 합자 같은 OpenType 기능
- 가변 글꼴 축 값
- 경로 위 글자와 세로 글자 동작
단어마다 수동 배율을 바꿔 불일치를 고치지 마세요. 잘못된 글리프를 유지하며 증상만 숨깁니다.
원인 4: 텍스트를 유지했지만 가져오는 앱이 다르게 처리
SVG 텍스트 배치는 데스크톱 출판 문서와 같지 않습니다. 출력기는 중첩 <tspan>, 개별 좌표, text-anchor, <textPath>를 쓰고 수신 앱은 합치거나 다시 묶거나 재해석합니다. 배지 재구성에는 편집 SVG 경로 위 텍스트 안내가 엠블럼, 안내 곡선, 텍스트를 분리해 각각 시험하게 합니다.
문서 배치는 Typst의 SVG 그림과 인라인 이미지 흐름을 따르세요. 캡션을 문서의 텍스트로 유지하면 그림 글자를 번호와 문단 서체에서 따로 확인합니다.
현재 Adobe SVG 내보내기 문서는 경로 위 텍스트가 모든 뷰어에서 같은 모습이 아닐 수 있다고 설명합니다. 편집 글꼴 출력과 모습을 유지하는 벡터 경로인 Convert To Outlines도 구분합니다.
정확한 글꼴이 있는데 위치가 달라지면 글꼴 변경 대신 구조를 보세요.
- 브라우저와 원본 편집기 렌더링 비교
- 문자마다 자체
x위치가 있는지 확인 - 텍스트 그룹의 중첩 변환 검사
text-anchor, 커닝, 기준선 설정이 제거됐는지 확인- 평범한 수평 텍스트 사본으로 경로 위 동작 분리
편집보다 모습이 중요한 로고, 배지, 한 줄 제목은 보통 윤곽선 전달이 더 안전합니다.
원인 5: 윤곽선으로 바꾼 뒤 편집을 기대함
글꼴 참조가 없어 대체는 불가능하지만 가져오기에서 놀랄 수 있습니다.
- 편집 단어 대신 복합 경로 글자가 들어옵니다.
- 복합 경로를 해제하면 글자 내부 공간이 채워질 수 있습니다.
- 여러 글리프가 그룹으로 들어옵니다.
- 제한된 앱이 경로를 합치거나 단순화할 수 있습니다.
- 편집 가능한 텍스트 버전보다 파일이 커질 수 있습니다.
글꼴 변경이 아닌 형태와 편집 가능성 변화입니다. 모양이 원본과 맞으면 출력은 역할을 한 것입니다.
항상 두 파일을 유지하세요.
- 편집 원본: 텍스트, 원래 글꼴 정보, 이름 있는 레이어, 원 앱 형식
- 전달 사본: 외형이 중요한 전달용 윤곽선 SVG, EPS, PDF
유일한 원본을 변환하지 마세요. 문구, 번역, 새 슬로건은 텍스트가 경로가 되면 느린 수작업이 됩니다.
어떤 해결책을 쓸까요?
| 사용처 | 권장 전략 | 검증 |
|---|---|---|
| 의미 있는 단어의 접근 가능한 웹 그래픽 | 올바른 웹 글꼴과 대체 목록의 텍스트 | 요청을 보며 직접 SVG와 페이지 시험 |
| 로고, 배지, 장식 레터링 | 윤곽선 전달 사본 | 브라우저와 두 번째 편집기에서 열기 |
| 수신자가 편집할 템플릿 | 텍스트와 허가된 글꼴 또는 합의한 시스템 대체 글꼴 | 수신 환경 시험 |
| 인쇄소나 제작 소프트웨어 | 편집 글자를 요구하지 않으면 윤곽선 | 내부 공간, 복합 경로, 실제 크기 검사 |
| 문자열이 바뀌는 현지화 | 모든 필요한 문자 체계를 지원하는 글꼴과 텍스트 | 대표 번역과 대체 동작 시험 |
사용처가 절충을 결정합니다. 텍스트는 의미와 편집을, 윤곽선은 모습을 유지합니다. 추가 의존성이나 원본 데이터 없이 하나로 둘을 최대화할 수 없습니다.
안전한 윤곽선 과정
외형이 중요한 전달에는 다음을 하세요.
- 텍스트가 있는 원본 저장
- 복사하고 파일명에
-outlined나-delivery추가 - 텍스트를 선택한 뒤 Create Outlines, Convert to Curves, Object to Path 등 실행
- 글자 구멍과 겹침 검사
- SVG 내보내기
- 브라우저와 두 번째 편집기에서 열기
- 일반 크기와 큰 배율에서 원본 비교
- 윤곽선 파일을 보내고 텍스트 원본과 라이선스 보관
글꼴 누락을 피하려고 래스터화하지 마세요. SVG 속 PNG는 대체를 막지만 확대 가능한 경로를 버립니다. 윤곽선은 실제 벡터를 유지합니다.
유일한 로고가 래스터일 때
텍스트와 윤곽선 원본이 모두 사라져 작은 PNG, JPG, 스크린샷만 있을 수 있습니다. 로고 벡터화 판단 안내가 추적과 다시 그리기 시점을 설명합니다. 글꼴 설치는 래스터를 고치지 못하며 비슷한 글꼴로는 맞춤 글자 수정을 재현하지 못할 수 있습니다.
이 경우 조건부로 PerfectVector 로고 벡터화가 보이는 글자를 벡터 도형으로 재구성합니다. 복원된 텍스트가 아닌 윤곽선이며 원 글꼴 식별, 커닝 복원, 다시 입력을 하지 않습니다. 보이는 로고 형태를 복구하고 새로 조판한 원본과 구분하세요.
더 넓은 전달 전략은 로고 파일 형식 안내를 보세요.
FAQ
다른 컴퓨터에서 다른 글꼴을 쓰는 이유는 무엇인가요? 편집 텍스트가 그 컴퓨터에 없는 글꼴을 지정해 대체 목록의 다른 패밀리가 사용되며 형태, 폭, 간격, 때로 정렬이 바뀝니다.
SVG가 글꼴을 자동 내장하나요? 아닙니다. 이름 지정, 페이지 CSS, 글꼴 자원 포함은 가능하지만 일반 텍스트가 데스크톱 파일을 자동 묶지 않습니다. 제공 여부, 브라우저 지원, 라이선스를 처리해야 합니다.
SVG 글자를 윤곽선으로 바꿀까요? 로고, 장식 글자, 인쇄, 제작 소프트웨어처럼 외형 고정이 필요하면 전달 사본을 바꾸세요. 문구, 접근성, 검색, 현지화가 중요하면 편집 원본에 텍스트를 유지하세요.
윤곽선 글자가 가져오기 후 편집되지 않는 이유는 무엇인가요? 문자를 경로로 바꿨기 때문입니다. 노드와 도형은 편집하지만 텍스트 커서나 글꼴 변경은 안 됩니다. 문구 변경이 필요하면 텍스트 원본을 유지하고 공유하세요.
PerfectVector가 래스터 로고의 원래 글꼴을 복원하나요? 아닙니다. 보이는 글자를 윤곽선으로 재구성하지만 글꼴 식별이나 문자, 커닝, 설정 복원은 하지 않습니다. 시각 형태 복구가 목표일 때 쓰세요.
Sources
- W3C — SVG 텍스트 —
<text>,<tspan>, 글꼴 속성, 배치, 다운로드 글꼴 지원입니다. - W3C — CSS Fonts Module Level 3 — 패밀리 매칭, 형태 선택, 누락, 시스템 대체입니다.
- MDN — SVG
font-family— 우선순위 패밀리와 일반 대체 글꼴입니다. - Adobe Illustrator — 윤곽선 텍스트 만들기 — 경로 변환과 텍스트 편집 상실입니다.
- Adobe Illustrator — 이미지 저장 — SVG 텍스트, 윤곽선, 경로 위 글자 호환성입니다.
원본이 없어 래스터 로고만 남았다면 PerfectVector로 보이는 글자를 윤곽선으로 재구성하고 두 번째 편집기에서 확인하세요. 텍스트가 남았다면 다시 추적하는 대신 글꼴 의존성을 해결하거나 전달 사본을 윤곽선으로 바꾸세요.
