인라인 SVG 아래 빈틈 없애기: CSS 줄 상자와 도안 여백 구분

SVG 아래의 좁은 틈은 SVG가 들어 있는 HTML 줄에서 생길 수 있습니다. 인라인 그래픽은 텍스트 배치에 참여하므로 기준선과 줄 높이가 상자 아래 공간을 남길 수 있습니다. 독립 이미지라면 display: block을 시험하세요. 글자 옆에 있어야 하는 그래픽이라면 인라인 정렬을 의도적으로 선택합니다.

먼저 틈의 위치를 찾으세요. SVG 요소 상자 바깥의 공간은 페이지 레이아웃을 검사해야 합니다. 상자 안쪽의 공간은 SVG 캔버스나 맞춤 규칙에서 생길 수 있습니다. 로고를 다시 추적해도 첫 번째 문제는 고쳐지지 않습니다. 이 안내는 둘을 구분하고 작고 국소적인 CSS 수정을 검증하는 방법을 설명합니다.

어느 상자에 공간이 있는지 찾으세요

브라우저 개발자 도구에서 SVG와 바로 감싸는 래퍼에 대비되는 배경을 지정하세요. 요소 외곽선도 검사합니다. 배경은 임시 진단 도구이며 전달 도안에 넣을 필요가 없습니다.

.logo-wrap {
  background: peachpuff;
}
 
.logo-wrap > svg {
  background: lightgreen;
}

초록 SVG 상자 아래로 복숭아색이 이어지면 래퍼의 줄 레이아웃, 패딩, 테두리, 높이, 이웃 요소를 검사하세요. 보이는 그림 아래로 초록색이 이어지면 도안의 viewBox, 그리기 경계, 뷰포트에 맞춰지는 방식을 검사합니다.

둘이 함께 생길 수도 있습니다. 줄 상자를 고쳐 얇은 띠가 사라져도 이미지 내부의 더 큰 투명 여백은 남을 수 있습니다. SVG 맞춤 안내는 원본 사각형과 대상 뷰포트의 상호작용을 설명합니다. 원치 않는 공간이 내부에 있는지 알기 전에는 viewBox를 조이지 마세요.

삽입 방법도 중요합니다. 인라인 <svg>는 HTML 문서의 일부이고 <img src="logo.svg">는 외부 이미지를 불러옵니다. 인라인 SVG와 이미지 안내에서 설명하듯 스타일 경계가 다릅니다. 모든 SVG 파일을 같은 방식으로 삽입한다고 가정하지 말고 HTML 행에 실제 놓인 요소를 검사하세요.

기준선 아래에 공간이 남는 이유

텍스트 줄에는 g, p처럼 기준선 아래로 내려오는 글자를 위한 공간이 필요합니다. 인라인 그래픽이 기준선에 맞춰져 있어도 이를 포함한 줄은 아래로 더 이어질 수 있습니다. 그래서 이미지 여백을 0으로 설정해도 달라지지 않을 수 있습니다.

CSS 줄 높이 계산 규칙은 참여하는 상자와 정렬을 바탕으로 줄 상자를 결정합니다. 보이는 콘텐츠가 그래픽뿐이어도 부모의 글꼴과 줄 높이가 기여합니다. 따라서 정확한 띠 높이는 고정된 SVG 여백이 아니라 주변 스타일의 결과입니다.

이 기준선을 SVG 내부에 그린 글자의 기준선과 혼동하지 마세요. SVG 텍스트 요소의 dominant-baseline을 바꾸는 것은 내부 글자를 조정합니다. 전체 그래픽이 HTML 줄에서 어떻게 놓이는지는 결정하지 않습니다.

SVG 캔버스에 빈 공간이 없는 측정 예제

같은 SVG 사본 세 개가 있는 HTML 페이지를 직접 만들었습니다. 각 SVG에는 사각형이 끝까지 채운 240 × 100 viewBox가 있고 240 × 100 CSS 픽셀로 렌더링됩니다. 행은 Arial 40px, 줄 높이 48px을 사용합니다. SVG의 표시 방식이나 정렬만 달라집니다.

브라우저가 반환한 요소 측정값은 다음과 같습니다.

이는 한 브라우저에서 이 페이지를 측정한 값이며 모든 레이아웃에 10.5px 틈이 생긴다는 뜻은 아닙니다. 래퍼 아래 좌표와 SVG 아래 좌표를 비교했습니다. SVG 높이는 세 경우 모두 100px로 유지되어 수정이 그림을 축소하거나 자르지 않았습니다.

독립 그래픽에는 블록 표시를 사용하세요

로고가 독립 행을 차지해야 한다면 그 이미지에만 레이아웃 규칙을 지정하세요.

.brand-mark {
  display: block;
  width: 240px;
  height: auto;
}

MDN display 참조는 흐름 레이아웃에서 블록과 인라인 참여를 구분합니다. SVG를 블록으로 만들면 주변 텍스트 줄에서 인라인 항목 역할이 없어집니다. 원본 경로를 편집하거나 투명 도안 여백을 제거하지는 않습니다.

규칙을 적용한 뒤 래퍼를 다시 확인하세요. 이미지 아래로 계속 이어지면 명시적 높이, 패딩, 다른 자식, 의사 요소, 추가 줄을 찾습니다. 블록 그래픽 뒤의 줄바꿈이나 텍스트 노드도 자체 콘텐츠를 만들 수 있습니다. 상위 요소가 보이는 공간의 원인일 수도 있습니다.

