SVG 필터

필터 정의 & 매핑

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

<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 텍스트

커스텀 SVG 필터 세트

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

참고

How to go beyond the basics with SVG filtersCreative Bloq

SVG 필터를 작성하는 기본 튜토리얼 입니다.

The Art Of SVG Filters And Why It Is Awesome — Smashing MagazineSmashing Magazine

SVG 필터가 왜 놀라운지에 대해 기술하는 아티클 입니다.

The Gooey Effect | CSS-TricksCSS-Tricks

Gooey 이펙트에 대해 기술한 아티클 입니다.