SVG 점선 윤곽: 대시 간격과 둥근 끝 모양 제어하기

SVG 점선 윤곽을 만들려면 도형에 스트로크를 지정하고 stroke-linecap="round"를 설정한 뒤 stroke-dasharray="0 20"처럼 길이가 0인 대시 다음에 양수 간격을 사용하세요. 스트로크 너비가 점의 지름을 제어합니다. 대시 배열의 두 번째 숫자는 경로를 따라 측정한 점 중심 사이 거리이며, 보이는 점의 가장자리 사이 빈 공간이 아닙니다.

끝 모양을 둥글게 바꾼 뒤 테두리가 빽빽해 보일 때는 이 구분이 중요합니다. 닫힌 배지에는 또 다른 문제가 있습니다. 반복 패턴이 시작점으로 돌아올 때 남은 간격이 더 짧을 수 있습니다. 아래 예제는 끝 모양, 보이는 간격, 닫히는 이음부를 구분해 적절한 값을 조정할 수 있게 합니다.

이는 장식용 스트로크 설정입니다. 새로운 오프셋 윤곽을 만들거나 그려진 각 점을 개별 절단 경로로 바꾸지는 않습니다.

평평한 끝, 둥근 끝, 점 비교하기

stroke-dasharray는 칠해지는 대시 길이와 칠해지지 않는 간격 길이를 번갈아 지정합니다. 숫자 두 개로 된 목록은 반복을 확인하기 쉽습니다. MDN 대시 배열 참조는 항목 수가 홀수인 목록을 반복해 짝수 길이 시퀀스를 만드는 방식도 설명합니다.

이 독립형 SVG를 파일에 복사한 뒤 브라우저에서 여세요. 직접 작성한 각 경로의 길이는 240 단위이고 스트로크 너비는 8입니다.

<svg xmlns="http://www.w3.org/2000/svg" width="420" height="300" viewBox="0 0 420 300">
 <g fill="none" stroke="#147d78" stroke-width="8">
  <path d="M40 55H280" stroke-dasharray="12 20" stroke-linecap="butt" />
  <path d="M40 145H280" stroke-dasharray="12 20" stroke-linecap="round" />
  <path d="M40 235H280" stroke-dasharray="0 20" stroke-linecap="round" />
 </g>
</svg>

첫 번째 행은 평평한 끝 모양과 12 20을 사용합니다. 완전한 대시는 12 단위를 차지하고 눈에 보이는 빈 공간은 20 단위입니다. 두 번째 행은 같은 숫자에 둥근 끝 모양을 사용합니다. 각 끝이 원래 대시 끝점을 넘어 4 단위씩 뻗으므로 완전한 대시는 20 단위를 차지하고 보이는 간격은 12로 줄어듭니다.

세 번째 행은 대시 길이를 0으로 바꿉니다. 둥근 끝 모양이 지름 8의 점을 만들고 이 직선 경로에서 중심 간 거리는 20 단위가 됩니다. 눈에 보이는 가장자리 사이 간격은 12 단위입니다. W3C의 SVG 페인팅 규칙은 길이가 0인 대시의 처리까지 포함해 대시 끝의 모양을 정의하며, MDN의 끝 모양 참조는 끝의 기하학적 형태를 설명합니다.

거리 보정이나 변환이 없는 직선 구간에서 완전하고 서로 떨어진 대시에 유용한 계산은 다음과 같습니다.

• 평평한 끝: 보이는 대시 길이 = dash; 보이는 간격 = gap.
• 둥근 끝: 보이는 대시 길이 = dash + stroke-width; 보이는 간격 = gap - stroke-width.
• 둥근 점: 지름 = stroke-width; 중심 간격 = gap; 보이는 간격 = gap - stroke-width.

마지막 계산값이 0이거나 음수이면 점이 서로 닿거나 겹칩니다. 굽은 부분에서는 경로를 따라 측정한 거리와 점 사이 직선거리가 다릅니다. 직선 간격 계산을 전체 윤곽에 적용하지 말고 모서리와 곡선을 확인하세요.

닫힌 배지에 반복 패턴 맞추기

다음 직사각형 배지 경로는 각각 180 × 120 단위입니다. 둘레는 2 × (180 + 120) = 600입니다. 경로는 왼쪽 위 모서리에서 시작해 시계 방향으로 진행합니다.

