> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.

# SVG 조명 필터: 구멍을 유지하면서 엠블럼에 음영 넣기

> 속이 빈 엠블럼의 알파로 SVG 확산·정반사 조명을 만드세요. 실루엣 안에 효과를 한정하고 별도의 평면 벡터 원본을 보관합니다.

Source: https://perfectvector.com/ko/blog/svg-lighting-relief

Language: ko
Author: Irene Kim
Published: 2026-10-02T08:00:00+09:00
Updated: 2026-10-02T08:00:00+09:00

양각처럼 보이는 SVG 로고를 만들려면 `SourceAlpha`를 부드럽게 처리하고 그 알파를 `feDiffuseLighting` 또는 `feSpecularLighting`에 넣은 뒤, 빛을 원본 색과 합성하고 마지막에 원래 `SourceAlpha`를 기준으로 `in` 합성을 적용하세요. 마지막 단계가 효과를 엠블럼 안에 한정하고 구멍을 유지합니다. 필터 없는 경로 사본을 평면 원본으로 저장하세요.

이 효과는 렌더링된 외관을 바꿉니다. 돌출된 입체, 새로운 윤곽, 제조용 파일을 만들지는 않습니다. 이 안내는 SVG로 직접 작성한 원본 마름모 고리 엠블럼 하나로 조명 단계와 각 알파를 비교합니다.

## 알파를 조명 표면으로 사용하기

`feDiffuseLighting`은 입력 알파를 범프 맵으로 사용하고 불투명한 조명 맵을 만듭니다. 외관은 빛과 입력 표면에 따라 달라집니다. [MDN 확산 조명 참고 문서](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDiffuseLighting)는 이 동작을 설명합니다. 이 예제에서는 고리의 불투명한 부분이 높은 영역이고 구멍이 낮은 영역입니다.

원래 색이 있는 경로는 `SourceGraphic`으로 남겨 두고 `SourceAlpha`만 흐리게 처리합니다. 부드러운 알파는 안쪽과 바깥쪽 가장자리에서 조명 계산에 점진적인 변화를 제공합니다. [`feGaussianBlur`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feGaussianBlur)는 `stdDeviation`으로 이 부드러움을 제어합니다. 시작 예제는 사용자 좌표계를 명시한 필터에서 `2.5`를 사용합니다.

합성 전 확산 맵은 원래 경로가 투명했던 곳을 포함해 필터 영역 전체를 칠합니다. 조명 계산을 살펴보기에는 유용하지만 속이 빈 이 엠블럼의 최종 실루엣으로는 맞지 않습니다. 마지막에 범위를 제한할 수 있도록 원래 알파를 유지하세요.

## 음영이 있는 완전한 엠블럼 시작 예제 복사하기

다음을 `emblem-lighting.svg`로 저장하고 브라우저에서 여세요. 복합 경로 하나가 있으며 외부 이미지에 의존하지 않습니다.

```svg
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <filter id="relief" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse" x="0" y="0" width="200" height="200" color-interpolation-filters="linearRGB">
      <feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="bump"/>
      <feDiffuseLighting in="bump" surfaceScale="4" diffuseConstant="1" lighting-color="#ffffff" result="diffuse">
      <feDistantLight azimuth="225" elevation="45"/>
      </feDiffuseLighting>
      <feComposite in="SourceGraphic" in2="diffuse" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" result="lit"/>
      <feSpecularLighting in="bump" surfaceScale="4" specularConstant=".7" specularExponent="18" lighting-color="#ffffff" result="shine">
      <feDistantLight azimuth="225" elevation="45"/>
      </feSpecularLighting>
      <feComposite in="lit" in2="shine" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="paint"/>
      <feComposite in="paint" in2="SourceAlpha" operator="in"/>
    </filter>
  </defs>
  <path d="M100 20 L180 100 L100 180 L20 100 Z M100 58 L142 100 L100 142 L58 100 Z" fill="#dc795f" fill-rule="evenodd" filter="url(#relief)"/>
</svg>
```

필터는 각 중간 결과에 이름을 붙여 역할을 확인할 수 있게 합니다.

