SVG 그림자가 잘리나요? 필터와 뷰포트를 확인하세요

잘린 SVG 그림자는 서로 다른 두 경계에 걸릴 수 있습니다. 필터 영역은 효과를 계산할 범위를 제한하고, SVG 뷰포트나 부모 컨테이너는 그 렌더링 결과를 다시 자를 수 있습니다. 먼저 필터 영역을 늘리세요. 그래도 그림자가 이미지 가장자리에서 끝나면 뷰포트와 클리핑 규칙을 확인하세요.

경로가 온전한 SVG를 다시 추적할 필요는 없습니다. 이 가이드는 같은 원본 실루엣을 유지하면서 효과의 작업 영역과 보이는 캔버스를 바꿉니다.

두 경계와 변하지 않는 하나의 경로

작은 실루엣을 직접 만들고 브라우저에서 세 버전을 열었습니다. 각 버전은 같은 경로와 feDropShadow 설정인 dx="22", dy="18", stdDeviation="12"를 사용합니다. 아래 캡처는 실제 브라우저 렌더링이며 PerfectVector 변환이 아닙니다.

첫 번째 버전의 필터 영역은 (50, 50)부터 (210, 180)까지입니다. 그림자의 오른쪽과 아래쪽 가장자리가 선명하게 잘립니다. 두 번째 버전에서는 영역을 (-20, -20)부터 (300, 280)까지 확장하지만 SVG는 여전히 0 0 240 220만 보여줍니다. 이제 그림자 오른쪽 가장자리가 뷰포트 프레임에 도달해 그곳에서 잘립니다.

세 번째 버전은 큰 필터 영역을 유지하고 viewBox를 -20 -20 320 300으로 바꿉니다. width와 height도 320과 300이 되어 세 시연 모두 CSS 픽셀 하나당 SVG 단위 하나를 유지합니다. 추가 공간은 경로 크기를 바꾸지 않고 보이는 그림자를 담습니다.

올바른 좌표계에서 필터 영역 확장하기

<filter>의 x, y, width, height 속성은 필터 영역을 정의합니다. 기본값은 -10%, -10%, 120%, 120%입니다. 이미 여백이 일부 있지만 특정 이동값과 흐림에는 부족할 수 있습니다. MDN에서 이 기본값을 설명합니다.

숫자를 바꾸기 전에 filterUnits를 확인하세요.

• 기본값인 objectBoundingBox는 필터가 적용된 요소의 경계 상자에 상대적으로 영역을 해석합니다. 백분율 여백은 도형 치수에 따라 달라집니다.
• userSpaceOnUse는 필터를 참조하는 요소의 현재 사용자 좌표계에서 영역을 정의할 수 있게 합니다. 아트워크 좌표를 알 때 유용합니다.

filterUnits 참조가 설명하듯 이 규칙들은 영역에 적용됩니다. 그림자의 이동값이나 흐림 단위를 자동으로 바꾸지는 않습니다.

primitiveUnits는 필터 프리미티브 내부의 길이 값을 제어합니다. 기본값은 userSpaceOnUse이며 예제에서는 22, 18, 12가 그 의미를 유지하도록 명시적으로 설정했습니다. objectBoundingBox로 바꾸면 이 값들의 해석이 달라집니다. MDN은 프리미티브 단위와 필터 영역 단위를 구분합니다.

자신의 파일에서는 필터가 적용된 객체나 그룹의 경계를 검사한 뒤 그림자가 뻗는 방향으로 충분한 공간을 추가하세요. 아래 숫자는 이 시연에 맞는 값이며 범용 그림자 여백은 아닙니다. 흐림을 늘리거나 그림자를 옮기거나 필터가 적용된 그룹을 변환하면 결과를 다시 확인하세요.

SVG 뷰포트에도 공간 주기

이 전체 예제를 shadow.svg로 저장하고 브라우저에서 여세요. 세 번째 상태에 사용한 바로 그 SVG이며 독립형 파일로도 확인했습니다.

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="300" viewBox="-20 -20 320 300" overflow="hidden">
  <defs>
    <filter id="shadow" filterUnits="userSpaceOnUse"
      primitiveUnits="userSpaceOnUse" x="-20" y="-20" width="320" height="300">
      <feDropShadow dx="22" dy="18" stdDeviation="12"
        flood-color="#152b34" flood-opacity="0.7"/>
    </filter>
  </defs>
  <path d="M 60 160 L 60 100 Q 60 60 100 60 L 200 60 L 200 120 Q 200 170 150 170 L 70 170 Q 60 170 60 160 Z" fill="#078875" filter="url(#shadow)"/>
</svg>

viewBox에는 최소 x, 최소 y, 너비, 높이의 네 값이 있습니다. 이 사용자 좌표 사각형을 SVG 뷰포트에 매핑합니다. 표시 너비와 높이를 유지한 채 viewBox 치수를 늘리면 아트워크가 작아 보입니다. 요소 밖에 레이아웃 공간을 추가하는 것은 아닙니다. MDN은 viewBox 매핑을 설명합니다.

두 실패를 재현하려면 예제 복사본에서 다음 값만 바꾸세요.

1. 가운데 상태는 필터를 유지하고 루트를 width="240", height="220", viewBox="0 0 240 220"으로 설정하세요.
2. 첫 번째 상태는 그 작은 뷰포트를 유지하면서 필터도 x="50", y="50", width="160", height="130"으로 설정하세요.
3. 전체 예제를 복원하고 오른쪽과 아래쪽 가장자리를 비교하세요. 경로 데이터는 전혀 바뀌지 않습니다.

전체 그림이 캔버스 밖에 있다면 더 포괄적인 빈 SVG 점검 절차을 따르세요. 그림은 보이지만 가져올 때 치수가 바뀐다면 기하학적 형태를 조정하기 전에 SVG 단위와 크기의 관계를 확인하세요.