<svg xmlns="http://www.w3.org/2000/svg" width="620" height="230" viewBox="0 0 620 230">
  <g fill="none" stroke="#147d78" stroke-width="8" stroke-linecap="round">
    <path d="M40 40H220V160H40Z" stroke-dasharray="0 32" />
    <path d="M360 40H540V160H360Z" stroke-dasharray="0 30" />
  </g>
</svg>

왼쪽의 0 32는 경로 거리 0, 32, 64에서 시작해 576까지 점의 중심을 배치합니다. 경로가 시작점으로 돌아오기 전 남은 거리는 24 단위뿐입니다. 닫히는 간격이 다른 32 단위 간격보다 짧으므로 이음부가 불균일합니다. SVG 표시 크기를 늘리면 불일치가 확대될 뿐 해결되지는 않습니다.

오른쪽의 0 30은 둘레를 20개의 동일한 간격으로 나눕니다. 이 직사각형에서는 두 변의 길이도 30으로 나누어떨어지므로 모서리에 점이 맞춰집니다. 각 직선 변에서 8 단위 점 사이에는 22 단위의 눈에 보이는 빈 공간이 남습니다. 이는 이 배지의 반복을 수정하는 방법이며 모든 곡선 윤곽에서 시각적 간격이 동일하다는 보장은 아닙니다.

자신의 윤곽에서는 원하는 점 개수를 정하고 경로 둘레를 그 개수로 나누어 초기 반복 거리를 구하세요. 그런 다음 특히 굽은 부분, 작은 디테일, 닫히는 지점의 실제 렌더링 결과를 확인하세요. SVG 페인팅 명세가 설명하듯 각 하위 경로에서 대시 패턴이 다시 시작하므로, 떨어진 하위 경로가 여러 개 있는 도형은 따로 주의해야 합니다.

stroke-dashoffset은 경로를 따라 패턴의 시작 위치를 옮깁니다. 눈에 띄는 이음부를 덜 보이는 곳으로 옮길 수 있지만 32 단위 반복이 600을 나누어떨어지게 하지는 못합니다. 일정하게 닫히는 것이 목표라면 길이에 맞춘 반복을 사용하세요. MDN 대시 오프셋 참조는 이 위상 조정을 설명합니다.

두 독립형 SVG 파일을 각각 열고 브라우저 렌더링을 이 비교와 대조했습니다. 예제는 단위 없는 값을 사용하며 pathLength 보정, 변환, 외부 CSS가 없습니다. 직접 작성한 이 경로를 보여주는 예제이며 PerfectVector 변환이나 애플리케이션 간 호환성 테스트가 아닙니다.

크기와 페인팅 설정 일관되게 유지하기

위와 같이 SVG 자체 좌표계의 숫자 값으로 시작하세요. 백분율로 바꾸면서 경로 둘레에 대한 같은 비율을 나타낸다고 가정하지 마세요. 대시 배열 참조는 백분율을 경로 길이가 아닌 뷰포트를 기준으로 계산한다고 설명합니다.

pathLength로 거리를 정규화한다면 보정된 거리 체계에서 대시 패턴을 계산하세요. 이 예제의 보정되지 않은 둘레와 다른 코드 조각의 정규화된 대시 값을 섞지 마세요. SVG 스트로크 애니메이션 가이드는 그려지는 효과를 위해 네이티브 경로 길이 보정을 사용하는 별도의 사례를 보여줍니다.

테두리만 필요하면 fill="none"을 설정하세요. 스트로크 일부가 대시로 표시되어도 채우기는 계속 보일 수 있습니다. 예상한 점이 사라지면 요소에 보이는 스트로크가 있는지, CSS 규칙이 표시 속성을 덮어쓰지 않았는지 확인하세요. 스트로크 누락 점검 목록은 간격을 바꾸기 전에 할 확인을 다룹니다.

기하학적 형태 주변에 스트로크를 위한 충분한 공간을 남기세요. 8 단위 스트로크는 경로 바깥까지 뻗고 둥근 끝은 열린 끝점 너머까지 뻗습니다. 예제에는 점이 뷰포트에서 잘리지 않도록 여백이 있습니다. 전달할 SVG를 실제 표시 크기로 테스트하세요. 확대 미리보기에서 뚜렷한 작은 점도 아이콘에서는 잘 보이지 않을 수 있습니다.