| 단계    | 입력과 결과                        | 목적             |
| ----- | ----------------------------- | -------------- |
| 흐림    | SourceAlpha → bump            | 높이 변화를 부드럽게 처리 |
| 확산    | bump → diffuse                | 넓게 퍼지는 조명 계산   |
| 곱하기   | SourceGraphic × diffuse → lit | 원본 색에 음영 적용    |
| 정반사   | bump → shine                  | 반사 성분 계산       |
| 더하기   | lit + shine → paint           | 음영과 밝은 부분 결합   |
| 범위 제한 | paint in SourceAlpha          | 원래 실루엣과 구멍 복원  |

산술 곱하기는 `k1="1"`을 사용하고 다른 계수는 0입니다. 더하기는 `k2="1" k3="1"`을 사용하고 나머지는 0입니다. [`feComposite`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite)는 이러한 픽셀 연산과 `in` 연산자를 정의합니다. 원래 경계를 원한다면 최종 합성의 두 번째 입력을 흐려진 `bump` 대신 `SourceAlpha`로 유지하세요.

필터는 SVG 필터 연산의 기본값인 `color-interpolation-filters="linearRGB"`를 명시적으로 사용합니다. 이는 일반 채색 보간과 별개입니다. [MDN color-interpolation-filters 참고 문서](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters)는 이 차이를 설명합니다. 여기서 측정한 모든 조명 변형은 같은 설정을 사용합니다.

## 확산 음영과 정반사 광택 비교하기

확산 조명은 조명 맵에 따라 원래 색을 어둡거나 밝게 만듭니다. 정반사 단계는 반사 성분을 더합니다. [`feSpecularLighting`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feSpecularLighting)은 빛에 따라 달라지는 출력과 매개변수를 설명합니다. 시작 예제는 절제된 상수 `.7`과 지수 `18`을 사용합니다. 쓸 만한 확산 효과를 만든 뒤 조정하세요.

확산만 확인하려면 흐림, 확산, 곱하기 단계를 유지하고 최종 합성의 첫 입력을 `paint`에서 `lit`으로 바꾸세요. 정반사와 더하기 단계는 제거합니다.

평면 색 위의 정반사만 확인하려면 흐림과 정반사 단계를 유지하세요. 더하기의 첫 입력을 `lit`에서 `SourceGraphic`으로 바꾸고 확산과 곱하기 단계를 제거한 다음, 마지막 `paint in SourceAlpha` 합성은 유지합니다. 두 비교 모두 같은 원래 경로와 빛의 방향을 유지합니다.

이 원거리 조명은 `azimuth="225" elevation="45"`를 사용합니다. [`feDistantLight`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDistantLight)는 두 조명 프리미티브에서 모두 쓸 수 있는 광원 요소입니다. 각도는 도 단위이며 픽셀 위치가 아닙니다. 결합한 효과를 비교할 때는 두 조명 단계의 방향을 함께 바꾸세요.

## 직접 만든 브라우저 대조군의 결과

직접 작성한 SVG 시험 파일 여섯 개를 Chrome에서 `80 × 80` 및 `160 × 160` CSS 픽셀로 열었습니다. 평면 원본, 확산, 정반사, 결합 효과는 서로 뚜렷이 구분됐습니다. 이 시험 파일에서는 확산 `surfaceScale`이 커지자 가장자리 대비가 강해졌습니다. 합성 전 확산 대조군은 투명한 실루엣 대신 구멍이 채워진 회색 사각형으로 보였습니다.

별도의 픽셀 읽기에는 `200 × 200` 원본 캔버스 크기를 사용했습니다. 띠 표본은 `(100, 38)`, 가장자리 표본은 `(101, 22)`, 구멍은 `(100, 100)`, 바깥 표본은 `(10, 10)`이었습니다.

