SVG 스트로크 정렬: 외곽선을 안쪽이나 바깥쪽에 배치하기

SVG 스트로크는 경로 중앙에 놓입니다. 12단위 외곽선을 닫힌 도형의 안쪽에만 두려면 24단위 스트로크를 그리고 도형으로 클리핑하세요. 같은 보이는 너비를 바깥쪽에 두려면 도형 내부를 숨기는 마스크를 통해 24단위 스트로크를 그리세요. 원본 경로 사본을 유지하세요. 클립과 마스크는 보이는 부분을 바꾸며 실제 도형은 그대로입니다.

제안된 stroke-alignment 속성은 SVG Strokes 편집자 초안에 있지만 초안은 SVG 2 스트로크 정의가 여전히 규범이라고 명시합니다. 브라우저와 편집기 전반에서 작동해야 하는 파일에는 제안 속성에 의존하기보다 보이는 결과를 구성하고 테스트하세요.

칠해진 외곽선 위치 확인하기

직접 만든 닫힌 배지는 세 패널 모두 경로 하나를 사용합니다. 청록색 채우기, 명목 12단위 보이는 외곽선과 주변 문서 공간은 같습니다. 산호색 점선은 중심 경로입니다. 가운데 패널에서는 파란 띠의 바깥 가장자리와, 오른쪽에서는 안쪽 가장자리와 일치합니다.

가운데 패널은 배지의 칠해진 바깥 경계를 원래 경로에 유지합니다. 바깥 패널은 경로 주위로 칠해지는 범위를 12단위 늘립니다. 배지가 viewBox 가장자리에 가깝다면 추가 페인트가 잘릴 수 있습니다. MDN 채우기와 스트로크 가이드는 일반 스트로크가 경로 중앙에 놓인다고 설명하며 위 비교는 세 구성을 같은 크기로 렌더링합니다.

클립으로 안쪽 외곽선 만들기

닫힌 경로를 <defs>에 넣으세요. 채우기와 클립으로 각각 한 번 재사용합니다. 원하는 스트로크 너비의 두 배로 두 번째 사본을 칠한 뒤 스트로크를 경로 내부로 제한하세요. 클립은 도형 밖을 보이지 않게 하며 숨긴 스트로크 절반을 삭제하지는 않습니다. 가져온 클립이 그림에서 어긋나면 MDN clipPath 참고 문서와 clipPath 좌표 가이드를 참고하세요.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 20 240 260">
  <defs>
    <path id="badge" d="M150 44 H250 L281 75 V207 L200 252 L119 207 V75 Z"/>
    <clipPath id="badge-inside">
      <use href="#badge"/>
    </clipPath>
  </defs>
  <use href="#badge" fill="#20a6a8"/>
  <use href="#badge" fill="none" stroke="#244b7b" stroke-width="24"
    clip-path="url(#badge-inside)"/>
</svg>

여기서 24단위 스트로크는 보통 경로 양쪽으로 12단위씩 뻗습니다. 클립이 바깥 절반을 제거해 안쪽에 보이는 12단위 띠를 남깁니다. 안쪽 띠 전체를 표시하려면 예제처럼 채우기를 클리핑된 스트로크 아래에 두세요. 구멍 있는 복합 경로는 어느 쪽이 내부인지 가정하기 전에 채우기와 클립 규칙을 확인하세요.

마스크로 바깥 외곽선 만들기

바깥 띠에는 반대 가시 영역이 필요합니다. 아래 마스크는 문서 영역은 흰색, 배지 안쪽은 검정입니다. 스트로크 사본에만 적용하고 마스크 없는 사본이 채우기를 제공합니다. 명시적 마스크 영역은 원래 도형 밖의 스트로크 공간을 확보합니다.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 20 240 260">
  <defs>
    <path id="badge" d="M150 44 H250 L281 75 V207 L200 252 L119 207 V75 Z"/>
    <mask id="badge-outside" mask-type="luminance"
      maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"
      x="80" y="20" width="240" height="260">
      <rect x="80" y="20" width="240" height="260" fill="white"/>
      <use href="#badge" fill="black"/>
    </mask>
  </defs>
  <use href="#badge" fill="#20a6a8"/>
  <use href="#badge" fill="none" stroke="#244b7b" stroke-width="24"
    mask="url(#badge-outside)"/>
</svg>

다시 중앙 24단위 스트로크의 절반만 남으므로 보이는 바깥 띠는 너비 12단위입니다. 마스크 영역을 의도적으로 설정하세요. MDN 문서는 maskUnits, maskContentUnits와 영역 크기가 마스크에 미치는 영향을 설명합니다. 흰 사각형은 바깥 스트로크 전체를 덮어야 합니다. 너무 작은 마스크는 보존하려던 가장자리를 자를 수 있습니다.

