SVG 페인팅 순서: 두꺼운 윤곽선을 글자 뒤에 유지하기

SVG 텍스트나 도형 요소에 paint-order="stroke fill"을 설정하면 채우기 전에 윤곽선을 그립니다. 채우기가 불투명하면 스트로크의 안쪽 부분을 덮으므로 두꺼운 윤곽선이 글자의 색상 면을 침범하지 않습니다. CSS에 paint-order: stroke fill;을 쓸 수도 있습니다.

경로, 글꼴 크기, 스트로크 너비는 유지됩니다. 스트로크 너비를 늘린 뒤 윤곽선 있는 워드마크가 무겁거나 읽기 어려워질 때 유용한 외관 설정입니다. 바깥쪽 정렬 스트로크나 새로운 절단 윤곽을 만들지는 않습니다.

기본 윤곽선이 글자를 비좁게 만드는 이유

SVG는 보통 요소의 채우기, 스트로크, 마커 순으로 칠합니다. 중심 정렬 스트로크는 채워진 도형의 경계 양쪽으로 뻗습니다. 스트로크를 마지막에 칠하면 채우기의 일부를 덮습니다. 좁은 글자 줄기에서는 큰 스트로크가 면 색상의 대부분을 숨길 수 있습니다.

앞의 두 연산을 반대로 하면 채우기가 겹친 부분을 덮습니다. SVG 페인팅 명세는 순서를 정의하고 MDN SVG 속성 참조는 속성과 대응 CSS를 설명합니다. 짧은 값 stroke는 stroke fill markers와 같은 순서입니다. 생략한 연산은 원래의 상대 순서대로 뒤따릅니다.

이 효과에는 보이는 채우기가 필요합니다. fill="none"인 경로는 안쪽 스트로크를 덮어 칠할 것이 없습니다. 부분적으로 투명한 채우기는 스트로크가 비쳐 보이게 할 수 있으므로 여기의 결과를 얻으려면 불투명한 채우기를 사용하세요.

같은 아트워크를 두 크기로 비교하기

라이브 텍스트로 짧은 BOLD 워드마크와 작은 삼각형 경로 엠블럼을 만들었습니다. 아래 브라우저 비교는 각 쌍에서 페인팅 순서만 바꿉니다. 스트로크 너비 4와 8 SVG 사용자 단위를 사용한 뒤 같은 400 × 110 viewBox를 너비 400과 200 CSS 픽셀로 표시합니다.

8 단위 설정에서는 기본 순서의 워드마크가 노란색 면을 상당 부분 잃습니다. 채우기를 마지막에 칠하면 노란색 줄기가 유지됩니다. 200 픽셀 버전에서도 효과가 드러나지만 작은 구멍은 여전히 좁습니다. 엠블럼의 아주 작은 안쪽 구멍도 두꺼운 스트로크에서는 구분하기 어려워집니다.

마지막 디테일이 중요합니다. 페인팅 순서는 글자 면을 보존할 수 있지만 모든 구멍과 틈을 알아보기 쉽게 만들지는 않습니다. 스트로크는 여전히 채워지지 않은 공간으로 뻗습니다. 의도한 표시 크기에서 구멍이 닫힌다면 스트로크를 줄이거나 아트워크를 단순화하세요. 브라우저 미리보기를 확대하는 것은 독자가 실제로 볼 크기의 확인을 대신하지 못합니다.

이는 직접 그린 예제이며 PerfectVector 변환 결과가 아닙니다. 워드마크는 설치된 Arial 글꼴과 sans-serif 대체 글꼴을 사용합니다. 다른 글꼴은 글자 모양과 간격을 바꿉니다.

전체 SVG 시도하기