| 시험 파일                         | 띠 RGB         | 가장자리 RGB      | 구멍 / 바깥 알파 |
| ----------------------------- | ------------- | ------------- | ---------- |
| 평면 원본                         | 220, 121, 95  | 220, 121, 95  | 0 / 0      |
| 합성 전 확산 조명 맵, 스케일 4           | 219, 219, 219 | 214, 214, 214 | 255 / 255  |
| 범위를 제한한 확산 색, 스케일 4           | 189, 102, 81  | 185, 101, 79  | 0 / 0      |
| 범위를 제한한 확산 색, 스케일 12          | 189, 102, 81  | 155, 83, 64   | 0 / 0      |
| 평면 색 위에 정반사 적용 후 범위 제한, 스케일 4 | 242, 162, 145 | 221, 122, 96  | 0 / 0      |
| 범위를 제한한 결합 효과, 스케일 4          | 214, 149, 137 | 185, 102, 81  | 0 / 0      |

모든 파일은 같은 `d` 값, 경로 하나, 이미지 요소 0개를 유지했습니다. 화면 효과는 추가 원본 도형을 만들지 않았습니다. 이는 이 브라우저와 원본에서의 관찰이며 다른 렌더러나 편집기의 가져오기 동작을 보장하지는 않습니다.

**조명과 평면 원본**

