SVG textLength: 글자를 왜곡하지 않고 레이블 맞추기

SVG 레이블에 특정 길이가 필요하고 작은 간격 보정이 허용된다면 textLength와 lengthAdjust="spacing"을 사용하세요. 글리프 모양은 유지됩니다. spacingAndGlyphs를 선택하면 렌더러가 텍스트 방향으로 글자 자체를 늘리거나 압축할 수 있습니다. 이는 SVG 텍스트 명세가 정의하는 두 모드입니다.

주의할 점은 목표입니다. textLength는 최대 너비가 아니라 요청 길이입니다. 긴 레이블을 줄이듯 짧은 레이블도 늘릴 수 있습니다. 줄바꿈도 만들지 않습니다.

각 조정이 바꾸는 것

lengthAdjust 값 없이 textLength를 설정하면 기본은 spacing입니다. MDN textLength 참고 문서는 요청 길이와 조정 모드가 함께 동작하는 방식을 설명합니다.

일반적인 브랜드 디자인에서는 작은 보정을 적용하고 확인하세요. 많이 줄여야 하는 레이블이라면 보통 글꼴 크기를 줄이거나 문구를 짧게 하거나 레이아웃 공간을 넓히는 편이 낫습니다.

같은 목표 길이의 짧은 레이블과 긴 레이블

마름모 문양을 직접 그리고 SVG 64단위 글꼴 크기의 Abel Regular로 편집 가능한 레이블 두 개를 테스트했습니다. 의도한 글꼴을 불러온 뒤 브라우저는 PINE을 약 115.6단위, PINE & FIELD를 325.3단위로 측정했습니다. 두 조정 행 모두 240단위를 요청합니다.

같은 목표, 다른 타이포그래피

짧은 레이블에서 spacing은 눈에 띄는 간격을 만듭니다. 긴 레이블에서는 글자를 빽빽하게 붙입니다. 둘 다 글리프 모양을 유지하지만 이 디자인에 적합한 결과는 아닙니다. spacingAndGlyphs 행은 글꼴 비율을 눈에 띄게 바꾸어 같은 폭에 도달합니다.

테스트는 앱 내 브라우저의 Chrome 154를 사용했습니다. 첫 글자의 시작 위치에서 마지막 글자의 끝 위치까지 가로 폭을 측정했으며, 조정된 각 행은 약 240단위에 도달했습니다. 이 예제는 라틴 글꼴 하나와 단순한 왼쪽에서 오른쪽 텍스트를 사용합니다. 렌더러 간 또는 다국어 호환성 테스트는 아닙니다.

적당한 길이 보정 설정하기

위 긴 레이블은 자연 길이가 325.3단위이므로 330단위가 가깝습니다. 240으로 강제 축소하는 것보다 유용한 보정 예제입니다.

Google Fonts Abel 디렉터리에서 Abel-Regular.ttf와 OFL.txt를 다운로드하세요. 다음 마크업을 담은 HTML 파일 옆의 fonts 폴더에 넣고 해당 폴더를 로컬로 제공하세요.

