Softonic

SVG 원형 문자 생성기

단계 1 / 2
다음

원형 경로를 따르는 텍스트는 배지, 인장, 로고에서 자주 쓰입니다. SVG에서는 <textPath>로 텍스트 요소가 보이지 않는 경로를 따르게 합니다. 이 도구는 브라우저에서 완전한 SVG를 만듭니다. 텍스트, 반경, 글꼴 크기, 문자 간격, 시작 위치, 색상, 경로 방향을 조절한 뒤 SVG를 복사하거나 내려받으세요.

텍스트를 원 주위에 곡선 형태로 배치하는 방법

  1. 1

    텍스트를 입력하세요

    단한 문장(3~8단어)은 가장 잘 읽힌다. 긴 문장은 작은 반경 내에서 서로를 감싸며 흐른다.

  2. 2

    반경을 설정하세요

    반경이 클수록 곡선이 부드러워져 글자가 더 선명하게 표시됩니다. 반면 반경이 너무 작으면 글자가 크게 기울어집니다.

  3. 3

    시작 위치를 옮기세요

    시작 오프셋 %로 첫 글자를 경로를 따라 이동합니다. 자유 각도 회전이 아니라 경로 위 위치를 정하는 기능입니다.

  4. 4

    크기, 간격, 방향을 조절하세요

    글꼴 크기, 문자 간격, 색상, 시계 방향 또는 반시계 방향의 경로 방향을 조절할 수 있습니다.

  5. 5

    SVG를 복사하세요

    출력 결과에는 보이지 않는 경로, `<textPath>` 및 폰트 스타일링이 포함되어 있으며, 어떤 페이지에도 바로 적용할 수 있습니다.

textPath의 내부 작동 원리

<svg viewBox="0 0 300 300">
  <defs>
    <path id="ring" d="M 150,150 m -100,0 a 100,100 0 1,1 200,0 a 100,100 0 1,1 -200,0" />
  </defs>
  <text font-family="Inter" font-size="24" font-weight="700">
    <textPath href="#ring" startOffset="50%" text-anchor="middle">
      CDEM SOLUTIONS . EST 2024 .
    </textPath>
  </text>
</svg>

d 속성은 m/a(모브투/아크) 명령어를 사용하여 완전한 원을 그리며, 이후 <textPath>가 그 원을 따라 문자열을 배치합니다. startOffset는 경로 상의 백분율 값을 나타내고, text-anchor="middle"는 해당 오프셋 지점에서 텍스트를 중심으로 정렬합니다.

반지름 대 가독성

반경 (px) 느낌 적합한 용도
40-60 매우 밀집하고 왜곡된 형태 추상 로고만 사용 가능
80–120 클래식 배지 앱 아이콘 및 동전
140-200 부드러운 아크 커피 로고 및 상징 기호
250 이상 거의 직선형 헤더 장식

일반 프리셋

  • 상단 아크, 180°에서 시작하여 원의 180°를 따라 이어집니다. 상반부는 왼쪽에서 오른쪽으로 읽을 수 있습니다.
  • 플립 기능을 사용한 하단 아크: 경로 방향을 반전하거나 side="right"를 사용하여 텍스트가 뒤집힌 상태에서도 정확하게 표시되도록 합니다.
  • 전체 링(Full ring), 텍스트가 한 번만 자동으로 줄이어 표시됩니다. 연결 지점이 불균형하지 않도록 시작 및 끝에 간격 기호(.)를 추가하세요.

내보내기 팁

  • 인라인 SVG를 사용하면 currentColor 또는 CSS의 사용자 정의 속성을 적용하여 채우기 색상을 설정할 수 있습니다.
  • SVG 내에 웹 폰트를 삽입하는 것을 피하세요. 대신 글로벌 CSS에서 해당 폰트를 명시하면 브라우저가 이미 로드된 폰트를 재사용할 수 있습니다. 정적 이미지(PNG 또는 페이콘 이미지)가 필요할 경우, SVG 파일을 원하는 최종 크기로 래스터화 도구를 사용하여 처리하세요. SVG는 무손실적으로 확대/축소되지만 일부 플랫폼에서는 여전히 비트맵 형태를 요구합니다.

자주 묻는 질문

textPath는 경로 방향을 따릅니다. 반시계 방향을 선택하고 미리 보기를 보면서 시작 오프셋 %를 움직여 보세요. 정확한 아래쪽 호가 필요하면 내려받은 SVG에 별도 경로를 추가해 편집하세요.

색상 선택기는 fill을, 슬라이더는 글꼴 크기와 문자 간격을 변경합니다. 굵기와 글꼴 계열은 이 도구의 제어 항목이 아니지만, 복사한 <text> 요소에서 SVG/CSS로 편집할 수 있습니다.

<textPath>는 크롬, 파이어폭스, 사파리 및 엣지에서 10년 이상 지원되어 왔습니다. IE11에서는 부분적으로만 지원되므로 여전히 필요하다면 배지를 사전 레이스터화하세요.

텍스트 요소에 letter-spacing="2"(또는 그 이상의 문자)를 추가하세요. 반경이 좁은 경우 이로 인해 가독성이 크게 향상됩니다.

아니요. 텍스트와 SVG는 브라우저에서 생성됩니다. 문구는 서버로 전송되거나 저장되지 않습니다.

관련 도구

Material Design 색상 선택기

Material Design 색상 팔레트를 둘러보세요. 어떤 음영(50부터 A700까지)이든 HEX, RGB, HSL로 한 번에 복사합니다.

십자수 도안 만들기

JPEG, PNG, WebP를 10–150칸, 2–40가지 전용 색상, 기호, 정확한 스티치 수와 원단 크기가 포함된 인쇄용 십자수 도안으로 변환하세요.

이미지 포맷 변환기

브라우저에서 바로 이미지를 JPG, PNG, WebP로 변환하세요. 손실 형식의 품질을 조절하고 PNG와 WebP의 투명도는 그대로 유지됩니다.

모눈종이 생성기

인쇄용 모눈종이를 온라인으로 만드세요: 사각 또는 점 격자를 선택하고 간격을 mm로 설정하며 A4 또는 Letter와 원하는 선 색을 지정한 뒤, 인쇄하거나 선명한 SVG로 내려받으세요.

Pantone to HEX 변환기

화면과 인쇄 매칭을 위해 Pantone PMS 색상을 가장 가까운 HEX, RGB, CMYK 값으로 변환하고 견본 미리보기를 제공합니다.

깃발 만들기

여섯 가지 레이아웃, 색상, 텍스트, 기호로 간단한 맞춤 3:2 깃발을 브라우저에서 디자인하세요. SVG 또는 PNG를 내려받거나 브라우저 인쇄 대화상자를 열 수 있습니다.

이 도구는 다른 언어로도 제공됩니다