TTF SVG 변환

Q: SVG 글꼴에 커닝과 합자가 유지되나요?

일부만 유지됩니다. SVG 글꼴 형식은 `hkern` 요소로 커닝 쌍을, 여러 문자로 된 글리프도 저장할 수 있지만, 작은 대문자, 대체 글자, 문맥 규칙 같은 OpenType 기능 테이블에 해당하는 것은 없습니다. 이런 기능이 필요하면 TTF를 보관하십시오.

이 페이지는 트루타입 글꼴을 SVG 글꼴로 바꿉니다. SVG 글꼴은 하나의 XML 파일로, 모든 문자가 <glyph> 요소이고 그 윤곽선이 SVG 패스 데이터로 적혀 있습니다. 아이콘 글꼴 도구와 글꼴 편집기에 유용하지만, 텍스트를 그림으로 만든 것과는 다릅니다.

또는 TTF, OTF, WOFF … 파일을 여기에 끌어다 놓으세요 ·

파일당 최대 95 MB· 최대 20개 파일· 30분 뒤 삭제

출력

변환할 형식

파일은 UltKit 서버에서 처리되며 30분 뒤 삭제됩니다.

사용 방법

1
TTF 업로드
.ttf 파일을 한 번에 최대 20개, 개당 95 MB까지 추가합니다. 아이콘 글꼴과 본문용 글꼴 모두 변환됩니다.
2
출력은 SVG 글꼴 그대로
변환할 형식은 SVG 글꼴로 설정되어 있습니다. SVG 출력에는 힌팅이 적용되지 않으므로 해당 옵션은 사라지며, 고급 설정의 패밀리 이름으로 글꼴 이름은 여전히 바꿀 수 있습니다.
3
SVG로 변환
SVG로 변환을 누르고 .svg 파일을 다운로드합니다. 텍스트 편집기, Inkscape, FontForge에서 열면 글리프 패스를 볼 수 있습니다.

SVG 글꼴과 텍스트 SVG 이미지의 차이

TTF SVG 변환을 검색하면 서로 다른 두 가지 목적이 섞여 나옵니다. 하나는 SVG 글꼴로, 2001년 W3C의 SVG 1.0 권고안에서 정의한 글꼴 형식입니다. <font> 요소 안에 문자마다 유니코드 값, 전진 폭, 패스로 된 윤곽선을 담은 <glyph>가 들어 있습니다. 다른 하나는 텍스트를 SVG 그림으로 만든 것, 즉 로고나 이름의 글자를 한 줄로 배치해 도형으로 저장한 것입니다. 이 변환기는 첫 번째를 만듭니다. 가진 것이 글꼴이 아니라 로고 이미지라면 PNG SVG 변환으로 패스를 따내십시오.

TrueType 윤곽선을 SVG 패스 데이터로 바꿔도 모양은 전혀 손실되지 않습니다. SVG 패스는 TrueType이 쓰는 2차 곡선을 그대로 지원하므로 각 윤곽이 있는 그대로 기록됩니다. 남지 않는 것은 윤곽선 주변의 모든 것입니다. 힌팅 명령, 단순 커닝을 넘어서는 OpenType 기능, 운영체제가 글꼴을 설치할 때 필요한 바이너리 테이블이 빠집니다. SVG 글꼴은 Windows나 macOS에 설치할 수 없습니다.

SVG 글꼴 파일의 실제 모습

SVG 글꼴 마크업을 줄인 예시

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <font id="BrandSans" horiz-adv-x="1229">
      <font-face font-family="브랜드 산스" units-per-em="2048" ascent="1638" descent="-410" />
      <glyph unicode="L" glyph-name="L" horiz-adv-x="1100" d="M180 0V1456H360V160H1040V0Z" />
    </font>
  </defs>
</svg>

이 페이지가 만드는 것입니다. 파일 하나에 문자마다 <glyph> 하나가 있고, y축이 위를 향하는 글꼴 단위로 기록됩니다.

FontForge, Inkscape, 아이콘 글꼴 도구에서 열림
컴퓨터에 설치할 수 없음
현재 Chrome, Edge, Firefox에서 불러오지 않음

색이 있는 여러 겹의 글리프를 담은 SVG 테이블이 추가된 일반 OTF나 TTF입니다.

일반 글꼴처럼 설치
이모지와 여러 색 레터링에 사용
앱과 브라우저마다 지원 정도가 다름

SVG 글꼴의 등장과 퇴장