아트워크 준비와 테두리 디자인 구분하기

배지 안의 모티프가 PNG나 JPG로만 있다면 PerfectVector의 이미지 벡터화 작업 흐름으로 해당 모티프의 편집 가능한 SVG 아트워크를 준비할 수 있습니다. 테두리 안에 배치하기 전에 실루엣, 작은 구멍, 분리된 영역을 원본 이미지와 비교하세요. 장식용 윤곽은 별도의 도형으로 유지해 스트로크 너비와 점 간격을 독립적으로 바꿀 수 있게 하세요.

기존 벡터 마스터가 있다면 유지하세요. 직사각형이나 다른 단순한 테두리는 보통 편집기에서 직접 그리기 쉽습니다. 벡터화가 자동으로 오프셋 테두리를 디자인하거나 단일 중심선을 복원하거나 대시 간격을 선택하지는 않습니다. 추적한 두꺼운 선에 경계가 두 개 있다면 단일선 SVG 가이드가 하나의 그리기 경로와 다른 이유를 설명합니다.

절단 작업에서는 기계가 장식용 스트로크 페인팅을 개별 점 모양 절단으로 해석한다고 가정하지 마세요. 편집기에서 의도한 기하학적 형태를 준비하고 대상 애플리케이션의 미리보기를 확인하세요. 이 글은 브라우저 페인팅을 테스트하며 절단기의 동작을 테스트하지는 않습니다. 블로그 편집 가이드는 관련 파일 준비 결정을 다룹니다.

최종 윤곽 확인하기

파일을 확정하기 전에 짧은 열린 경로와 닫힌 테두리를 따로 확인하세요. 끝 모양, 스트로크 너비, 반복 숫자를 확인한 뒤 열린 경로의 첫 번째와 마지막 표시, 닫힌 경로의 이음부를 살펴보세요. 아트워크를 사용할 크기로 좁게 굽은 곡선을 확인하세요.

저장한 SVG를 사용할 대상에서 다시 여세요. 편집 가능한 장식용 페인팅이 필요하면 스트로크 속성을 유지하세요. 대상에 영구적인 윤곽이 필요하면 별도의 편집 단계로 변환하고 검증하세요. 나중에 간격을 수정할 수 있도록 편집 가능한 원본 복사본을 보관하세요.

FAQ

둥근 끝 모양을 선택하면 대시가 더 가까워 보이는 이유는 무엇인가요? 둥근 끝은 대시의 양 끝 너머로 뻗습니다. 직선 구간에서 표시들이 서로 떨어져 있는 경우, 완전한 대시 사이의 보이는 간격은 지정한 간격에서 스트로크 너비를 뺀 값입니다.

짧은 알약 모양 대신 둥근 점을 만들려면 어떻게 하나요? 길이가 0인 대시, 양수 간격, 둥근 끝 모양을 사용하세요. 예를 들어 스트로크 너비 8과 stroke-dasharray="0 20"을 사용하면 직선 경로에서 중심 간 거리가 20 단위인 8 단위 점이 생깁니다.

닫힌 윤곽에서 간격 하나가 다른 이유는 무엇인가요? 반복이 둘레를 균등하게 나누지 못할 수 있습니다. 반복을 경로 길이에 맞춘 뒤 닫히는 지점과 모서리를 확인하세요. 대시 오프셋을 옮기면 패턴의 위상은 바뀌지만 산술적 불일치는 해결되지 않습니다.

Sources

1. MDN — stroke-dasharray — 대시와 간격이 번갈아 나오는 목록 및 값 처리 방식을 정의합니다.
2. MDN — stroke-linecap — 평평한 끝과 둥근 끝의 기하학적 형태, 길이가 0일 때의 동작을 설명합니다.
3. W3C — SVG 페인팅 — 대시 페인팅, 끝 모양 처리, 하위 경로의 패턴 처리를 규정합니다.
4. MDN — stroke-dashoffset — 대시 패턴을 이동하는 오프셋을 정의합니다.

배지의 모티프가 래스터 이미지로 시작한다면 PerfectVector로 SVG 후보를 준비하고 윤곽과 구멍을 확인한 다음 점선 테두리를 별도의 편집 가능한 도형으로 추가하세요.