![같은 속 빈 마름모 엠블럼에 평면 채색, 넓은 음영, 집중된 밝은 부분을 적용한 모습을 보여 주는 개념 삽화.](https://perfectvector.com/blog/svg-lighting-relief/lighting-and-master.webp)

*삽화: 구멍을 선명하게 유지하면서 같은 윤곽에 확산 음영과 정반사 광택을 적용할 수 있습니다. 브라우저 시험 파일, 트레이싱 결과, 물리적인 양각이 아닙니다.*

## 윤곽을 바꾸기 전에 높이 필드 조정하기

[`surfaceScale`](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/surfaceScale)은 조명 계산에 쓰는 표면 높이 스케일을 설정합니다. 경로를 확장하지는 않습니다. 확산 `4`와 `12` 대조군에서는 이 값만 바꿨습니다. 표본으로 읽은 평평한 띠는 같은 색을 유지했지만 가장자리 표본은 `12`에서 더 어두워졌습니다.

다음처럼 조건을 통제해 순서대로 진행하세요.

1. 필터 없이 원래 투명한 실루엣과 구멍을 확인합니다.
2. 알파를 부드럽게 하는 정도와 빛의 방향을 선택합니다.
3. 다른 모든 조건을 고정하고 작은 `surfaceScale`과 큰 값을 비교합니다.
4. 정반사 광택을 더한 뒤 마지막 연산으로 원래 알파를 사용해 채색 범위를 제한합니다.
5. 실제 표시 크기와 대비되는 배경에서 전달할 그림을 확인합니다.

현재 [Filter Effects 규격](https://www.w3.org/TR/filter-effects-1/#feDiffuseLightingElement)은 확산 출력의 알파를 모든 곳에서 1로, 정반사 출력 알파는 색상 성분에서 정하도록 정의합니다. 어느 출력도 원래 구멍을 유지한다고 가정해서는 안 됩니다. 또한 이웃 알파 표본으로 법선을 계산하는 방식을 정의합니다. 이 시작 예제는 `kernelUnitLength`를 설정하지 않습니다. 두 크기에서 확인했다는 사실만으로 크기와 무관한 조명 표본 추출을 입증하지는 못합니다.

조명 단계의 중간 버퍼가 최종 결과로 보인다면 이름 붙인 입력과 마지막 프리미티브를 확인하세요. 이 고리에서 확산 조명 맵을 직접 반환해 불투명한 회색 사각형을 재현했습니다. 앞선 곱하기에서 이미 투명도가 유지되는 것처럼 보여도 마지막 `in SourceAlpha` 단계는 의도적으로 넣은 것입니다.

흐림이나 효과가 예상치 않은 사각형에서 잘린다면 [SVG 클리핑 가이드](https://perfectvector.com/ko/blog/svg-shadow-clipped)로 필터 영역을 확인하세요. 그 영역은 마지막 원본 알파 범위 제한과 구분합니다. 하나는 효과의 작업 영역을 정하고, 다른 하나는 의도한 실루엣을 복원합니다.

## 화면용 효과와 평면 원본 함께 전달하기

평면 원본을 확인하려면 경로의 filter 속성을 제거하세요. 같은 바깥 윤곽, 안쪽 구멍, 단색 산호색 채우기가 유지됩니다. 이후 편집을 원래 도형에서 시작할 수 있도록 음영이 있는 웹 버전과 함께 이 사본을 보관하세요.

물리적인 마감에는 [엠보싱용 벡터 그림](https://perfectvector.com/ko/blog/vector-artwork-for-embossing) 같은 별도 준비 과정을 사용합니다. 화면 조명 프리셋은 외관을 제공할 뿐 금형 도형이나 측정된 양각 깊이를 제공하지는 않습니다. [SVG 형태학 윤곽 가이드](https://perfectvector.com/ko/blog/svg-femorphology-outline)는 또 다른 필터 기반 경계 처리를 재구성된 경로로 취급하지 않고 설명합니다.

로고가 PNG나 JPG로만 있다면 [PerfectVector로 로고를 벡터화](https://perfectvector.com/ko/vectorize-logo)하고 복원한 바깥 윤곽과 구멍을 점검한 다음, 깔끔한 평면 원본을 보관한 뒤 SVG 작업 과정에서 조명을 추가하세요. 서비스는 벡터 도형을 복원하며, 이 확산·정반사 파이프라인은 별도로 작성하는 표시 효과입니다. 이미 벡터 원본이 있다면 필터를 직접 적용하고 검토하세요.

## 자주 묻는 질문

**SVG 조명 필터로 로고를 양각처럼 보이게 할 수 있나요?**
알파 기반 높이 필드에서 음영과 밝은 부분을 시뮬레이션할 수 있습니다. 렌더링 효과가 물리적인 양각, 추가 윤곽 경로, 제작용 금형 파일을 만들지는 않습니다.

**SVG 조명 효과가 투명한 구멍을 채우는 이유는 무엇인가요?**
합성 전 확산 조명 맵은 필터 영역 전체에서 불투명합니다. 빛을 원본 색과 결합한 뒤 원래 SourceAlpha를 기준으로 in 합성을 마지막에 적용해 효과를 원래 실루엣에 한정하세요.

**SVG 확산 조명과 정반사 조명의 차이는 무엇인가요?**
확산 조명은 원본 색에 음영을 적용할 넓은 조명을 제공합니다. 정반사 조명은 광택으로 더할 반사 성분을 제공합니다. 둘 다 입력 알파를 범프 맵으로 사용하며 선택한 빛과 표면 설정에 따라 달라집니다.

**surfaceScale은 로고의 경로를 바꾸나요?**
아닙니다. 조명 계산에 사용하는 높이 스케일을 바꿉니다. 두 확산 대조군에서는 경로 데이터가 같은 상태에서 렌더링된 가장자리 대비만 바뀌었습니다.

## 출처

1. [MDN feDiffuseLighting](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDiffuseLighting) — 알파 범프 맵 입력과 불투명한 확산 조명 출력입니다.
2. [MDN feGaussianBlur](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feGaussianBlur) — 부드럽게 처리한 입력과 필터 영역 고려 사항입니다.
3. [MDN feComposite](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feComposite) — 산술 곱하기·더하기와 원본 알파를 이용한 범위 제한입니다.
4. [MDN color-interpolation-filters](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/color-interpolation-filters) — 필터 연산의 기본값인 linearRGB입니다.
5. [MDN feSpecularLighting](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feSpecularLighting) — 반사 성분과 해당 컨트롤입니다.
6. [MDN feDistantLight](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/feDistantLight) — 두 조명 프리미티브에 사용하는 광원입니다.
7. [MDN surfaceScale](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/surfaceScale) — 계산에 사용하는 표면 높이 스케일입니다.
8. [Filter Effects 조명 규격](https://www.w3.org/TR/filter-effects-1/#feDiffuseLightingElement) — 조명 알파, 각도 단위, 이웃 표본 계산입니다.

## Explore

- [Read the HTML article](https://perfectvector.com/ko/blog/svg-lighting-relief)
- [SVG 변위 맵으로 로고 미리보기 왜곡하기](https://perfectvector.com/ko/blog/svg-fedisplacementmap-artwork.md)
- [SVG 스트로크 정렬: 외곽선을 안쪽이나 바깥쪽에 배치하기](https://perfectvector.com/ko/blog/svg-stroke-alignment.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)