SVG 패턴 단위: 반복 모티프의 올바른 크기 유지하기

도형 치수를 바꾸면서 SVG 패턴의 반복 간격을 일정하게 유지하려면 patternUnits="userSpaceOnUse"와 숫자 타일 너비·높이를 사용하세요. 타일 내부 아트워크는 patternContentUnits나 패턴 viewBox로 별도로 제어하세요.

작은 모티프로 좁은 배지와 넓은 배너를 모두 채울 때 이 구분이 중요합니다. 배너에 복사본을 더 많이 넣거나 복사본 사이 간격을 넓히거나 모티프를 늘리고 싶을 수 있습니다. 각각 다른 좌표 선택입니다. 배너 그룹 전체를 확대·축소하면 결과는 또 달라집니다.

모티프가 이미 SVG 경로로 구성되어 있다면 그 경로를 유지하세요. 벡터화는 원본이 래스터 이미지뿐일 때 앞선 작업 단계에서 필요합니다.

타일과 아트워크 구분하기

패턴에는 반복되는 직사각형 타일과 그 안에 그리는 콘텐츠가 있습니다. patternUnits는 타일의 x, y, width, height를 제어합니다. patternContentUnits는 패턴에 viewBox가 없는 경우 콘텐츠 좌표를 제어합니다.

objectBoundingBox에서 너비 .25는 칠하는 객체의 경계 상자 너비의 4분의 1을 뜻합니다. 모티프 너비의 4분의 1이 아닙니다. 너비 120 단위 직사각형에는 30 단위 타일, 너비 240 단위 직사각형에는 60 단위 타일이 생깁니다.

콘텐츠 기본값은 userSpaceOnUse로 유지됩니다. 따라서 patternUnits만 바꾸면 각 모티프 크기는 그대로인데 간격이 바뀔 수 있습니다. 두 속성이 함께 움직인다고 가정하지 말고 각각 의도적으로 설정하세요.

같은 나뭇잎의 네 버전 비교하기

이 예제를 위해 나뭇잎 경로를 직접 그리고 브라우저에서 SVG를 렌더링했습니다. 두 대상 직사각형 모두 높이는 80 단위이며 너비는 120과 240입니다. 스크린샷은 직접 만든 도형 주변에 레이블과 배경을 추가합니다. SVG 시연이며 PerfectVector 변환 결과가 아닙니다.

행을 위에서 아래로 읽으세요.

1. 고정 40 × 40 타일은 좁은 직사각형에 세 열, 넓은 직사각형에 여섯 열을 만듭니다. 나뭇잎 치수는 유지됩니다.
2. 타일 너비 .25는 두 대상 모두에서 네 열을 유지합니다. 나뭇잎 좌표가 여전히 사용자 단위를 사용하므로 넓은 직사각형에서는 나뭇잎 사이 공간이 더 넓습니다.
3. 경계 상자 콘텐츠 좌표는 대상 너비가 두 배가 되면 나뭇잎을 수평으로 늘립니다. 대상 높이는 유지되므로 세로 크기는 그대로입니다.
4. viewBox="0 0 40 40"를 가진 고정 40 × 40 타일은 마크업에 patternContentUnits="objectBoundingBox"가 남아 있어도 첫 번째 행의 결과로 돌아갑니다. 패턴 viewBox가 우선합니다.

전체 예제 열기

pattern-units.svg로 저장하고 브라우저에서 직접 여세요. 네 행은 그림과 같은 정의를 사용하며 레이블과 배경은 없습니다. 각 직사각형 쌍은 이동한 그룹 안에 배치되어 로컬 원점을 비교할 수 있습니다.

<svg xmlns="http://www.w3.org/2000/svg" width="560" height="420" viewBox="0 0 560 420">
<defs>
  <pattern id="fixed" patternUnits="userSpaceOnUse" width="40" height="40">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
  <pattern id="tile" patternUnits="objectBoundingBox" width=".25" height=".5">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
  <pattern id="both" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox" width=".25" height=".5">
    <path d="M.04 .30 Q.04 .08 .20 .10 Q.20 .33 .04 .30Z" fill="#127f70"/>
  </pattern>
  <pattern id="box" patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox" width="40" height="40" viewBox="0 0 40 40">
    <path d="M8 24 Q8 6 30 8 Q30 26 8 24Z" fill="#127f70"/>
  </pattern>
