SVG ClipPath 단위: 사용자 정의 도형을 대상에 맞추기

클리핑 도형이 대상의 경계에 맞춰 늘어나야 한다면 clipPathUnits="objectBoundingBox"를 사용하세요. 먼저 도형 좌표를 정규화해야 합니다. 명시적인 배치나 도형 비율을 유지하는 균일한 확대·축소가 필요하면 userSpaceOnUse를 사용하세요.

속성만 바꿔서는 수백 단위로 그린 경로가 0과 1 사이의 도형으로 변환되지 않습니다. 클립의 거의 전체가 대상 밖으로 이동할 수 있습니다. 이 가이드는 직접 만든 책갈피 실루엣 하나로 좌표 변경, 그에 따른 왜곡, 마름모 구멍을 정사각형으로 유지하는 중앙 맞춤을 보여줍니다.

클리핑은 가시성을 제어합니다. 원래 경로를 잘라 새로운 편집 가능한 기하학적 형태로 만들지는 않습니다. 이미 깔끔한 SVG 실루엣이 있다면 바로 사용하세요. 추적은 래스터 이미지에서 실루엣을 복원해야 할 때만 관련됩니다.

크기 조정 전에 좌표계 선택하기

기본값은 userSpaceOnUse입니다. 클립 좌표는 클립을 참조하는 요소의 사용자 좌표계에 속합니다. objectBoundingBox에서는 대상 경계의 왼쪽 위가 (0, 0), 오른쪽 아래가 (1, 1)에 대응합니다. clipPathUnits 참조를 확인하세요.

대상의 경계 상자가 바깥 SVG의 viewBox와 반드시 같지는 않습니다. 그룹을 클리핑하면 그룹 경계를 사용하며, 이는 내부 직사각형의 경계와 다를 수 있습니다. 예측 가능한 첫 테스트를 위해 치수를 아는 직사각형에 클립을 직접 적용하세요.

가로형 대상과 세로형 대상 비교하기

책갈피의 바깥 경계는 x=20, y=10, width=100, height=100입니다. 마름모는 같은 경로 안의 두 번째 하위 경로입니다. 테스트에서는 로컬 SVG 단위로 200 × 120과 120 × 200인 직사각형에 적용합니다.

가운데 열은 각 대상의 경계를 채우지만 마름모가 가로나 세로로 늘어납니다. 오른쪽 열은 마름모와 아래쪽 홈의 형태를 유지하면서 대상의 긴 축을 따라 빈 공간을 남깁니다. 여섯 구멍은 모두 투명하게 유지됩니다.

아래 전체 예제를 clippath-comparison.svg로 저장하고 브라우저에서 여세요. 열 순서는 이미지와 같습니다. 위쪽 행은 가로형 직사각형, 아래쪽 행은 세로형 직사각형입니다. 표시를 위한 이동은 샘플을 배열할 뿐 로컬 대상 치수를 바꾸지 않습니다.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 470">
  <defs>
    <path id="silhouette" d="M20 10H120V110L70 85L20 110Z M70 30L85 45L70 60L55 45Z"/>
    <clipPath id="fixed" clipPathUnits="userSpaceOnUse">
      <use href="#silhouette" clip-rule="evenodd"/>
    </clipPath>
    <clipPath id="box" clipPathUnits="objectBoundingBox">
      <use href="#silhouette" clip-rule="evenodd"
        transform="matrix(.01 0 0 .01 -.2 -.1)"/>
    </clipPath>
    <clipPath id="wide-fit" clipPathUnits="userSpaceOnUse">
      <use href="#silhouette" clip-rule="evenodd"
        transform="matrix(1.2 0 0 1.2 16 -12)"/>
    </clipPath>
    <clipPath id="tall-fit" clipPathUnits="userSpaceOnUse">
      <use href="#silhouette" clip-rule="evenodd"
        transform="matrix(1.2 0 0 1.2 -24 28)"/>
    </clipPath>
  </defs>
  <g fill="#107c86">
    <rect x="0" y="0" width="200" height="120"
      transform="translate(20 30)" clip-path="url(#fixed)"/>
    <rect x="0" y="0" width="200" height="120"
      transform="translate(260 30)" clip-path="url(#box)"/>
    <rect x="0" y="0" width="200" height="120"
      transform="translate(500 30)" clip-path="url(#wide-fit)"/>
    <rect x="0" y="0" width="120" height="200"
      transform="translate(60 230)" clip-path="url(#fixed)"/>
    <rect x="0" y="0" width="120" height="200"
      transform="translate(300 230)" clip-path="url(#box)"/>
    <rect x="0" y="0" width="120" height="200"
      transform="translate(540 230)" clip-path="url(#tall-fit)"/>
  </g>