wordmark.svg로 저장하고 브라우저에서 직접 여세요. 예제는 보이는 스트로크를 위해 도형 주변에 충분한 공간을 유지합니다. 비교하려면 paint-order를 normal로 바꾸고 다음으로 stroke-width="4"를 시도하세요.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 110" width="400" height="110">
  <g fill="#ffd76a" stroke="#263b55" stroke-width="8"
     stroke-linejoin="round" paint-order="stroke fill">
    <path d="M22 72 L40 28 L58 72 Z M34 60 H46 L40 44 Z" fill-rule="evenodd"/>
    <text x="78" y="76" font-family="Arial, sans-serif"
          font-size="64" font-weight="700">BOLD</text>
  </g>
</svg>

그룹은 경로와 텍스트에 페인팅 속성을 전달합니다. 각 자식은 자체 렌더링에 요청한 순서를 사용합니다. fill-rule="evenodd"가 엠블럼의 안쪽 구멍을 만들며 페인팅 순서와는 독립적입니다.

작은 예제를 재현하려면 viewBox는 그대로 두고 width와 height를 200과 55로 바꾸세요. 이 파일에는 크기 변화에 영향받지 않는 스트로크가 없으므로 아트워크와 스트로크가 함께 축소됩니다. 절반 크기 매핑에서 8 단위 스트로크는 채우기로 숨겨지는 부분을 고려하기 전 너비 4 CSS 픽셀이 됩니다.

스타일시트 버전에는 대상에 클래스를 지정하고 다음을 설정하세요.

.outlined-wordmark {
  paint-order: stroke fill;
}

표시 속성과 CSS 선언이 모두 같은 속성을 지정하면 CSS가 우선합니다. 속성을 바꿔도 효과가 없어 보이면 적용된 규칙을 검사하세요. MDN CSS 참조는 상속과 허용되는 키워드 조합도 설명합니다.

이 설정이 바꾸지 않는 것

스트로크 정렬. 스트로크는 여전히 같은 중심 경로를 따릅니다. 채우기가 일부를 덮으면 채워진 영역 주변에 바깥쪽처럼 보이는 테두리가 생기지만 스트로크 기하학적 형태가 바깥으로 이동한 것은 아닙니다. 구멍 가장자리에서는 남아 있는 스트로크가 구멍을 침범할 수 있습니다.

별도 객체의 쌓임 순서. 한 요소의 페인팅 순서를 설정해도 그 요소가 이웃 도형 뒤로 이동하지는 않습니다. 나중에 겹치는 객체는 여전히 덮을 수 있습니다. 그것이 문제라면 객체 순서를 바꾸세요. 예제는 SVG z-index가 로고 경로 순서를 바꾸지 않는 이유를 참고하세요.

절단 경로나 오프셋. 절단기나 기하학 도구에는 적절한 윤곽이 필요합니다. 보기 좋은 브라우저 윤곽선을 하나로 연결된 테두리로 해석한다고 가정할 수 없습니다. 전달 작업에 필요하다면 요구되는 기하학적 형태를 별도로 만들고 검사하세요.

글꼴 이식성. 샘플에는 라이브 텍스트가 있습니다. 페인팅 순서를 바꿔도 글꼴이 포함되거나 글리프 모양이 고정되지 않습니다. 워드마크를 다른 곳에서 다시 열 때 바뀐다면 SVG 글꼴 변화 확인을 사용하세요.

편집 중에는 이 차이를 구분하세요. 페인팅 순서 변경은 쉽게 되돌릴 수 있지만 스트로크 확장이나 글자 경로 변환은 문서의 편집 가능한 구조를 바꿉니다.

전달용 복사본을 대상에서 확인하기

브라우저 결과부터 확인한 뒤 사용할 애플리케이션이나 렌더러에서 저장한 파일을 여세요. 브라우저 미리보기만으로 편집기, PDF 변환기, 제작 파이프라인이 외관을 유지한다고 입증할 수는 없습니다.

