SVG Font

오리지널 벡터 폰트 형식——SVG 경로를 폰트 글리프에 매핑하는 사람이 읽을 수 있는 XML 형식입니다.

.svg SVG Font Format

유형XML 기반 벡터 형식

압축없음 (평문)

파일 크기모든 형식 중 가장 큼

지원 범위Safari만 지원 (다른 곳에서는 폐지)

최적 용도디버깅, 소스 형식

Bobcorn파이프라인 소스

SVG Font란?

SVG 폰트는 W3C가 발표한 SVG 1.1 명세의 일부로 정의되었습니다. 전통적인 바이너리 폰트 형식과 달리 SVG 폰트는 <font> 요소 내에 SVG 경로 데이터로 글리프 윤곽을 삽입합니다. 각 글리프는 <glyph> 요소로 표현되며, d 속성에 형태를 설명하는 벡터 경로가 포함됩니다.

본질적으로 SVG 폰트는 폰트로 패키징된 SVG 드로잉입니다. SVG 파일에서 도형을 그리는 데 사용하는 경로 문법이 글자 윤곽과 아이콘 윤곽을 정의하는 데 그대로 재사용됩니다. 이 덕분에 SVG 폰트는 독보적인 검사 가능성을 가집니다——어떤 텍스트 편집기로도 열어 모든 글리프의 실제 기하학적 데이터를 읽을 수 있습니다.

작동 원리

SVG 폰트 파일은 글리프 경로를 표준 XML 구조 안에 감쌉니다. 다음은 간략화된 예시입니다:

SVG Font 구조

<font id="MyIcons">
  <font-face font-family="MyIcons" units-per-em="1024"/>
  <glyph glyph-name="home" unicode="&#xE001;"
         d="M512 0L0 448h128v576h256V640h256v384h256V448h128z"/>
  <glyph glyph-name="search" unicode="&#xE002;"
         d="M..."/>
</font>

<font-face> 요소는 폰트 패밀리 이름과 좌표 체계(units-per-em)를 선언합니다. 각 <glyph>는 Unicode 코드 포인트를 벡터 경로에 매핑합니다. d 속성은 일반 SVG <path> 요소와 완전히 동일한 경로 문법을 사용합니다.

이것은 Bobcorn 파이프라인의 중간 형식입니다. 개별 SVG 아이콘이 먼저 이 SVG 폰트 구조로 조립되고, 그 후 바이너리 형식으로 변환됩니다: SVG Font → TTF → WOFF / WOFF2 / EOT.

장단점

장점

사람이 읽을 수 있음——어떤 텍스트 편집기로도 열기 가능
글리프 경로와 메타데이터 디버깅 용이
완전한 벡터 기반으로 무한 확장 가능
소스 확인에 컴파일 불필요

단점

모든 폰트 형식 중 파일 크기가 가장 큼
Chrome, Firefox, Edge에서 폐지됨
압축이 전혀 없음
힌팅 지원 없음
Windows에서 렌더링 품질이 낮음

브라우저 지원

SVG 폰트 지원은 대부분의 주요 브라우저에서 제거되었습니다. Chrome은 버전 38(2014년)에서 SVG 폰트 지원을 중단했고, Firefox는 구현한 적이 없으며, Chromium 기반의 Edge도 지원하지 않습니다. 현재 SVG 폰트를 렌더링하는 유일한 브라우저는 Safari와 iOS Safari입니다.

실질적인 웹 사용에서 SVG 폰트는 사실상 레거시 형식입니다. 최종 사용자 대상 배포 형식으로는 절대 사용하지 마세요. 대신 WOFF2를 사용하세요.

SVG Font를 사용하는 경우

폰트 생성 문제 디버깅——평문 XML이기 때문에 경로 데이터를 직접 읽고 원본 SVG 아이콘과 비교하여 문제를 진단할 수 있습니다.
빌드 파이프라인의 소스 형식으로——Bobcorn을 포함한 많은 폰트 생성 도구가 바이너리 형식으로 변환하기 전 중간 표현으로 SVG 폰트를 사용합니다.
레거시 iOS < 5 지원——오늘날에는 매우 드물지만, WOFF 지원 이전의 구형 iOS 기기는 웹 폰트로 SVG 폰트만 사용할 수 있었습니다.

Bobcorn에서

Bobcorn에서 SVG Font는 생성 파이프라인의 첫 번째 단계입니다. SVG 아이콘이 SVG 폰트로 조립되고, 그 후 TTF로 변환되며, TTF에서 WOFF, WOFF2, EOT로 변환됩니다. 디버깅 목적으로 SVG 폰트 파일을 내보낼 수 있습니다——글리프가 잘못 표시될 때 원시 경로 데이터를 검사하는 데 특히 유용합니다.