</svg>

청록색 페인팅은 직사각형에 속합니다. 클리핑 경로가 보이는 윤곽을 제공합니다. 스크린샷은 같은 SVG 주변에 레이블과 체크무늬를 추가하며, 독립형 파일 자체의 배경은 투명합니다.

원점을 포함해 원본 경계 정규화하기

경계가 (minX, minY, width, height)인 원본의 점 (x, y)에 대해 다음을 계산하세요.

normalizedX = (x - minX) / width
normalizedY = (y - minY) / height

여기서는 (x - 20) / 100과 (y - 10) / 100입니다. box 정의의 행렬은 경로 데이터를 다시 쓰지 않고 두 연산을 수행합니다.

matrix(0.01 0 0 0.01 -0.2 -0.1)

이 행렬은 (20, 10)을 (0, 0)으로, (120, 110)을 (1, 1)로 매핑합니다. 원점을 빼지 않고 100으로 나누기만 하면 도형이 대상 안에서 어긋난 상태로 남습니다. 경계 상자 매핑은 이렇게 정규화한 결과를 대상 너비와 높이에 따라 각각 확대·축소합니다.

정규화하려는 기하학적 형태의 실제 경계를 사용하세요. viewBox에는 의도적인 여백이 포함될 수 있으므로 치수가 실루엣 경계와 같을 필요는 없습니다. 그 여백을 유지하려면 두 측정값을 실수로 섞지 말고 의도적으로 viewBox 사각형을 사용하세요.

중첩 변환이 있는 가져온 아트워크는 일관된 하나의 좌표계에서 측정하고 정규화하세요. 변환을 자신 있게 반영할 수 없다면 원시 경로 데이터를 복사하기 전에 편집기에서 변환을 정리하세요. SVG 편집 작업 흐름은 전달 전에 경로와 그룹을 검사하는 방법을 다룹니다.

하나의 배율로 비율 유지하기

로컬 (0, 0)에 있고 너비가 W, 높이가 H인 대상 직사각형에는 다음을 사용하세요.

s  = min(W / width, H / height)
tx = (W - s * width) / 2 - s * minX
ty = (H - s * height) / 2 - s * minY
matrix(s 0 0 s tx ty)

가로형 대상에서는 s=1.2, tx=16, ty=-12입니다. 클립은 x=40..160과 y=0..120을 차지합니다. 세로형 대상에서는 s=1.2, tx=-24, ty=28이며 클립이 x=0..120과 y=40..160에 배치됩니다.

이는 userSpaceOnUse의 명시적인 행렬이므로 대상의 로컬 치수가 바뀌면 다시 계산하세요. 전체 SVG를 다른 CSS 크기로 표시하는 것은 구성을 함께 확대·축소합니다. 내부 직사각형을 가로형에서 세로형으로 바꾸는 것은 별개의 연산입니다.

이 계산은 원본 너비와 높이가 0이 아니고 반영하지 않은 회전이나 기울이기가 없다고 가정합니다. 내부에 맞추는 연산이므로 빈 공간이 남는 것이 정상입니다. 모티프 비율 유지보다 대상을 채우는 일이 중요하다면 경계 상자 단위로 늘리는 방식이 적합합니다.

클리핑 기하학적 형태에 구멍 유지하기

예제는 각 clipPath 내부의 use에 clip-rule="evenodd"를 지정합니다. 참조된 경로에는 책갈피 외곽과 마름모 하위 경로가 모두 있습니다. 규칙은 이 복합 도형의 어느 영역이 클립 내부인지 결정합니다.

청록색 직사각형에 clip-rule을 지정해도 클리핑 도형의 규칙은 설정되지 않습니다. 마찬가지로 원본을 칠하는 데 사용한 fill-rule은 클리핑 규칙을 대신하지 않습니다. MDN의 clip-rule 참조는 clipPath 안에서의 적용 범위를 설명합니다.

별도의 흰색 마름모를 추가해 클립에서 빼질 것이라고 기대하지 마세요. 클리핑 경로 안의 자식 실루엣은 보이는 영역으로 결합되며 페인팅 색상은 흑백 마스크 값처럼 작동하지 않습니다. 이 예제 같은 구멍에는 복합 경로와 의도한 감김 규칙을 사용하세요. SVG 구멍이 채워지는 문제 가이드는 기반 경로 구조를 설명합니다.

