svg filter에 대한 이해

<svg>
  <defs>
	<filter>
  		<feGaussianBlur in="어디에 적용할 것인지" stdDeviation="블러의 양" result="다른 필터 속성에서 불려질 이름" />
	</filter>
  </defs>
</svg>

필터는 defs 태그안에 정의해서 사용하는데 filter태그를 만들어 주고 그 안에 fe로 시작되는 적용하고자 하는 필터의 이름을 적어준다.

feSpotLight, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDropShadow, feFlood, feGaussianBlur, feImage, feMerge, feMorphology, feOffset, feSpecularLighting, feTile, feTurbulence

<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />

위의 예시는 가우시안블러 효과를 적용하고 그것을 적용할 대상(in)은 원본(SourceGraphic)이고, 블러의 양(stdDeviation)은 10이고 효과를 적용한 결과(result)에 'blue'라는 이름을 정해준 것이다. 결과에 이름을 정해주는게 의아할 수 있는데 이건 다른 필터를 또 주기 위해 사용한다.

<feOffset in="SourceGraphic" dy="5" result="offset" />
<feGaussianBlur in="offset" stdDeviation="3" result="blur" />

위는 그래픽 소스를 y축으로 5만큼 내려준 다음 그 결과에 블러를 3만큼 지정해준 것이다. 필터를 중첩해서 사용하려면 이름이 반드시 필요하다는 것이 느껴질 것이다.

in은 필터 효과를 어디에 적용할 것이지에 대한 것인데 들어갈 수 있는 primitive는 다음과 같다.

• SourceGraphic —represents the original graphic that references the filter
• SourceAlpha —represents the alpha channel only of the original graphic that references the filter
• BackgroundImage —represents an image snapshot of the canvas under the filter region at the time that the filter element was invoked
• BackgroundAlpha —represents the alpha channel of an image snapshot of the canvas under the filter region at the time that the filter element was invoked
• FillPaint —represents the value of the fill property on the target element for the filter effect and it’s conceptually infinite
• StrokePaint —represents the value of the stroke property on the target element for the filter effect and it’s also conceptually infinite
• filter-primitive-reference —the name given to the output of a previous filter primitive in the same filter

https://vanseodesign.com/web-design/svg-filter-primitives-input-output/