디자인 아틀라스
EN
✦ 시각 효과

SVG 라이팅 필터

SVG lighting filters

알파 채널을 높낮이 지도로 삼아 가상의 빛을 비추는 필터. feDiffuseLighting 은 무광 음영, feSpecularLighting 은 광택 하이라이트를 만들어 엠보싱 효과를 냅니다.

다른 이름: feDiffuseLightingfeSpecularLightingEmboss filter
···
html
<svg width="0" height="0"><filter id="emboss" x="-30%" y="-30%" width="160%" height="160%">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="b"/>
  <feSpecularLighting in="b" surfaceScale="6" specularConstant="1.1" specularExponent="16" lighting-color="#ffffff" result="s">
    <fePointLight id="light" x="60" y="40" z="60"/>
  </feSpecularLighting>
  <feComposite in="s" in2="SourceAlpha" operator="in" result="sc"/>
  <feComposite in="SourceGraphic" in2="sc" operator="arithmetic" k1="0" k2="1" k3="1.4" k4="0" result="lit"/>
</filter></svg>
<div class="panel"><h1 class="emb">EMBOSS</h1></div>
<div class="label">feSpecularLighting + fePointLight</div>
css
.panel{position:relative;width:min(80%,320px);height:120px;border-radius:16px;background:#23232e;
  display:grid;place-items:center;overflow:hidden}
.emb{margin:0;color:#4b4b5a;font:800 32px/1 sans-serif;letter-spacing:.04em;filter:url(#emboss)}
.label{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);padding:4px 10px;border-radius:999px;
  background:rgba(0,0,0,.55);color:#fff;font:600 12px/1.4 monospace}
js
const light = document.getElementById('light');
let t = 0;
function loop(){
  t += 0.02;
  light.setAttribute('x', (160 + Math.cos(t) * 140).toFixed(0));
  light.setAttribute('y', (60 + Math.sin(t) * 40).toFixed(0));
  requestAnimationFrame(loop);
}
loop();

먼저 feGaussianBlur 로 원본의 알파(글자·도형의 실루엣)를 살짝 흐려 "높낮이 지도"를 만듭니다. 이걸 feSpecularLighting/feDiffuseLighting 에 넣으면, surfaceScale 만큼 도드라진 언덕으로 취급해 fePointLight·feDistantLight·feSpotLight 로 지정한 빛을 비춥니다. 마지막으로 feComposite 로 원본과 다시 합성해서 "표면에 빛이 닿아 도드라진" 룩을 만듭니다.

feDiffuseLighting 은 램버트 반사(어느 각도에서 봐도 밝기가 같은 무광 음영)를, feSpecularLighting 은 시점·광원 각도가 맞는 곳에서만 반짝이는 하이라이트를 냅니다. 실제 엠보싱은 보통 이 둘을 겹쳐 씁니다.

fePointLight 의 x·y·z 를 애니메이션으로 움직이면 조명이 표면을 훑고 지나가듯 보여 입체감이 훨씬 살아납니다. 다만 이 체인은 SVG 필터 중에서도 가장 무겁습니다 — 흐림·라이팅·합성을 픽셀마다 여러 번 거치기 때문에, 크거나 자주 리사이즈되는 영역에는 쓰지 않는 게 좋습니다. Safari 는 특히 fePointLight 의 z(높이) 렌더링이 다른 브라우저와 미묘하게 다를 수 있어 점진적 향상으로 다루는 게 안전합니다.

언제 쓰나

로고·워드마크 하나에 금속·엠보싱 질감을 줄 때. 본문 전체나 자주 리사이즈되는 레이아웃에는 쓰지 마세요.