부분적으로 투명한 가장자리나 휘도 기반 가시성이 필요하면 같은 이미지에서 clipPath와 SVG 마스크를 비교하세요. 클립은 기하학적 경계에 유용하며 마스크는 다른 가시성 모델을 제공합니다. CSS로 칠하는 단색 아이콘은 SVG CSS 마스크 가이드를 참고하세요.

경계와 내보낸 결과 확인하기

수평선이나 수직선은 스트로크가 보여도 기하학적 경계 상자의 높이나 너비가 0일 수 있습니다. 이런 대상에는 objectBoundingBox를 피하고 정규화할 때 0인 원본 치수로 나누지 마세요. SVG 좌표 명세는 이 경계 상자 계산에서 스트로크 너비를 제외하며 이런 퇴화 사례를 경고합니다.

전달 전에 다음을 확인하세요.

1. 참조한 클립 ID가 존재하며 문서에서 유일한지 확인하세요.
2. 가장 작은 구멍까지 포함해 가로형과 세로형 대상을 비교하세요.
3. 원본 경계와 대상 경계를 각각 의도한 좌표계에서 확인하세요.
4. 내보낸 SVG를 저장하고 사용할 애플리케이션에서 다시 여세요.
5. 클립을 편집 가능하게 유지해야 한다면 원본 기하학적 형태를 보관하세요.

CSS Masking 명세는 클리핑이 요소의 고유 기하학적 형태가 아닌 렌더링을 바꾼다고 명시합니다. 따라서 절단기나 기하학 처리 애플리케이션에는 실제 경로 교집합 연산이나 다른 편집기 연산이 필요할 수 있습니다. 해당 애플리케이션에서 결과 경로를 확인하세요. 올바른 브라우저 미리보기만으로 절단 준비가 된 파일임을 입증할 수는 없습니다.

필요할 때 래스터 실루엣 복원하기

사용자 정의 모티프가 PNG나 JPG로만 남아 있고 클립에 쓸 편집 가능한 윤곽이 필요하면 PerfectVector가 적합합니다. 이미지를 SVG로 변환한 뒤 실루엣을 추출하기 전에 바깥 가장자리, 안쪽 구멍, 불필요한 배경 도형을 검사하세요. 어떤 윤곽을 클립에 포함할지 선택하세요. 원본 색상은 별도의 클리핑 강도를 정의하지 않습니다.

기존 벡터 마스터가 있다면 유지하세요. 이 예제처럼 단순한 기하학적 책갈피는 직접 그릴 수 있습니다. 벡터화가 클립 단위를 선택하거나 경계를 정규화하거나 영구적인 불리언 자르기를 수행하지는 않습니다. 원본 선택에 관한 더 넓은 조언은 이미지 벡터화 개요를 읽어 보세요.

FAQ

objectBoundingBox는 도형 비율을 유지하나요? 아닙니다. 정규화한 클립을 대상의 너비와 높이에 독립적으로 매핑합니다. 실루엣 비율을 유지해야 한다면 userSpaceOnUse에서 균일한 배율을 사용하세요.

clipPathUnits를 바꾸면 도형이 숨겨지는 이유는 무엇인가요? 경로 좌표가 여전히 원본 단위일 수 있습니다. 원본 원점을 포함해 대상 상대 좌표계로 정규화하거나 userSpaceOnUse를 유지하고 명시적으로 배치하세요.

클리핑하면 SVG의 숨겨진 부분이 삭제되나요? 아닙니다. 클리핑은 기반 기하학적 형태를 유지하면서 렌더링되는 부분을 바꿉니다. 전달할 파일에 영구적으로 잘린 윤곽이 필요하면 적절한 경로 편집 연산을 사용하세요.

Sources

1. MDN — clipPathUnits — 좌표 선택과 기본 사용자 공간 해석을 설명합니다.
2. MDN — clip-rule — 클리핑 경로 안에서 감김 규칙을 지정하는 위치를 설명합니다.
3. W3C — SVG 좌표계 — 경계 상자 매핑, 스트로크 제외, 치수가 0일 때의 제한을 설명합니다.
4. W3C — CSS Masking — 클리핑 기하학적 형태, 결합된 실루엣, 변경되지 않는 기반 경로를 설명합니다.

클립이 래스터 모티프에서 시작한다면 PerfectVector로 SVG를 준비하고 실루엣과 구멍을 검사한 뒤, 늘리기와 균일 맞춤 중 하나를 선택하기 전에 두 대상 비율을 모두 테스트하세요.