불투명한 채우기에는 더 짧은 시각적 방법이 있습니다. 두 배 너비 스트로크를 칠하고 paint-order="stroke fill"로 위에 채우기를 칠합니다. 안쪽 절반을 채우기로 숨기지만 그곳에 스트로크가 남아 채우기가 반투명해지거나 제거되면 다시 나타납니다. MDN은 페인트 순서를 설명합니다. 바깥 띠를 별도의 보이는 구성으로 유지해야 하면 명시적 마스크를 쓰세요. 여러 색의 전체 알파 실루엣에서 만든 외곽선은 SVG 형태학 외곽선을 참고하세요. 그 필터는 소스 경로를 유지하면서 모양을 바꿉니다.

가져온 후 SVG 확인하기

클립과 마스크는 렌더링에 영향을 주지만 후속 앱은 채워진 윤곽선을 요구할 수 있습니다. 편집 원본을 유지하고 실제 대상에서 전달 사본을 테스트하세요.

1. SVG를 단독으로 연 뒤 대상 편집기나 제작 앱에 배치하세요. 같은 확대에서 안쪽·바깥쪽 가장자리를 비교하세요.
2. 바깥 버전 주변 viewBox나 아트보드를 확인하세요. 바깥 12단위 띠와 날카로운 모서리 연결을 위한 공간을 남기세요.
3. 객체 목록을 검사하세요. 예제에는 재사용 경로, 클립 또는 마스크와 편집 가능한 스트로크가 있습니다. 하나의 채워진 외곽선 도형을 만드는 것은 아닙니다.
4. 수신자에게 채워진 도형이 필요하면 전달 사본에서 선택 스트로크를 변환하고 결과 도형을 검사하세요. 이후 너비 변경을 위해 원래 스트로크 소스를 유지하세요.

내보내기에서 선이 사라지면 스트로크 표시 체크리스트로 페인트 누락, 클리핑과 가져오기 지원을 구분하세요. 스트로크가 예상치 않게 채우기를 덮으면 SVG 페인트 순서 설명이 마지막에 그리는 레이어를 보여 줍니다.

PerfectVector의 역할

이 단계는 편집 가능한 SVG 경로에서 시작합니다. 로고가 PNG나 JPG로만 있으면 PerfectVector의 로고 벡터화 작업 흐름으로 클립·마스크 추가 전 SVG 후보를 만들 수 있습니다. 의도한 전달 크기에서 실루엣, 모서리와 구멍을 원본과 비교하세요. 벡터화는 후보 도형을 복원하며 안쪽·바깥쪽 스트로크 정렬을 지정하지는 않습니다.

원본 SVG 경로가 있으면 직접 편집하세요. 스크린샷 추적은 불필요한 재구성 단계를 추가하며 정렬하려는 경계를 바꿀 수 있습니다. 로고 벡터화 가이드는 추적, 다시 그리기와 기존 벡터 보존 선택에 도움이 됩니다.

FAQ

SVG는 안쪽·바깥쪽 스트로크 정렬을 지원하나요? SVG Strokes 편집자 초안이 그 값을 설명하지만 SVG 2가 규범적 스트로크 정의라고 명시합니다. 여러 환경에서 호환되는 파일을 전달하려면 초안 속성에 의존하지 말고 테스트한 클립이나 마스크를 쓰세요.

스트로크 너비를 두 배로 하는 이유는 무엇인가요? 일반 스트로크는 경로 양쪽에 절반씩 놓입니다. 클립이나 마스크가 절반을 버립니다. 따라서 예제에서 24단위 스트로크는 보이는 12단위 안쪽·바깥쪽 띠를 남깁니다.

안쪽 클립이나 바깥 마스크가 절단 준비된 외곽선을 만드나요? 아닙니다. 렌더링 모양을 바꾸지만 원래 경로와 스트로크는 남습니다. 커터나 업체가 채워진 윤곽선을 요구하면 별도 전달 사본을 만들고 적합한 편집기에서 스트로크를 경로로 변환한 뒤 가져온 도형을 확인하세요.

Sources

1. MDN — 채우기와 스트로크 — 중앙 스트로크 렌더링과 여기서 다룬 페인트 순서를 정의합니다.
2. W3C SVG Working Group — SVG Strokes 편집자 초안 — 제안된 정렬 값과 SVG 2에 대한 초안의 지위를 설명합니다.
3. MDN — clipPath 요소 — 안쪽 구성의 가시성 제한을 정의합니다.
4. MDN — mask 요소 — 바깥 구성의 마스크 영역과 좌표 속성을 정의합니다.
5. Alex Chan — SVG 안쪽·바깥쪽 스트로크 그리기 — 직접 만든 배지 예제의 시작점인 두 배 너비 클립·마스크 방식을 보여 줍니다.

로고가 아직 래스터라면 PerfectVector로 SVG 후보를 만들고 경로 경계를 확인하세요. 편집기에서 안쪽 또는 바깥쪽 구성을 시도하고 대상에서 전달 파일을 검증하세요.