SVG 텍스트 세로 정렬: 다시 만든 레이블 중앙 맞추기
dominant-baseline으로 SVG 레이블을 정렬하고 두 글꼴의 middle과 central을 비교하세요. 텍스트 상자 중앙 정렬과 실제 글자 모양의 차이를 구분합니다.
목차
가로 SVG 레이블에서 y는 선택한 기준선을 배치합니다. 글자 위쪽을 그 좌표에 놓는 것이 아닙니다. 가로 안내선 주위에 짧은 라틴 레이블을 배치하려면 dominant-baseline="middle"로 시작하고 실제 글꼴에서 결과를 확인하세요. x 좌표를 중심으로 가로 중앙에 놓으려면 text-anchor="middle"을 쓰세요.
레이블이 문양 옆에서 여전히 높거나 낮게 보일 수 있습니다. middle과 central은 다른 글꼴 기준선을 쓰고, 시각적 중앙은 단어의 모양에 달려 있습니다. 오프셋을 추가하기 전에 레이아웃에 공통 기준선, 중앙 텍스트 상자 또는 시각적 보정 중 무엇이 필요한지 정하세요.
정렬 대상 선택하기
같은 y="100"에서도 글자 위치는 달라질 수 있습니다.
| 텍스트 요소의 값 | 기준선의 의미 | 유용한 시작점 |
|---|---|---|
dominant-baseline="alphabetic" | 알파벳 기준선 | 같은 읽기 기준선의 문구 |
dominant-baseline="middle" | 알파벳 기준선 위 글꼴 x-height 절반과 관련된 기준선 | 가로 안내선 주변의 짧은 레이블 |
dominant-baseline="central" | em 상자에 연결된 중앙 기준선 | 글꼴 상자 중앙과 middle 기준선 비교 |
W3C 기준선 정의는 middle과 central을 구분합니다. 어느 정의도 모든 단어의 칠해진 윤곽선을 중앙에 놓겠다고 보장하지 않습니다. MDN dominant-baseline 참고 문서가 설명하듯 글꼴 기준선 표와 렌더러의 휴리스틱도 중요합니다.
일반 가로 텍스트에서 text-anchor="middle"은 다른 축을 처리합니다. 지정한 가로 위치 주변에 텍스트 덩어리를 정렬하며 세로 중앙을 제공하지 않습니다. 텍스트 덩어리와의 관계는 text-anchor 참고 문서를 보세요.
문양과 편집 가능한 레이블 비교하기
완전한 예제를 baseline-example.svg로 저장하고 브라우저에서 여세요. 고리는 직접 만든 도형이고 Agyp는 어센더와 디센더가 있는 테스트 문자열입니다. 빨간 선은 y=100입니다.
<svg xmlns="http://www.w3.org/2000/svg" width="840" height="400"
viewBox="0 0 420 200">
<path fill="#137f74" fill-rule="evenodd"
d="M55 75A25 25 0 1 1 55 125A25 25 0 1 1 55 75
M55 86A14 14 0 1 0 55 114A14 14 0 1 0 55 86"/>
<path d="M20 100H400" fill="none" stroke="#c3594d"/>
<text id="label" x="250" y="100" font-family="Arial, sans-serif"
font-size="64" text-anchor="middle" dominant-baseline="middle"
fill="#193e3a">Agyp</text>
</svg>dominant-baseline만 alphabetic, 다음으로 central로 바꾸세요. 좌표, 글꼴 크기와 문구는 유지하세요. 그다음 사용 가능한 두 번째 글꼴과 비교하세요. 여러 설정을 같이 바꾸면 레이블을 옮긴 원인을 파악하기 어렵습니다.
Arial과 Times New Roman 파일을 불러와 세 값을 모두 렌더링했습니다. 각 패널은 같은 SVG 좌표와 원본 고리를 사용합니다. 녹색 사각형은 브라우저가 편집 가능한 텍스트에 보고한 getBBox() 결과입니다.
alphabetic 예제는 고리 중앙선보다 위에 놓입니다. middle은 아래로 이동하고 central은 보고된 상자를 안내선 가까이 둡니다. 각 예제 아래 측정값은 해당 글꼴 파일과 브라우저 렌더링의 값입니다. 다른 디자인에 복사할 오프셋이 아닙니다.
측정 전에 글꼴 파일이 로딩됐습니다. 내보낸 SVG는 요청 글꼴이 없으면 대체 글꼴을 선택할 수 있습니다. 정렬을 판단하기 전에 그 의존성을 해결하세요. SVG 글꼴 변경 가이드는 실제 글꼴 확인과 전달 사본 보존을 다룹니다.
중앙 텍스트 상자도 불균형해 보일 수 있습니다
SVG 텍스트 경계는 반드시 보이는 잉크를 둘러싼 가장 작은 사각형은 아닙니다. SVG 바운딩 박스 규칙은 텍스트 계산에 글리프 셀과 글꼴 ascent/descent를 사용합니다. 셀 주변 사각형에는 어떤 글자도 칠하지 않는 공간이 포함될 수 있습니다.
Agyp 같은 레이블에서는 이 차이가 중요합니다. g, y, p는 알파벳 기준선 아래로 내려갑니다. 모두 대문자인 레이블은 시각적 분포가 다릅니다. 정렬 단계에는 의도한 글꼴과 실제 문구가 있어야 합니다.
한 줄로 읽혀야 하는 레이블 행은 공통 알파벳 기준선을 유지하세요. 각 단어의 보이는 모양이 중앙처럼 보일 때까지 개별 이동하면 행이 불균일해질 수 있습니다.
문양과 문구 한 쌍은 기준선을 고른 뒤 최종 크기에서 비교하고 시각적으로 조절하세요. 레이아웃이 특별히 글자 윤곽선 기준 정렬을 요구하면 편집기에서 윤곽선화한 복제본으로 도형을 확인하되 편집 원본에는 텍스트를 유지하세요. 윤곽선 경계와 시각적 보정은 별도 결정으로 취급하세요.
측정한 SVG 텍스트 상자 중앙 맞추기
단순하고 변환 없는 한 줄 <text> 요소는 보고한 상자 중앙에서 목표까지 오프셋을 계산하세요. 글꼴 준비 후 예제가 있는 문서에서 다음을 실행하세요.
await document.fonts.ready;
const label = document.querySelector('#label');
const targetY = 100;
const originalY = label.y.baseVal.getItem(0).value;
const box = label.getBBox();
const shift = targetY - (box.y + box.height / 2);
label.setAttribute('y', String(originalY + shift));계산은 보고된 텍스트 상자를 targetY에 정렬합니다. 시각적 균형을 계산하거나 글꼴의 쓰이지 않은 글리프 셀 공간을 제거하지 않습니다. 텍스트, 글꼴, 굵기나 크기를 바꾸면 다시 측정하세요.
document.fonts.ready는 글꼴 로딩과 관련 레이아웃 작업을 기다립니다. 의도한 글꼴이 성공적으로 제공됐다는 증거는 아닙니다. 글꼴 리소스나 브라우저의 렌더링 글꼴 정보도 확인하세요.
이 코드는 y 값 하나, 글자별 위치 없음, dy 오프셋 없음, 변환된 텍스트 그룹 없음을 가정합니다. getBBox()는 로컬 SVG 상자를 반환합니다. 다른 좌표계의 목표는 매핑이 필요합니다. 화면 픽셀과 SVG 단위를 섞기 전에 SVG 경계 작업 흐름을 사용하세요.
오프셋 추가 전에 충돌 설정 해결하기
텍스트와 부모 그룹을 확인하세요. 남아 있는 dy, 중첩 <tspan>이나 변환이 진단하려는 배치를 바꿀 수 있습니다. 사본에서 의심되는 조정 하나씩 제거하고 결과를 비교하세요.
페이지 스타일도 확인하세요. CSS는 dominant-baseline 표현 속성을 덮어쓸 수 있습니다. 속성을 바꿔도 눈에 띄는 변화가 없으면 두 번째 보정 전에 계산된 값을 확인하세요.
alignment-baseline은 요소 기준선을 부모의 대응 기준선과 정렬하는 방법을 다룹니다. ‘SVG 안에서 레이블 중앙 맞춤’의 일반 동의어가 아닙니다. MDN alignment-baseline 참고 문서는 브라우저 지원 제한도 설명합니다. 이 독립 레이블은 dominant-baseline에 테스트를 집중한 뒤 실제 내보내기 대상을 검증하세요.
예제는 한 브라우저의 가로 라틴 텍스트를 다룹니다. 곡선 레이블은 다른 배치 검사가 필요합니다. SVG 경로 위 텍스트 안내는 글자와 안내 곡선을 구분합니다. 다른 문자 체계와 세로 쓰기는 자체 기준선 결정이 필요합니다.
표식과 글자 분리 유지하기
깔끔한 벡터 문양이 이미 있다면 유지하고 레이블을 편집 가능한 텍스트로 다시 만드세요. 레이블 이동이나 글꼴 선택에는 벡터화가 필요하지 않습니다.
문양이 PNG나 JPG로만 있다면 PerfectVector의 로고 벡터화 도구가 디자인의 해당 부분에 후보 도형을 준비할 수 있습니다. 외곽선과 구멍을 확인하고 선택한 기준선으로 새로 입력한 텍스트 옆에 놓으세요. 벡터화는 원래 글꼴을 알아내거나 래스터에서 편집 가능한 타이포그래피를 복원하지 않습니다.
정확한 브랜드 글자는 가능하면 원래 글꼴과 벡터 에셋을 쓰거나 의도적으로 재구성하세요. 로고 벡터화 가이드는 소스 보존, 추적과 다시 그리기 선택에 도움이 됩니다.
전달 전에 실제 문구와 글꼴을 확인하고 문양·문구 구성을 최종 크기에서 검토한 뒤 대상에서 내보낸 SVG를 다시 여세요. 전달 사본에 윤곽선 텍스트를 썼다면 편집 원본을 보관하세요.
FAQ
dominant-baseline="middle"은 central과 같나요? 아닙니다. Middle은 x-height 관련 기준선을 쓰고 central은 em 상자와 연결된 중앙 글꼴 기준선을 씁니다. 위치가 다를 수 있고 어느 쪽도 모든 단어의 시각적 중앙을 보장하지 않습니다.
text-anchor="middle"이 SVG 텍스트를 세로 중앙에 놓나요? 일반 가로 텍스트에서 text-anchor는 x 좌표 주변 가로 배치를 제어합니다. 세로 기준선은 dominant-baseline으로 따로 선택하고 의도한 글꼴에서 결과를 확인하세요.
getBBox가 보이는 글자를 정확히 중앙에 놓을 수 있나요? 브라우저가 보고한 SVG 텍스트 상자를 중앙에 놓을 수 있습니다. 텍스트 경계에는 칠해진 글자 밖의 글리프 셀 공간이 있을 수 있어 시각적 중앙이나 꼭 맞는 윤곽선 정렬을 보장하지는 않습니다.
Sources
- W3C — SVG 기준선 정렬 — alphabetic, middle, central 기준선을 정의합니다.
- MDN — dominant-baseline — 기준선 표, 글꼴 휴리스틱과 CSS 우선순위를 설명합니다.
- MDN — text-anchor — 지정 위치 주변 텍스트 덩어리 기준점을 설명합니다.
- W3C — SVG 바운딩 박스 — 텍스트 경계 계산의 글리프 셀 모델을 설명합니다.
- MDN — FontFaceSet.ready — 글꼴 로딩과 레이아웃 완료 시점을 정의합니다.
- MDN — getBBox — 로컬 SVG 경계와 변환 제외를 설명합니다.
- MDN — alignment-baseline — 부모 기준선 정렬과 브라우저 지원 제한을 설명합니다.
다시 만든 로고에 아직 편집 가능한 문양이 필요하면 PerfectVector로 SVG 후보를 준비하고 복원 외곽선을 확인하세요. 편집 가능한 글자와 짝지은 뒤 최종 대상에서 정렬을 확인하세요.
