> For the complete documentation index, see [llms.txt](https://a11y.gitbook.io/graphics-aria/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://a11y.gitbook.io/graphics-aria/svg-graphics/svg-filters.md).

# SVG 필터

### 필터 정의 & 매핑

SVG 그래픽에 적용 가능한 필터를 사용자가 직접 작성할 수 있습니다. `<defs>` 요소 내부에 `<filter>`를 정의한 후, 필터를 적용할 요소에 `filter` 속성 값에 필터를 참조하여 사용하면 됩니다. 간단한 GaussianBlur 필터를 정의한 후 \
사용하는 코드를 살펴보세요.

```markup
<svg>

  <defs>
    <filter id="blurFilter">

      <feGaussianBlur in="sourceGraphic" stdDeviation="4" />
    </filter>
  
</defs>
  
  <text
    fill="url(#text-pattern)"
  
    mask="url(#text-mask)"
    filter="url(#blurFilter)">SVG</text>
  
</svg>
```

![GaussianBlur 필터가 반영된 패턴 마스크 SVG 텍스트](https://3785165936-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDssGNTFE1WzKvtC6X0%2F-LETKCHWDc6OPtcZyTEB%2F-LETKZu9IYrS0RbO2-1B%2Fimage.png?alt=media\&token=d8f54896-d075-4d1f-9f14-42d7925333a0)

### 커스텀 SVG 필터 세트

[FILDROP](http://jorgeatgu.github.io/svg-filters/)은 스페인 국적의 프론트엔드 개발자 이자, 디자이너인 [Jorge Aznar](http://jorgeatgu.com/)가 개발한 커스텀 SVG 필터 모음을 제공합니다. 사진을 드래그 앤 드롭한 후, 제공되는 필터 효과를 확인할 수 있고, 생성된 SVG 필터 코드를 복사할 수도 있습니다.

![](https://3785165936-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDssGNTFE1WzKvtC6X0%2F-LETKCHWDc6OPtcZyTEB%2F-LETMaavuoZkjj9ykWgl%2Fimage.png?alt=media\&token=08ee72ff-f5e6-4dc3-9415-1048615a16df)

### 참고

{% embed url="<https://www.creativebloq.com/netmag/how-go-beyond-basics-svg-filters-71412280>" %}
SVG 필터를 작성하는 기본 튜토리얼 입니다.
{% endembed %}

{% embed url="<https://www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/>" %}
SVG 필터가 왜 놀라운지에 대해 기술하는 아티클 입니다.
{% endembed %}

{% embed url="<https://css-tricks.com/gooey-effect/>" %}
Gooey 이펙트에 대해 기술한 아티클 입니다.
{% endembed %}