SVG 필터 효과: 고급 비주얼 효과 만들기
블러, 그림자, 색상 효과 및 복잡한 비주얼 처리를 위한 SVG 필터를 마스터하세요. 필터 프리미티브와 창의적 조합에 대한 완전한 가이드.
Founder of VectoSolve
Self-taught developer, founder and sole developer of VectoSolve since 2024. He builds the conversion engine and the cutting, embroidery and 3D printing exports.
How this article was made: drafted with AI assistance, then edited and fact-checked before publication. About the author
Key Takeaways
- SVG 필터는 블러, 그림자, 왜곡 같은 GPU 가속 비주얼 효과를 브라우저에서 직접 적용합니다
- 필터 프리미티브(feGaussianBlur, feColorMatrix, feTurbulence 등)를 체인으로 연결하여 복잡한 효과를 만들 수 있습니다
- 젖빛 유리, 네온 글로우, 엠보싱 같은 창의적 레시피는 간단한 필터 프리미티브를 조합하여 구축됩니다
- 성능은 크게 다릅니다 — feColorMatrix는 가볍지만 feTurbulence는 계산 비용이 높습니다
- 간단한 효과에는 CSS 필터를 폴백으로 사용하고 SVG 필터는 고급 컴포지션용으로 예약하세요
SVG 필터의 힘
SVG 필터는 래스터 이미지 없이 정교한 비주얼 효과를 가능하게 합니다. 간단한 그림자부터 복잡한 왜곡까지, 필터는 벡터 그래픽을 강력하게 변환합니다.
필터 기초
필터 구조
<defs>
<filter id="myFilter">
<!-- 필터 프리미티브를 여기에 -->
</filter>
</defs>
<rect filter="url(#myFilter)" .../>필터 영역
필터 경계 제어:
<filter id="f" x="-20%" y="-20%" width="140%" height="140%">
<!-- 요소 너머로 필터 영역 확장 -->
</filter>Pro Tip: 블러나 그림자 효과를 사용할 때는 항상 필터 영역을 확장하세요 (예: x="-20%"). 필터 출력이 잘려 보인다면 필터 영역이 너무 작은 것입니다.
일반적인 필터 효과
블러 (feGaussianBlur)
<filter id="blur">
<feGaussianBlur stdDeviation="5"/>
</filter>가변 블러:
<!-- 수평 블러만 -->
<feGaussianBlur stdDeviation="10 0"/>
<!-- 수직 블러만 -->
<feGaussianBlur stdDeviation="0 10"/>드롭 섀도우 (feDropShadow)
간단한 그림자:
<filter id="shadow">
<feDropShadow dx="3" dy="3" stdDeviation="2" flood-opacity="0.5"/>
</filter>커스텀 섀도우
더 많은 제어:
<filter id="custom-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
<feOffset in="blur" dx="4" dy="4" result="offset"/>
<feFlood flood-color="#000" flood-opacity="0.5" result="color"/>
<feComposite in="color" in2="offset" operator="in" result="shadow"/>
<feMerge>
<feMergeNode in="shadow"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual Deal색상 효과
색상 매트릭스 (feColorMatrix)
그레이스케일 변환:
<filter id="grayscale">
<feColorMatrix type="saturate" values="0"/>
</filter>세피아 톤:
<filter id="sepia">
<feColorMatrix type="matrix"
values="0.393 0.769 0.189 0 0
0.349 0.686 0.168 0 0
0.272 0.534 0.131 0 0
0 0 0 1 0"/>
</filter>색조 회전:
<filter id="hue-rotate">
<feColorMatrix type="hueRotate" values="90"/>
</filter>색상 조정
밝기/대비:
<filter id="bright">
<feComponentTransfer>
<feFuncR type="linear" slope="1.5" intercept="0"/>
<feFuncG type="linear" slope="1.5" intercept="0"/>
<feFuncB type="linear" slope="1.5" intercept="0"/>
</feComponentTransfer>
</filter>"SVG 필터는 브라우저의 Photoshop입니다 — 현명하게 레이어링하면 무거운 이미지 편집 소프트웨어가 필요한 효과를 만들 수 있습니다.
변위와 왜곡
터뷸런스
노이즈 생성:
<filter id="turbulence">
<feTurbulence type="turbulence"
baseFrequency="0.05"
numOctaves="2"/>
</filter>변위 맵
패턴으로 왜곡:
<filter id="displace">
<feTurbulence type="turbulence"
baseFrequency="0.02"
numOctaves="3"
result="noise"/>
<feDisplacementMap in="SourceGraphic"
in2="noise"
scale="30"
xChannelSelector="R"
yChannelSelector="G"/>
</filter>조명 효과
디퓨즈 라이팅
3D 스타일 조명:
<filter id="diffuse">
<feDiffuseLighting lighting-color="#white" surfaceScale="5">
<fePointLight x="100" y="100" z="200"/>
</feDiffuseLighting>
</filter>스페큘러 라이팅
광택 하이라이트:
<filter id="specular">
<feSpecularLighting specularConstant="1"
specularExponent="30"
lighting-color="white"
surfaceScale="5">
<fePointLight x="150" y="60" z="200"/>
</feSpecularLighting>
</filter>Free SVG Tools for Crafters
Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG
Check Your SVG Free필터 결합
병합 작업
결과 레이어링:
<filter id="glow">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>컴포지트 작업
연산자로 결합:
<filter id="cutout">
<feImage href="mask.svg" result="mask"/>
<feComposite in="SourceGraphic"
in2="mask"
operator="in"/>
</filter>창의적 레시피
젖빛 유리
<filter id="frosted">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
<feColorMatrix in="blur" type="saturate" values="1.5" result="saturate"/>
<feTurbulence type="fractalNoise" baseFrequency="0.1" result="noise"/>
<feDisplacementMap in="saturate" in2="noise" scale="5"/>
</filter>네온 글로우
<filter id="neon">
<feFlood flood-color="#ff00ff" result="flood"/>
<feComposite in="flood" in2="SourceGraphic" operator="in" result="mask"/>
<feGaussianBlur in="mask" stdDeviation="5" result="blur"/>
<feMerge>
<feMergeNode in="blur"/>
<feMergeNode in="blur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>엠보스 효과
<filter id="emboss">
<feConvolveMatrix
order="3"
kernelMatrix="-2 -1 0
-1 1 1
0 1 2"/>
</filter>
필터를 이용한 애니메이션
애니메이션 블러
<filter id="animated-blur">
<feGaussianBlur stdDeviation="0">
<animate attributeName="stdDeviation"
values="0;10;0"
dur="2s"
repeatCount="indefinite"/>
</feGaussianBlur>
</filter>동적 터뷸런스
<feTurbulence baseFrequency="0.02">
<animate attributeName="baseFrequency"
values="0.01;0.05;0.01"
dur="5s"
repeatCount="indefinite"/>
</feTurbulence>A Full Year of Conversions for $49
Starter Annual: 25 conversions every month, $49 for the whole year. That is about $4.08 a month · Cancel anytime
Get the Annual Deal성능 고려사항
성능 영향
필터 성능:
feGaussianBlur: 무거움 (반경에 따라 다름)
feColorMatrix: 가벼움
feTurbulence: 매우 무거움
feDisplacementMap: 무거움
체인 필터: 누적최적화 팁
- 필터 영역 최소화
- 블러 반경 줄이기
- 체인 효과 제한
- 정적 필터 캐시
- 가능하면 CSS 필터 사용
블러, 그레이스케일, 드롭 섀도우 같은 간단한 효과의 경우 CSS filter가 하드웨어 가속 합성을 활용하기 때문에 SVG 필터보다 훨씬 빠릅니다. CSS가 재현할 수 없는 효과에 SVG 필터를 예약하세요.
CSS 필터 대안
가능하면 CSS를 사용:
.blurred {
filter: blur(5px);
}
.grayscale {
filter: grayscale(100%);
}브라우저 호환성
지원 현황
광범위한 지원:
- feGaussianBlur
- feColorMatrix
- feOffset
- feMerge
가변적 지원:
- feDisplacementMap
- feTurbulence
- feDiffuseLighting폴백 전략
.element {
/* 폴백 */
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
@supports (filter: url(#shadow)) {
.element {
box-shadow: none;
filter: url(#shadow);
}
}결론
SVG 필터는 CSS만으로는 불가능한 정교한 효과를 가능하게 합니다. 계산 집약적이지만 비주얼 처리에 대한 정밀한 제어를 제공합니다. 임팩트 있는 효과에 현명하게 사용하고, 항상 성능을 고려하며 폴백을 제공하세요.
| 필터 프리미티브 | 효과 | 성능 비용 |
|---|---|---|
| feGaussianBlur | 소프트 블러 / 젖빛 유리 | 중간 (GPU 가속) |
| feColorMatrix | 색상 시프트, 채도 감소 | 낮음 |
| feTurbulence | 노이즈, 유기적 텍스처 | 높음 (픽셀 수준 계산) |
| feDisplacementMap | 왜곡, 물결 효과 | 높음 |
| feDropShadow | 드롭 섀도우 | 낮음–중간 |
Free SVG Tools for Crafters
Design Checker · Color Separator · Mat Preview · Offset Generator · Text to SVG
Check Your SVG Free출처 및 추가 읽기
- MDN Web Docs: SVG 필터 효과 — 모든 SVG 필터 프리미티브와 속성에 대한 상세 레퍼런스
- W3C SVG 2: 필터 효과 — SVG 필터 파이프라인과 합성 모델의 공식 사양
- CSS-Tricks: SVG 필터 — 창의적인 SVG 필터 조합을 위한 시각적 예제와 레시피
- Smashing Magazine: SVG 필터 — 프로덕션 비주얼 효과를 위한 필터 프리미티브 체이닝 고급 튜토리얼