SVG 필터
SVG 필터 – <filter>
SVG 필터는 SVG 그래픽에 특수 효과를 추가하기 위해 사용한다.
모든 SVG 필터는 <defs> 요소 안에 정의된다. <defs> 요소는 “definitions”의 약자로, 특별한 요소 (필터 등)의 정의를 포함한다.
<filter> 요소는 SVG 필터를 정의하기 위해 사용한다. <filter> 요소는 필터를 식별하는 필수 id 속성을 가진다. 그런 다음 그래픽/이미지는 사용할 필터를 가리킨다.
이후, <filter> 요소 안에 그래픽에 적용할 하나 이상의 필터 효과를 넣는다 (아래 표에서 필터 효과 요소 목록을 볼 수 있다).
예제
여기서는 <feGaussianBlur> 필터를 사용하여 SVG 그래픽을 흐리게 만든다.
<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>
</defs>
<rect width="90" height="90" fill="red" filter="url(#f1)" />
</svg>SVG 필터 효과 요소
SVG에서 사용 가능한 필터들은 다음과 같다.
| 이름 | 설명 |
|---|---|
| <feBlend> | 특정 혼합 모드로 두 그래픽을 결합한다. |
| <feColorMatrix> | 변환 매트릭스에 기반하여 색상을 변경한다. |
| <feComponentTransfer> | 각 픽셀에 대해 구성 요소별로 데이터를 다시 매핑한다. 밝기, 대비, 색상 균형 등을 조정할 수 있다. |
| <feComposite> | 합성 연산을 사용하여 이미지 공간에서 두 입력 이미지의 픽셀별 조합을 수행한다. |
| <feConvolveMatrix> | 매트릭스 컨볼루션 필터 효과를 적용한다 (흐림, 가장자리 감지, 선명도, 엠보싱 및 베벨링 포함). |
| <feDiffuseLighting> | 알파 채널을 범프 맵으로 사용하여 그래픽에 조명을 적용한다. |
| <feDisplacementMap> | in2 속성의 그래픽에서 픽셀 값을 사용하여 in 속성의 이미지를 변위시킨다. |
| <feDistantLight> | 조명 필터 프리미티브인 <feDiffuseLighting> 또는 <feSpecularLighting> 내에서 사용할 원거리 광원을 지정한다. |
| <feDropShadow> | 그래픽의 드롭 섀도우를 생성한다. |
| <feFlood> | flood-color 및 flood-opacity 속성으로 정의된 색상과 불투명도로 필터 하위 영역을 채운다. |
| <feGaussianBlur> | 그래픽을 흐리게 만든다. |
| <feImage> | 외부 소스에서 그래픽 데이터를 가져와 픽셀 데이터를 출력으로 제공한다. |
| <feMerge> | 입력 그래픽 레이어를 혼합한다 (필터 효과를 순차적으로가 아닌 동시에 적용). |
| <feMergeNode> | 다른 필터의 결과를 가져와 부모 <feMerge>에 의해 처리되도록 한다. |
| <feMorphology> | 그래픽을 침식하거나 확장한다 (두껍게 또는 얇게 만드는 효과). |
| <feOffset> | 입력 그래픽을 오프셋한다. |
| <fePointLight> | 점 광원 효과를 생성할 수 있는 광원을 지정한다. |
| <feSpecularLighting> | 알파 채널을 범프 맵으로 사용하여 소스 그래픽에 조명을 적용한다. |
| <feSpotLight> | 스포트라이트 효과를 생성할 수 있는 광원을 지정한다. |
| <feTile> | 입력 그래픽의 반복 패턴으로 대상 사각형을 채운다. |
| <feTurbulence> | Perlin 난류 함수로 그래픽을 생성한다. |
참고
W3C School - SVG Filters Introduction