overflow가 인라인 SVG에는 도움이 되어도 파일 문제를 놓치는 이유

예제는 뷰포트 경계를 재현할 수 있도록 overflow="hidden"을 명시적으로 설정합니다. 인라인 SVG에서는 overflow="visible"로 그 뷰포트 클립을 제거할 수 있습니다. 그러나 필터 영역에서 이미 버려진 픽셀은 복구하지 못하고, 자체 클리핑이 있는 상위 요소가 결과를 계속 숨길 수도 있습니다. CSS가 SVG 표시 속성을 덮어쓸 수도 있습니다. SVG overflow 참조는 이 클리핑 규칙을 설명합니다.

실제 삽입 방식을 확인하세요. 넉넉한 페이지의 인라인 SVG, 독립형 SVG, HTML 이미지 요소로 불러온 SVG는 같은 주변 레이아웃을 제공하지 않습니다. 세 상태 캡처는 이미지 요소를 사용하며 수정한 파일 내부에 충분한 캔버스 공간을 둡니다. SVG를 독립적인 이미지로 전달해야 한다면 이 방식을 사용하세요. 의도한 경계 안에 효과를 포함하고 바로 그 파일을 대상에서 다시 여세요.

단독으로는 올바르게 보이지만 카드 안에서 잘린다면 카드의 overflow, 클리핑, 마스킹을 확인하세요. 특정 편집기나 내보내기 도구에서만 실패하면 단순화한 복사본을 비교하고 해당 애플리케이션의 필터 지원을 확인하세요. SVG 외관 변화 가이드는 이 별개의 가져오기 문제를 다룹니다.

기하학적 형태를 유지하고 효과는 별도로 재구성하기

렌더링한 드롭 섀도는 경로에 외관을 추가하며 흐림을 또 다른 편집 가능한 윤곽으로 바꾸지는 않습니다. 원본 기하학적 형태가 있는 SVG 마스터를 보관하세요. 절단 작업에서는 경로 윤곽을 따로 검사하세요. 보이는 그림자는 추가 절단선이 아닙니다.

원본이 PNG나 JPG로만 있다면 효과를 추가하기 전에 PerfectVector로 SVG 기하학적 형태를 복원할 수 있습니다. 그림자가 없는 아트워크를 벡터로 변환하고 편집기에서 윤곽, 틈, 불필요한 배경 도형을 검사하세요. 그곳에서 그림자를 추가하고 위 확인 방법으로 경계를 테스트하세요.

흐림이 이미지에 합쳐지지 않은 원본이 있다면 그것을 사용하세요. 합쳐진 이미지를 추적해도 원래 필터 설정이 복원되지 않으며 디자이너가 깨끗한 실루엣의 끝을 어디로 의도했는지 입증할 수 없습니다. 깔끔한 원본이 없는 단순한 마크는 수동으로 다시 그리는 편이 제어하기 쉬울 수 있습니다. 이미지 벡터화 개요는 추적이 복원하는 것을 설명합니다.

전달할 파일 확인하기

편집기 캔버스만 보지 말고 내보낸 SVG 자체를 여세요. 최종 표시 크기에서 의도한 그림자가 들어맞고 출력에 필요한 경로가 여전히 포함되어 있는지 확인하세요. 주변 클립이나 지원되지 않는 필터 때문에 증상이 다시 나타날 수 있으므로 실제 웹페이지나 대상 앱도 확인하세요.

기본 수정 방법으로 지나치게 큰 필터 영역을 남기지 마세요. 효과에 필요한 범위를 훨씬 넘는 영역은 파일을 이해하기 어렵게 만들며 바깥 클리핑 경계도 해결하지 못합니다. 의도적으로 여백을 설정하고 필터 없는 원본을 보관하며 흐림이나 이동값을 바꾼 뒤 다시 확인하세요.

FAQ

필터 너비를 늘려도 그림자가 잘리는 이유는 무엇인가요? SVG 뷰포트, 부모 컨테이너, 클리핑 경로, 마스크가 다른 경계를 만들 수 있습니다. 필터의 너비와 높이뿐 아니라 x와 y도 확인한 뒤 남은 잘림이 어디에 정렬되는지 살펴보세요.

filterUnits가 흐림 반경을 바꾸나요? filterUnits는 필터 영역의 좌표계를 제어합니다. primitiveUnits는 그림자의 이동 및 흐림 설정을 포함한 필터 프리미티브 내부의 길이 값을 제어합니다. 파일을 진단할 때 둘을 구분하세요.

SVG를 다시 벡터화하면 잘림을 수정할 수 있나요? SVG에 이미 사용 가능한 경로가 있다면 필터 영역이나 뷰포트를 수정하세요. 벡터화는 원본이 래스터 아트워크일 때 앞단에서 필요하며 원래 그림자 매개변수를 복구하지는 않습니다.

Sources

1. MDN: filter 요소 — 필터 요소와 기본 영역 여백을 정의합니다.
2. MDN: filterUnits — 필터 영역의 경계 상자 및 사용자 공간 좌표를 설명합니다.
3. MDN: primitiveUnits — 프리미티브 길이와 바깥 필터 영역을 구분합니다.
4. MDN: viewBox — 사용자 좌표가 보이는 SVG 뷰포트에 매핑되는 방식을 설명합니다.
5. MDN: overflow — 뷰포트 클리핑, 인라인 SVG 기본값, CSS 우선순위를 설명합니다.

래스터 실루엣만으로 시작하나요? PerfectVector로 SVG 경로를 준비하고 먼저 복원한 윤곽을 검사한 뒤 그림자를 추가하고 최종 SVG를 다시 열어 두 경계를 모두 확인하세요.