SVG 1.0이 font 요소를 정의: 2001
SVG 웹 글꼴이 필요했던 마지막 iPhone Safari: iOS 4.1
2014년 SVG 글꼴 지원 제거: Chrome 38
글꼴 장을 삭제: SVG 2

TTF

TrueType 글꼴(TTF)

TTF는 Apple이 1980년대 후반에 개발해 1991년에 공개하고 이후 Microsoft에 라이선스한 TrueType 글꼴 형식입니다. 2차 곡선으로 글리프 윤곽을 정의하고, 화면에서 글자가 선명하게 보이도록 하는 힌팅 명령을 포함합니다. TrueType은 모든 데스크톱 운영 체제, 워드프로세서, 디자인 앱에서 지원됩니다. OpenType의 일부 고급 타이포그래피 기능이 없고 웹 글꼴 형식보다 용량이 큽니다.

압축 방식: 무손실
투명도: –
애니메이션: –
도입 연도: 1991 · Apple

TTF 변환

SVG

SVG 벡터 그래픽(Scalable Vector Graphics)

SVG는 2001년 W3C가 표준화한 XML 기반 벡터 형식입니다. 픽셀 대신 도형, 패스, 텍스트를 기술하므로 어떤 크기에서도 선명하고, 로고와 아이콘은 보통 용량이 아주 작습니다. 투명도, CSS 스타일, 스크립트, 애니메이션을 지원하며 모든 브라우저가 기본으로 렌더링합니다. SVG는 사진에는 맞지 않고, 복잡한 일러스트는 렌더링이 느려질 수 있습니다. Illustrator, Inkscape, Figma와 브라우저에서 열고 편집할 수 있습니다.

압축 방식: –
투명도: 예
애니메이션: 예
도입 연도: 2001 · W3C

SVG 변환

TTF를 SVG로 변환하면 각 글리프의 윤곽선이 SVG 글꼴 안에 편집 가능한 SVG 패스 데이터로 기록됩니다. 아이콘 글꼴 도구, 글꼴 편집기, 오래된 웹 글꼴 키트가 이를 사용하며, 최신 웹페이지에서 글꼴을 불러오는 방법은 아닙니다.

TTF SVG 변환 자주 묻는 질문

지금도 CSS @font-face에서 SVG 글꼴을 쓸 수 있나요?

대부분의 브라우저에서는 쓸 수 없습니다. Chrome은 2014년 38 버전에서 SVG 글꼴 지원을 없앴고, Firefox와 Internet Explorer는 처음부터 지원하지 않았습니다. 웹사이트용이라면 TTF WOFF2 변환으로 TTF를 변환하십시오.

글리프를 그림에 붙여 넣으면 왜 위아래가 뒤집히나요?

SVG 글꼴은 글꼴 자체의 좌표계를 써서 y축이 기준선에서 위쪽으로 향하지만, 일반 SVG 그림은 위에서부터 아래로 y를 셉니다. scale(1,-1) 변환 등으로 패스를 세로로 뒤집으면 바르게 보입니다.

Cricut이나 레이저 커터용으로 글자를 SVG 패스로 만들려면 어떻게 하나요?

TTF를 설치하고 Inkscape나 Illustrator에서 글자를 입력한 뒤 텍스트를 윤곽선으로 변환합니다. Inkscape에서는 패스 › 객체를 패스로, Illustrator에서는 문자 › 윤곽선 만들기입니다. 그 결과를 SVG로 저장하십시오. SVG 글꼴은 글자를 하나씩 따로 담을 뿐 단어로 배치되어 있지 않습니다.

SVG 글꼴에 커닝과 합자가 유지되나요?

일부만 유지됩니다. SVG 글꼴 형식은 hkern 요소로 커닝 쌍을, 여러 문자로 된 글리프도 저장할 수 있지만, 작은 대문자, 대체 글자, 문맥 규칙 같은 OpenType 기능 테이블에 해당하는 것은 없습니다. 이런 기능이 필요하면 TTF를 보관하십시오.

SVG 글꼴 출력이 아이콘 글꼴에 유용한가요?

네, 오늘날 주된 용도가 바로 그것입니다. IcoMoon 같은 아이콘 글꼴 도구는 SVG 글꼴을 가져올 수 있어서, 오래된 아이콘 글꼴에서 아이콘을 꺼내 편집하고 새 세트를 만들거나 아이콘마다 개별 SVG로 내보낼 수 있습니다.