</defs>
  <g transform="translate(20 20)"><rect width="120" height="80" fill="url(#fixed)"/></g>
  <g transform="translate(220 20)"><rect width="240" height="80" fill="url(#fixed)"/></g>
  <g transform="translate(20 120)"><rect width="120" height="80" fill="url(#tile)"/></g>
  <g transform="translate(220 120)"><rect width="240" height="80" fill="url(#tile)"/></g>
  <g transform="translate(20 220)"><rect width="120" height="80" fill="url(#both)"/></g>
  <g transform="translate(220 220)"><rect width="240" height="80" fill="url(#both)"/></g>
  <g transform="translate(20 320)"><rect width="120" height="80" fill="url(#box)"/></g>
  <g transform="translate(220 320)"><rect width="240" height="80" fill="url(#box)"/></g>
</svg>

fixed 패턴부터 시작해 두 번째 직사각형 너비만 바꾸세요. 경로를 바꾸기 전에 tile과 both를 확인하세요. 그러면 좌표 선택을 아트워크 자체와 구분할 수 있습니다. 경로와 색상을 더 전반적으로 수정하려면 SVG 편집 가이드를 사용하세요.

모티프에 자체 좌표가 있으면 viewBox 사용하기

패턴 viewBox를 사용하면 타일은 별도 크기를 가지면서 나뭇잎은 익숙한 그리기 영역을 유지할 수 있습니다. SVG 패턴 명세는 viewBox와 preserveAspectRatio로 그 그리기 영역을 타일에 맞춥니다.

마지막 행에서는 타일과 viewBox가 모두 40 × 40이므로 종횡비 불일치가 없습니다. 나중에 타일을 직사각형으로 만들면 기본 preserveAspectRatio="xMidYMid meet"는 모티프 비율을 유지하며 맞춰진 그리기 영역을 중앙에 놓습니다. preserveAspectRatio="none"은 수평·수직 독립 확대·축소를 허용합니다. 의도적인 왜곡일 때만 선택하세요.

패턴 viewBox가 있으면 patternContentUnits를 바꿔도 크기는 수정되지 않습니다. 이 경우 그 속성은 효과가 없습니다. 어느 부분을 바꿔야 하는지에 따라 타일 치수, viewBox, 종횡비 규칙을 바꾸세요.

하나의 정의로 반복 채우기를 그려야 할 때 패턴이 유용합니다. 대신 개별 배치한 복사본이 필요하면 SVG 심볼과 use 인스턴스가 더 직접적으로 적합합니다.

직사각형 크기 변경과 그룹 확대·축소는 다릅니다

userSpaceOnUse는 영구적인 화면 픽셀이 아니라 사용자 좌표에서 간격을 고정합니다. 변환은 패턴 채우기를 포함한 그 좌표를 확대·축소할 수 있습니다.

위의 fixed 정의를 사용하는 두 버전도 열었습니다. 첫 직사각형은 width="240"이었습니다. 두 번째는 transform="translate(20 120) scale(2 1)"인 그룹 안에서 width="120"을 유지했습니다. 둘 다 그 문서에서 화면 단위 240을 차지했지만 첫 번째에는 나뭇잎 여섯 열이, 변환한 쪽에는 수평으로 늘어난 세 열이 보였습니다.

반응형 아트워크 문제를 해결할 때 이 차이를 사용하세요.

• 반복을 더 많이 표시하려면 좌표 배율을 유지하면서 대상의 기하학적 크기를 늘리세요.
• 전체 구성을 확대하려면 그룹을 확대하고 패턴 외관도 함께 확대될 것으로 예상하세요.
• 페이지 레이아웃이 루트 SVG 표시 크기를 바꾼다면 패턴 속성을 원인으로 보기 전에 루트 viewBox 매핑을 확인하세요.