선택자 범위를 좁게 유지하세요. 사이트 전체에 svg { display: block; }을 적용하면 라벨이나 문장 안에 있어야 하는 아이콘이 움직일 수 있습니다. 독립 그래픽이 필요한 컴포넌트를 고른 뒤 다른 사용처도 검사합니다.

텍스트 옆 그래픽은 인라인으로 두고 정렬을 선택하세요

단어 옆의 아이콘이나 작은 마크는 인라인 유지가 의도한 배치일 수 있습니다. vertical-align: bottom은 아래 마진 가장자리를 줄 아래에 맞춥니다. vertical-align: middle은 부모의 기준선과 x 높이를 사용하며 모든 컨테이너의 모든 이미지를 기하학적 중앙에 놓는 명령이 아닙니다. MDN vertical-align 정의를 참고하세요.

.label-icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

실제 라벨과 글꼴을 보며 값을 선택하세요. 줄 아래에 닿는 아이콘은 대문자 옆에서 너무 낮아 보일 수 있습니다. middle 정렬도 자체 상자 안에서 도안이 불균일하게 분포한다면 시각적인 조정이 필요할 수 있습니다.

예제의 아래 정렬 행에는 그래픽만 있었습니다. 그 특정 행에서 띠가 제거됨을 입증합니다. 텍스트와 아이콘이 섞인 모든 행의 높이나 모양이 같다고 입증하는 것은 아닙니다.

공유 텍스트 컨테이너에 line-height: 0을 첫 해결책으로 사용하지 마세요. 이미지 간격과 함께 텍스트 배치도 바뀝니다. 당장 증상은 가려도 나중에 라벨을 추가할 때 재설정에 의존하는 컴포넌트가 될 수 있습니다. 부모 타이포그래피를 바꾸기 전에 의도한 표시 방식과 정렬을 선택하세요.

그림을 바꾸지 않고 수정 검증하기

한 번에 하나씩 바꾸고 다음을 확인하세요.

1. 요소 경계: 이제 보이는 틈이 SVG 상자 안에 있는가, 밖에 있는가?
2. 치수: SVG가 의도한 폭, 높이, 비율을 유지하는가?
3. 이웃 요소: 라벨, 링크, 아이콘이 여전히 제자리에 있는가?
4. 반응형 배치: 컴포넌트가 좁고 넓은 크기에서 올바르게 동작하는가?
5. 계산된 스타일: 의도한 선언이 적용되는가, 더 구체적인 규칙이 덮어쓰는가?

테두리나 패딩이 없는 단순 래퍼에서는 래퍼 아래 좌표와 이미지 아래 좌표를 비교하는 것이 유용합니다. 실제 컴포넌트에서는 의도한 패딩과 다른 콘텐츠를 고려한 뒤 그 차이를 오류라고 판단하세요.

작은 화면에서 다른 배열이 필요하다면 그것도 확인하세요. 로고 하나에서는 맞는 수정이 줄바꿈 텍스트가 있는 탐색 행에는 맞지 않을 수 있습니다. 경계가 명확해지면 임시 배경색을 제거합니다.

이 작업에 벡터화가 도움이 되는 경우

편집 가능한 기존 SVG라면 여기서는 보통 CSS나 캔버스 수정이 필요합니다. 파일을 유지하고 재구성하기 전에 배치를 진단하세요.

마크 자체가 PNG나 JPG로만 있고 편집 가능한 윤곽이 필요하다면 PerfectVector로 원본 이미지를 벡터 도안으로 바꾼 뒤 외곽선, 구멍, 원본 캔버스를 검사하고 페이지에 배치하세요. 추적 품질 평가표가 별도 형상 검사에 도움이 됩니다. 벡터화는 도형을 준비하고 HTML 줄 상자는 여전히 페이지 CSS가 제어합니다.

자주 묻는 질문

margin: 0으로 SVG 아래 틈이 사라지지 않는 이유는 무엇인가요? 공간이 SVG의 마진이 아니라 이를 포함하는 텍스트 줄에 속할 수 있습니다. SVG와 래퍼 경계를 검사한 뒤 독립 이미지에는 블록 표시, 인라인 그래픽에는 적절한 세로 정렬을 시험하세요.

display: block이 SVG 내부 빈 공간을 잘라내나요? 아닙니다. HTML 레이아웃에 참여하는 방식을 바꿉니다. viewBox 안의 빈 공간은 남으며 별도의 도안 또는 맞춤 검사가 필요합니다.

vertical-align: bottom과 middle 중 무엇을 써야 하나요? 실제 행에 맞는 값을 쓰세요. bottom은 줄 아래에 맞추고 middle은 부모의 기준선과 x 높이를 사용합니다. 어느 값도 보편적인 중앙 정렬로 취급하지 말고 최종 글꼴과 옆 텍스트에서 결과를 보세요.

출처

1. W3C — CSS 줄 높이와 세로 정렬 — 참여 상자, 정렬, 부모 타이포그래피가 줄 높이에 기여하는 방식입니다.
2. MDN — display — 흐름 레이아웃에서 블록과 인라인 참여의 차이입니다.
3. MDN — vertical-align — 기준선·아래·가운데 정렬 및 속성이 적용되는 상자입니다.

래스터 이미지로만 있는 마크에서 시작하나요? 편집 가능한 SVG 도형을 준비해 윤곽과 캔버스를 원본과 비교한 뒤 실제 페이지 컴포넌트에서 SVG 배치를 확인하세요.