텍스트를 SVG 벡터 경로로 변환. 폰트 파일을 업로드하면 outline path가 추출되고, 안 하면 SVG text 요소로 출력됩니다.
✒️ SVG 미리보기 SVG text mode
SVG 코드
CSS 인라인 사용법

텍스트 → SVG 사용법

  1. 변환할 텍스트, 크기, 색상을 입력합니다.
  2. 정확한 outline path가 필요하면 폰트 파일을 업로드합니다(.ttf/.otf/.woff/.woff2).
  3. 업로드 안 해도 SVG text 요소로 즉시 출력됩니다.
  4. SVG 다운로드 또는 코드를 복사해 사용합니다.

주요 기능

  • 2가지 모드: Outline path (폰트 업로드 시) · SVG text (시스템 폰트)
  • .ttf · .otf · .woff · .woff2 모든 폰트 형식 지원
  • 색상·배경·크기 자유 조정
  • SVG 다운로드 + 코드 복사
  • CSS 인라인 사용법 안내

활용 예시

  • 로고 디자인 — 폰트가 없는 환경에서도 보이는 텍스트 로고
  • 아이콘 라이브러리 — 글자 모양 아이콘을 SVG로
  • 인쇄 그래픽 — 폰트 임베드 없이 정확한 글자 형태
  • CSS 마스크 — clip-path · mask-image 소스
  • SVG 애니메이션 — stroke-dasharray 글자 그리기 효과

Outline path vs SVG text 차이

Outline path는 글자의 실제 곡선을 SVG <path>로 변환합니다. 어떤 디바이스에서도 폰트 설치 없이 동일하게 보이며, 일러스트레이터의 "Create Outlines"와 같습니다. SVG text는 <text> 요소를 쓰는데, 사용자 디바이스에 해당 폰트가 없으면 fallback 폰트로 표시됩니다. 정확성은 outline path가 좋고, 파일 크기는 SVG text가 작습니다.

자주 묻는 질문

왜 폰트 파일을 업로드해야 하나요?

SVG path로 정확한 outline을 만들려면 폰트의 글리프 데이터가 필요합니다. 시스템 폰트는 브라우저가 접근할 수 없어 path 추출이 불가능합니다.

한글 폰트도 가능한가요?

네, opentype.js가 한글 글리프도 지원합니다. 단, 한글 폰트 파일은 보통 큽니다(10~30MB).

상업용 폰트를 SVG로 변환해도 되나요?

폰트 라이선스에 따라 다릅니다. 웹 임베드 라이선스가 있는 폰트만 가능하며, "outline 변환"을 허용하지 않는 폰트도 있으니 EULA를 확인하세요.

완전 무료?

네, 모든 처리는 브라우저에서만 이루어집니다.