SVG 경로 위 텍스트: 편집 가능한 배지 글자 다시 만들기
경로를 따르는 편집 가능한 SVG 텍스트로 배지를 만드세요. 글자를 가운데 정렬하고 방향과 글꼴을 확인하며, 외곽선 사본을 만들기 전에 엠블럼을 분리해 두세요.
목차
SVG 텍스트를 경로에 배치하려면 ID가 있는 경로를 정의하고 <text> 안의 <textPath>에서 참조한 다음 태그 사이에 글자를 작성하세요. 가운데 정렬에는 startOffset="50%"와 text-anchor="middle"을 함께 사용하세요. 아트워크를 다시 만들지 않고 문구를 바꿀 수 있도록 엠블럼은 별도 그룹에 두세요.
이러한 분리는 동호회 배지, 상점 마크, 행사 로고를 복원할 때 유용합니다. 중앙 엠블럼에는 벡터 경로가 필요하면서도 날짜를 수정하거나 이름을 바꿔야 할 수 있습니다. 배지 전체를 추적하면 편집 가능한 텍스트 문자열이 아니라 글자 도형이 만들어집니다. 문구를 계속 편집해야 한다면 타이포그래피를 편집 가능한 텍스트로 다시 만드세요.
엠블럼 옆에 가로 글자를 배치한다면 textLength로 직선 SVG 라벨을 맞추고 글자 비율을 조정하기 전에 간격 변화를 비교하세요.
세 부분을 분리해서 시작하기
배지에는 엠블럼, 안내 경로, 그 경로를 따르는 텍스트가 필요합니다. 안내 경로는 글자의 위치를 제어하며 완성된 디자인에서 보일 필요는 없습니다. MDN의 textPath 참조는 텍스트와 경로 사이의 href 연결을 설명합니다.
| 부분 | 포함하는 내용 | 독립적으로 바꿀 수 있는 것 |
|---|---|---|
| 엠블럼 그룹 | 중앙 그림의 도형 | 색상, 위치, 배율 |
| 안내 경로 | 텍스트 기준선으로 쓰는 곡선 | 반지름, 방향, 끝점 |
| 편집 가능한 텍스트 | 문자와 글꼴 설정 | 문구, 서체, 크기, 간격 |
아래 예제에서는 SVG 코드로 단순한 소나무와 반원 안내 경로를 그렸습니다. 둘 다 직접 만든 시연용 아트워크이며 PerfectVector 변환 출력이 아닙니다. 배지 문구는 PINE TRAIL CLUB이며 구성 단계 내내 텍스트 문자열로 유지됩니다.
편집 가능한 배지 만들기
이 코드를 badge.svg로 저장하고 브라우저에서 여세요. 파일은 편집 가능한 마스터로 보관하세요. 형식이 낯설다면 SVG 파일 안내에서 텍스트, 경로, 포함된 이미지의 차이를 확인할 수 있습니다.
<svg xmlns="http://www.w3.org/2000/svg"
width="400" height="400" viewBox="0 0 400 400"
role="img" aria-labelledby="badge-title">
<title id="badge-title">Pine Trail Club badge</title>
<defs>
<path id="badge-arc"
d="M70 215 A130 130 0 0 1 330 215" />
</defs>
<circle cx="200" cy="205" r="166"
fill="#f8f3e7" stroke="#214b41" stroke-width="6" />
<g id="emblem" fill="#214b41">
<path d="M200 150 148 220 175 220 133 273
267 273 225 220 252 220Z" />
<path d="M188 269H212V303H188Z" />
</g>
<text fill="#214b41" font-family="Georgia, serif"
font-size="29" text-anchor="middle">
<textPath href="#badge-arc" startOffset="50%">PINE TRAIL CLUB</textPath>
</text>
</svg>경로는 (70, 215)에서 시작하여 위쪽 반원을 따라 (330, 215)까지 이어집니다. 반지름은 130단위입니다. 경로를 <defs>에 두면 눈에 보이는 스트로크를 그리지 않고도 참조할 수 있습니다. 옅은 바깥 원은 별도로 칠해진 도형입니다.
PINE TRAIL CLUB을 자신만의 짧은 이름으로 바꾸고 저장한 뒤 다시 불러오세요. 나무는 고정된 상태로 새 문구가 같은 안내 경로를 따라야 합니다. 이름이 길어지면 다시 맞춤 상태를 확인해야 합니다. 가운데 정렬만으로 임의의 텍스트가 호에 맞는 것은 아닙니다.
오프셋과 앵커를 함께 사용하여 가운데 정렬하기
startOffset="50%"는 텍스트의 기준 위치를 경로의 중간에 둡니다. text-anchor="middle"은 텍스트의 가운데를 그 위치에 맞춥니다. 하나는 곡선 위의 위치를 선택하고 다른 하나는 텍스트의 어느 부분을 그곳에 둘지 선택합니다. startOffset 참조와 text-anchor 참조는 이 제어 방식을 설명합니다.
text-anchor만 start로 바꿔 보세요. 이 왼쪽에서 오른쪽으로 쓰는 텍스트는 이제 중간 지점에서 시작하여 오른쪽 끝점으로 이어집니다. 브라우저 테스트에서는 글자가 오른쪽으로 이동하고 문구 일부가 사용 가능한 호를 벗어났습니다. 글꼴 크기를 조정하기 전에 middle로 되돌리세요.
대칭 배지는 수학적으로 가운데 정렬한 뒤에도 결과를 눈으로 살펴보세요. 글자마다 모양과 옆 여백이 달라 텍스트 진행 폭을 가운데 맞춰도 작은 시각적 조정이 필요할 수 있습니다. 결과가 비슷해 보일 때까지 관련 없는 여러 좌표를 바꾸기보다 이러한 조정을 의도적으로 수행하세요.
텍스트를 이동하기 전에 경로 방향 확인하기
이 위쪽 호의 방향을 정확히 뒤집으려면 d 값을 다음으로 바꾸세요.
d="M330 215 A130 130 0 0 0 70 215"시작점과 끝점이 바뀌고 호의 sweep 플래그가 변경됩니다. 두 호 플래그를 시각적으로 설명하는 SVG 호 플래그의 네 가지 조합을 참고하세요. 곡선 도형의 위치는 그대로지만 텍스트는 반대 방향으로 따라갑니다. 브라우저 테스트에서는 이 반전이 글자의 방향을 바꿨습니다. 이 배지 위쪽에 똑바로 선 글자를 놓으려면 원래 경로로 되돌리세요.
경로 반전은 철자 순서를 뒤집거나 언어의 쓰기 방향을 설정하는 것과 다릅니다. 문구는 그대로 유지하세요. SVG 텍스트 배치 명세는 글리프가 경로를 따라 배치되는 방식을 설명합니다. 아래쪽 문구에는 위쪽 텍스트가 엠블럼을 가로지를 때까지 이동시키지 말고 별도의 아래쪽 안내 경로를 만들고 테스트하세요.
최종 간격을 정하기 전에 글꼴 선택하기
이 예제는 Georgia를 요청하고 그다음 일반 serif 대체 글꼴을 요청합니다. 요청한다고 글꼴이 SVG에 포함되지는 않습니다. MDN의 font-family 참조에 설명된 대로 렌더러는 글꼴 목록에서 사용할 수 있는 서체를 선택합니다.
Chromium 시연에서 같은 문구의 글꼴을 Georgia, serif에서 Arial, sans-serif로 바꾸자 측정된 텍스트 진행 폭이 달라졌습니다. 호와 엠블럼은 그대로였습니다. 중요한 확인 대상은 차지하는 범위와 글자의 모양이며, 다른 컴퓨터에서는 다르게 렌더링될 수 있는 특정 너비가 아닙니다.
실제 배지에서는 크기나 자간을 조정하기 전에 원하는 글꼴과 굵기를 정하세요. 그런 다음 사용할 환경에서 SVG를 다시 여세요. 그곳에서 글꼴이 바뀐다면 SVG 글꼴 문제 해결 안내로 대체 글꼴 또는 가져오기 동작을 구분하세요.
문구가 호를 벗어난다면 더 짧은 문구, 더 작은 글꼴 크기, 더 넓은 안내 경로를 시도하세요. 변경할 때마다 배지 전체를 확인하세요. 안내 경로의 반지름을 키우면 글자가 바깥 테두리에 가까워질 수 있고, 글자 크기를 줄이면 작게 인쇄한 배지를 읽기 어려워질 수 있습니다. 왜곡이 디자인 의도에 포함되지 않는 한 고정된 범위를 채우려고 글자를 늘이지 마세요.
추적이 필요한 아트워크만 복원하기
엠블럼이 PNG나 JPG 안에만 있다면 복원 작업과 타이포그래피 작업을 분리하세요. 엠블럼을 최대한 깔끔하게 분리한 소스 사본을 사용하세요. 배지를 다시 만드는 시각적 기준으로 전체 원본을 보관하세요.
PerfectVector로 래스터 엠블럼을 벡터화한 뒤 실루엣, 내부 틈, 작은 세부 요소를 소스와 비교하세요. 채택한 SVG 아트워크를 엠블럼 그룹에 사용하고 원하는 글꼴로 문구를 별도로 다시 만드세요. PerfectVector는 이미지에서 벡터 경로를 만듭니다. 이 작업 흐름은 OCR, 글꼴 식별, 편집 가능한 곡선 텍스트의 자동 재구성에 의존하지 않습니다.
원본 벡터 엠블럼이 있다면 재사용하세요. 글자가 직접 그린 것이고 불규칙한 모양이 중요하다면 글꼴로 대체하지 말고 손글씨 벡터화 작업 흐름을 따르세요. 로고 벡터화 안내는 추적, 다시 입력하기, 수동 수정 사이의 선택을 더 포괄적으로 다룹니다.
예제의 단순한 나무는 가져오기의 복잡한 문제를 피합니다. 기존 엠블럼은 다른 좌표계를 사용하거나 변환을 포함할 수 있습니다. 배지의 viewBox 안에서 해당 그룹의 크기와 위치를 조정한 뒤 텍스트를 표시한 상태로 다시 확인하세요. 잘못 배치된 엠블럼을 보완하려고 글자 안내 경로를 바꾸지 마세요.
편집 가능한 마스터를 보관하고 전달용 사본 만들기
이름, 날짜, 문구가 바뀔 수 있다면 편집 가능한 텍스트가 유용한 마스터입니다. 고정된 배지를 다른 편집기나 제작 도구에 보낼 때 외곽선 사본을 사용하면 받는 사람이 글꼴의 글리프 모양을 재현할 필요가 없어집니다. 문구는 벡터 경로가 되며 일반적인 텍스트 편집 기능을 잃습니다.
Illustrator의 SVG 저장 옵션에서 Convert To Outlines는 문자를 경로로 변환합니다. Adobe는 내보낸 경로 위 텍스트가 SVG 뷰어에서 다르게 렌더링될 수 있다고도 경고합니다. 이는 대상 환경에서 내보낸 사본을 확인해야 하는 이유이며 모든 후속 도구가 배지 전체를 재현한다는 보장은 아닙니다. Adobe의 SVG 저장 문서를 참고하세요.
다음 순서로 전달하세요.
- 무엇이든 외곽선으로 변환하기 전에 편집 가능한 텍스트 마스터를 저장하세요.
- 문구, 글꼴, 경로 방향, 가운데 정렬, 간격을 확인하세요.
- 별도의 전달용 사본을 만들고 편집기에서 텍스트를 외곽선으로 변환하세요.
- 사본을 다시 열어 모든 글자, 글자 내부의 빈 공간, 틈, 엠블럼을 비교하세요.
- 받는 애플리케이션에서 원하는 출력 크기로 배지를 확인하세요.
외곽선 변환은 현재의 글꼴 모양을 고정합니다. 변환할 때 잘못된 대체 글꼴이 적용되어 있다면 잘못된 글자가 고정됩니다. 웹 이미지에서는 유용한 접근성 이름도 유지하세요. 외곽선으로 된 글자 도형 자체는 원래 텍스트 문자열을 담지 않습니다.
FAQ
SVG 텍스트가 경로 가운데에 정렬되지 않는 이유는 무엇인가요? 가운데 정렬 예제에서는 startOffset="50%"와 text-anchor="middle"을 함께 사용하세요. 오프셋 50%에 시작 앵커를 사용하면 문구가 안내 경로 중간에서 시작합니다. 경로 모양과 전체 문구가 들어맞는지도 확인하세요.
텍스트가 거꾸로 보이는 이유는 무엇인가요? 안내 경로의 방향을 확인하세요. 텍스트는 그려진 경로를 따라가므로 경로를 뒤집으면 글자의 방향이 바뀔 수 있습니다. 텍스트를 이동하거나 철자를 바꾸기 전에 안내 경로 방향을 테스트하세요.
배지를 벡터화하면 편집 가능한 곡선 텍스트가 만들어지나요? 벡터화는 보이는 글자 모양을 아트워크로 재구성합니다. 문구를 편집하려면 원하는 글꼴과 textPath 안내 경로로 텍스트를 별도로 다시 만드세요. 외곽선 전달용 사본을 만들기 전에 편집 가능한 텍스트 마스터를 보관하세요.
Sources
- MDN — textPath — 편집 가능한 텍스트와 참조 경로 연결.
- MDN — startOffset — 안내 경로를 따른 텍스트 위치 지정.
- MDN — text-anchor — 기준 위치에 대한 텍스트 정렬.
- W3C — SVG 2 텍스트 — 글리프 배치와 경로 위 텍스트 배치 규칙.
- MDN — font-family — 사용할 수 있는 글꼴과 대체 글꼴 계열 선택.
- Adobe — Illustrator에서 아트워크 저장하기 — SVG 텍스트 외곽선 변환과 경로 위 텍스트 내보내기의 제약.
확인된 엠블럼 주변에 글자를 구성하고 배지가 확정될 때까지 문구를 편집 가능한 상태로 유지하세요. 엠블럼이 래스터 이미지에 갇혀 있다면 벡터 경로를 복원하고 작은 세부 요소를 살펴본 뒤 채택한 아트워크를 배지 마스터에 사용하세요.
