HTML 그래픽 – 블러 효과

SVG 가우시안 흐림 효과

SVG <feGaussianBlur>

<feGaussianBlur> 필터는 흐림 효과를 생성하는 데 사용된다.

예제

다음은 SVG 그래픽에 흐림 효과를 적용하는 예제이다.

<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">

  <defs>

    <filter id="f1" x="0" y="0" xmlns="http://www.w3.org/2000/svg">

      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />

    </filter>

  </defs>

  <rect width="90" height="90" fill="yellow" filter="url(#f1)" />

</svg>

코드 설명

• <filter> 요소의 id 속성은 필터의 고유 식별자를 정의한다.
• 흐림 효과는 <feGaussianBlur> 요소로 구현된다.
• in=”SourceGraphic”은 전체 요소에 효과가 적용됨을 의미한다.
• stdDeviation 속성은 흐림 강도를 조절한다.
• <rect>의 filter 속성은 “f1” 필터를 참조한다.

SVG <feGaussianBlur> – stdDeviation 속성

stdDeviation 속성은 흐림 정도를 결정한다. 값이 높을수록 더 강한 흐림 효과가 적용된다.

예제

stdDeviation 값을 55로 설정한 고강도 흐림 효과 예제이다.

<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">

  <defs>

    <filter id="f2" x="0" y="0" xmlns="http://www.w3.org/2000/svg">

      <feGaussianBlur in="SourceGraphic" stdDeviation="55" />

    </filter>

  </defs>

  <rect width="90" height="90" fill="yellow" filter="url(#f2)" />

</svg>