1. 최종 크기에서 면 색상과 바깥 테두리를 비교하세요. B, O, 엠블럼의 좁은 구멍 안쪽을 살펴보세요.
2. 예상한 글꼴이 불러와졌는지 확인하세요. 글자 모양뿐 아니라 간격도 확인하세요.
3. 페이지 가장자리를 확인하세요. 더 넓은 스트로크에는 뷰포트나 클립 안의 공간이 더 필요할 수 있습니다.
4. 내보낸 전달용 파일을 다시 여세요. 작업 문서가 올바르게 보였어도 내보내기가 스타일이나 객체 구성을 바꿀 수 있습니다.

대상에서 윤곽선이 바뀌면 파일을 채우기와 스트로크가 있는 도형 하나로 줄여 브라우저와 비교하세요. 클리핑, 확대·축소, 누락된 페인팅 문제라면 사라지는 SVG 스트로크 진단을 따르세요. 색상 규칙 충돌에는 SVG 색상 변경 가이드가 채우기와 스트로크를 정의할 수 있는 위치를 다룹니다.

라이브 외관이 전달 과정에서 유지되지 않으면 편집 가능한 마스터를 보존하고 필요한 외관을 도형으로 표현한 별도의 전달용 복사본을 준비하세요. 그 복사본을 시각적으로, 기하학적으로 검증하세요. 중심 정렬 스트로크를 단순히 확장하는 것만으로 모든 의도한 겹침이 재현되거나 하나의 외곽 윤곽이 만들어지지는 않습니다.

원본이 래스터 로고인 경우

원본 벡터 엠블럼과 라이브 글자가 있다면 사용하세요. 윤곽선을 추가하려고 정상 텍스트를 스크린샷으로 찍어 추적할 이점은 없습니다.

PNG나 JPG가 유일하게 남은 엠블럼이라면 PerfectVector의 로고 벡터화 작업 흐름으로 앞단에서 SVG 후보를 준비할 수 있습니다. 이 스타일을 적용하기 전에 변환한 실루엣과 작은 구멍을 검사하세요. 변환은 페인팅 순서를 설정하거나 원래 글꼴을 알아내거나 어떤 도형이 윤곽선을 공유해야 하는지 결정하지 않습니다.

올바른 글꼴로 글자를 재현할 수 있다면 디자인 중에는 별도의 텍스트 객체로 유지하세요. 더 포괄적인 로고 벡터화 가이드는 래스터 아트워크 복원과 기존 벡터 마스터 사용 중 선택하는 방법을 설명합니다.

FAQ

기본 SVG 페인팅 순서는 무엇인가요? 기본값은 채우기, 스트로크, 마커 순입니다. normal 값이 그 순서를 요청합니다.

paint-order="stroke"는 "stroke fill"과 다른가요? 여기서는 스트로크, 채우기, 마커로 같은 순서를 만듭니다. 나열하지 않은 연산은 나열한 연산 뒤에 원래의 상대 순서대로 이어집니다.

paint-order가 바깥쪽 스트로크를 만드나요? 스트로크를 이동하거나 오프셋하지 않습니다. 불투명한 채우기가 중심 정렬 스트로크의 안쪽 부분을 숨깁니다. 남은 스트로크는 여전히 구멍과 틈을 좁게 만들 수 있습니다.

SVG 윤곽선이 여전히 너무 무거워 보이는 이유는 무엇인가요? 스트로크가 표시 크기에 비해 너무 넓거나 채우기가 투명하거나 다른 CSS 규칙이 페인팅 순서를 덮어쓸 수 있습니다. 이 조건들을 확인하고 최종 크기로 작은 구멍을 검사하세요.

Sources

1. W3C — SVG 2 페인팅 — 페인팅 순서와 채우기·스트로크 관계를 정의합니다.
2. MDN — SVG paint-order 속성 — 키워드 순서, 지원 요소 유형, 표시 속성보다 우선하는 CSS를 설명합니다.
3. MDN — CSS paint-order 속성 — 상속과 축약된 키워드 시퀀스를 설명합니다.

래스터 엠블럼만 있나요? 편집 가능한 로고 SVG를 준비하고 구멍을 검사한 뒤 전달용 복사본을 만들기 전에 의도한 크기에서 윤곽선을 테스트하세요.