<style>
  @font-face {
    font-family: Abel;
    src: url('./fonts/Abel-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
  }
</style>
 
<svg xmlns="http://www.w3.org/2000/svg"
     width="540" height="136" viewBox="0 0 540 136"
     role="img" aria-label="Pine and Field emblem and label">
  <path d="M25 80L63 24L101 80L63 114Z" fill="#287967"/>
  <path d="M43 80L63 49L83 80L63 97Z" fill="#c2d998"/>
  <text id="label" x="135" y="86"
        font-family="Abel" font-size="64" font-weight="400"
        textLength="330" lengthAdjust="spacing"
        fill="#17372e">PINE &amp; FIELD</text>
</svg>

단위 없는 330은 SVG 좌표계의 값입니다. 페이지에서 SVG 전체를 조절하면 화면의 해당 거리도 함께 조절됩니다. 타이포그래피 변경이 그림을 바꾸지 않도록 문양과 텍스트를 분리하세요.

글꼴은 여전히 중요합니다. textLength는 글자를 윤곽선으로 바꾸거나 글꼴을 패키징하지 않습니다. 다른 컴퓨터에서 글자 모양이 달라지면 간격을 조정하기 전에 SVG 글꼴 대체를 진단하세요.

최대 너비라면 먼저 측정하기

규칙이 ‘짧은 레이블은 그대로 두고 긴 레이블만 줄인다’라면 조건을 직접 추가하세요. 이 예제는 글꼴 크기를 줄여 글자가 두 방향으로 작아지면서 비율을 유지하게 합니다.

위 SVG 뒤에 이 스크립트를 넣으세요. 고정 330단위 조정을 최대 240단위로 바꿉니다.

<script type="module">
  const label = document.querySelector('#label');
  const baseSize = 64;
  const maxWidth = 240;
 
  await document.fonts.load('64px Abel', label.textContent);
  await document.fonts.ready;
 
  label.removeAttribute('textLength');
  label.removeAttribute('lengthAdjust');
  label.setAttribute('font-size', String(baseSize));
 
  const naturalWidth = label.getComputedTextLength();
  if (naturalWidth > maxWidth) {
    const fittedSize = baseSize * maxWidth / naturalWidth;
    label.setAttribute('font-size', String(fittedSize));
  }
</script>

document.fonts.ready는 문서 글꼴 로딩과 레이아웃 작업이 완료되기를 기다립니다. 명시적인 load() 호출은 먼저 예제의 글꼴을 요청합니다. 의도한 글꼴 로딩 전에 측정하면 대체 글꼴로 맞춤 여부를 결정할 수 있습니다.

이 분기는 자연 길이가 필요하므로 getComputedTextLength()를 호출하기 전에 textLength를 제거합니다. 브라우저 테스트에서 이 메서드는 표시된 시작·끝 폭이 바뀌었어도 spacing 행의 자연 길이를 보고했습니다. 조정된 시각 너비의 범용 측정값이라고 가정하지 마세요.

이 스크립트에서 짧은 PINE 레이블은 64단위 크기를 유지합니다. 긴 레이블은 약 47.2단위로 줄어듭니다. 실제 표시나 인쇄 크기에서 결과를 검토하세요. 줄인 문구가 너무 작으면 크기를 계속 낮추지 말고 레이아웃이나 문구를 바꾸세요. 문구나 글꼴 설정이 바뀌면 맞춤 단계를 다시 실행하세요.

실제 대상에서 최종 레이블 확인하기

숫자로 맞는 것은 검사 하나일 뿐입니다. 최종 크기에서 글자 쌍과 문양·텍스트 사이 간격을 보세요. 디자인에 보정이 필요한 경우가 아니면 일반 레이블은 자연 간격을 유지하세요.

여러 줄은 의도적으로 만들고 배치하세요. textLength만으로 줄바꿈 정책이 제공되지는 않습니다. 곡선 배지는 별도의 SVG 경로 위 텍스트 작업 흐름을 사용하세요. 해당 가이드는 글자가 따르는 기준선을 제어합니다.

편집 가능한 텍스트가 있는 소스를 유지하고 실제로 사용할 편집기, 브라우저나 렌더러에서 전달 파일을 여세요. SVG 파일 가이드는 같은 확장자여도 편집 가능한 텍스트, 벡터 경로나 삽입 이미지가 있을 수 있는 이유를 설명합니다.

시작 로고가 래스터로만 있다면 PerfectVector 로고 벡터화 도구가 문양 그림을 복원할 수 있습니다. 경로를 검사·정리하고 문구를 편집 가능한 텍스트로 다시 입력한 뒤 레이블을 맞추세요. 추적한 단어는 경로 도형이므로 textLength로 글자 간격을 조절할 수 없습니다. 로고 벡터화 안내는 원본 복원 단계를 다룹니다.

FAQ

textLength는 너무 긴 텍스트만 줄이나요? 아닙니다. 길이를 요청하므로 자연 길이가 더 짧은 텍스트도 늘릴 수 있습니다. 최대 너비 규칙이 필요하면 레이블의 자연 길이를 측정하고 직접 조건을 적용하세요.

어떤 lengthAdjust 값이 글자 모양을 유지하나요? 글리프를 늘리지 않고 글자 간격을 조정하려면 spacing을 쓰세요. 큰 조정은 여전히 어색한 간격이나 충돌을 만들 수 있으므로 최종 크기에서 글자를 확인하세요.

textLength가 PNG에서 추적한 글자를 맞출 수 있나요? 글자 모양 경로가 아니라 SVG 텍스트에 작동합니다. textLength나 편집 가능한 글자 간격이 필요하면 문양은 별도 벡터 그림으로 유지하고 문구를 편집 가능한 텍스트로 다시 입력하세요.

Sources

1. W3C — SVG 2 텍스트 조정 — 두 모드와 글리프 모양·진행 폭에 미치는 영향을 설명합니다.
2. MDN — textLength — 요청 길이와 기본 spacing 모드를 설명합니다.
3. MDN — FontFaceSet.ready — 글꼴 로딩과 레이아웃 대기를 설명합니다.
4. MDN — getComputedTextLength — SVG 텍스트 요소 측정을 설명합니다.
5. Google Fonts — Abel — 원본 비교에 사용한 글꼴과 라이선스입니다.

필요하다면 로고 벡터화 도구로 래스터 문양을 복원하고 글자는 별도 텍스트 요소로 유지하세요. 윤곽선 전달 사본이나 래스터 내보내기를 만들기 전에 최종 레이블을 일반 크기에서 비교하세요.