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

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

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

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

feDiffuseLighting은 입력 알파를 범프 맵으로 사용하고 불투명한 조명 맵을 만듭니다. 외관은 빛과 입력 표면에 따라 달라집니다. MDN 확산 조명 참고 문서는 이 동작을 설명합니다. 이 예제에서는 고리의 불투명한 부분이 높은 영역이고 구멍이 낮은 영역입니다.

원래 색이 있는 경로는 SourceGraphic으로 남겨 두고 SourceAlpha만 흐리게 처리합니다. 부드러운 알파는 안쪽과 바깥쪽 가장자리에서 조명 계산에 점진적인 변화를 제공합니다. feGaussianBlur는 stdDeviation으로 이 부드러움을 제어합니다. 시작 예제는 사용자 좌표계를 명시한 필터에서 2.5를 사용합니다.

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

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

다음을 emblem-lighting.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>

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

산술 곱하기는 k1="1"을 사용하고 다른 계수는 0입니다. 더하기는 k2="1" k3="1"을 사용하고 나머지는 0입니다. feComposite는 이러한 픽셀 연산과 in 연산자를 정의합니다. 원래 경계를 원한다면 최종 합성의 두 번째 입력을 흐려진 bump 대신 SourceAlpha로 유지하세요.

필터는 SVG 필터 연산의 기본값인 color-interpolation-filters="linearRGB"를 명시적으로 사용합니다. 이는 일반 채색 보간과 별개입니다. MDN color-interpolation-filters 참고 문서는 이 차이를 설명합니다. 여기서 측정한 모든 조명 변형은 같은 설정을 사용합니다.

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

확산 조명은 조명 맵에 따라 원래 색을 어둡거나 밝게 만듭니다. 정반사 단계는 반사 성분을 더합니다. feSpecularLighting은 빛에 따라 달라지는 출력과 매개변수를 설명합니다. 시작 예제는 절제된 상수 .7과 지수 18을 사용합니다. 쓸 만한 확산 효과를 만든 뒤 조정하세요.

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

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

이 원거리 조명은 azimuth="225" elevation="45"를 사용합니다. feDistantLight는 두 조명 프리미티브에서 모두 쓸 수 있는 광원 요소입니다. 각도는 도 단위이며 픽셀 위치가 아닙니다. 결합한 효과를 비교할 때는 두 조명 단계의 방향을 함께 바꾸세요.

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

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

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

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

조명과 평면 원본

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

surfaceScale은 조명 계산에 쓰는 표면 높이 스케일을 설정합니다. 경로를 확장하지는 않습니다. 확산 4와 12 대조군에서는 이 값만 바꿨습니다. 표본으로 읽은 평평한 띠는 같은 색을 유지했지만 가장자리 표본은 12에서 더 어두워졌습니다.

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

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

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

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

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

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

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

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

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

자주 묻는 질문

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

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

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

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

출처

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