SVG 좌표계 명세는 사용자 좌표에 적용하는 변환을 설명합니다. 애플리케이션 사이에 불일치가 있다면 먼저 SVG 문서 치수를 확인하세요. 패턴 단위만으로 물리적 출력 크기를 확정할 수는 없습니다.

반복 전에 사용자 정의 모티프 준비하기

모티프가 PNG나 JPG로만 있다면 PerfectVector로 반복에 사용할 SVG 기하학적 형태를 복원할 수 있습니다. 모티프를 벡터로 변환하고 편집기에서 결과를 연 뒤 패턴 안에 배치하기 전에 윤곽, 작은 틈, 불필요한 배경 도형을 검사하세요.

모티프의 별도 SVG 마스터를 보관하세요. 복사본 주변에 타일을 구성한 뒤 좁은 대상과 넓은 대상을 모두 테스트하세요. 기존 벡터 아트워크는 바로 이 편집 단계로 넘어갈 수 있습니다. 단순한 기하학적 마크는 수동으로 다시 그리는 편이 더 빠를 수 있고 사진은 복잡한 경로 집합으로 추적하기보다 이미지로 유지하는 편이 나을 수 있습니다.

브라우저 렌더링만으로 모든 디자인 애플리케이션이 패턴 정의를 유지한다고 입증할 수는 없습니다. 저장한 파일을 실제 대상에서 다시 열고 반복 간격과 모티프 모양을 확인하세요. 반복 채우기는 보이는 각 나뭇잎을 독립적으로 편집 가능한 복사본으로 만들지도 않습니다. SVG 파일 가이드는 외관과 함께 문서 구조가 중요한 이유를 설명합니다.

파일을 전달하기 전에 모든 fill="url(#...)"가 존재하는 고유 패턴 ID를 가리키는지, 타일 치수가 양수인지, 모티프가 의도한 타일에 맞는지 확인하세요. SVG 패턴은 보통 타일 경계에서 콘텐츠를 자르므로 가장자리를 넘는 나뭇잎에는 넘친 부분이 보일 것이라는 가정 대신 의도적인 반복 설계가 필요합니다.

FAQ

간격은 바뀌었지만 나뭇잎 크기는 그대로인 이유는 무엇인가요? patternUnits는 타일 치수를, patternContentUnits는 아트워크 좌표를 제어합니다. 기본 사용자 공간 콘텐츠를 가진 경계 상자 타일은 나뭇잎 크기를 바꾸지 않고 간격을 바꿀 수 있습니다.

patternContentUnits가 아무 효과 없는 것처럼 보이는 이유는 무엇인가요? 패턴에 viewBox가 있는지 확인하세요. 있으면 그것이 콘텐츠 좌표 매핑을 정의하며 patternContentUnits는 효과가 없습니다.

userSpaceOnUse가 화면에서 패턴 크기를 유지하나요? 대상의 현재 사용자 좌표계에서 숫자 타일 치수를 유지합니다. 그룹을 확대·축소하거나 루트 SVG의 좌표-뷰포트 매핑을 바꾸면 패턴 표시 크기는 여전히 바뀔 수 있습니다.

Sources

1. MDN — patternUnits — 타일 기하학적 좌표와 기본 경계 상자 설정을 정의합니다.
2. MDN — patternContentUnits — 콘텐츠 좌표와 viewBox 우선 적용을 정의합니다.
3. W3C — SVG 패턴 — 타일 맞춤, 종횡비 동작, 패턴 클리핑을 설명합니다.
4. W3C — SVG 좌표계 — 그룹 확대·축소의 기반인 사용자 좌표 변환을 정의합니다.

재사용할 모티프가 래스터로만 있나요? 이미지를 SVG 경로로 바꾸고 복원한 윤곽을 검사한 뒤 최종 반복을 구성하기 전에 두 대상 크기로 테스트하세요.