SVG (Scalable Vector Graphics)의 filter 요소는 그래픽 요소에 그림자 효과, 블러, 색상 조정 등 다양한 시각적 효과를 적용하는 데 사용됩니다. 다음은 몇 가지 filter의 예시입니다.

1. 그림자 효과 (Drop Shadow):

   xml
   <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
     <defs>
       <filter id="drop-shadow" x="-20%" y="-20%" width="140%" height="140%">
         <feOffset result="offOut" in="SourceAlpha" dx="5" dy="5" />
         <feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
         <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
       </filter>
     </defs>
     <rect width="100" height="100" rx="10" ry="10" fill="#3498db" filter="url(#drop-shadow)" />
   </svg>
   

2. 블러 효과:

   xml
   <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
     <defs>
       <filter id="blur" x="0" y="0" width="100%" height="100%">
         <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
       </filter>
     </defs>
     <rect width="100" height="100" rx="10" ry="10" fill="#e74c3c" filter="url(#blur)" />
   </svg>
   

3. 색상 행렬 조정:

   xml
   <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
     <defs>
       <filter id="hue-rotate" color-interpolation-filters="sRGB">
         <feColorMatrix type="hueRotate" values="90" />
       </filter>
     </defs>
     <rect width="100" height="100" rx="10" ry="10" fill="#27ae60" filter="url(#hue-rotate)" />
   </svg>
   

4. 밝기 조절:

   xml
   <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
     <defs>
       <filter id="brightness" color-interpolation-filters="sRGB">
         <feComponentTransfer>
           <feFuncR type="linear" slope="1.5" />
           <feFuncG type="linear" slope="1.5" />
           <feFuncB type="linear" slope="1.5" />
         </feComponentTransfer>
       </filter>
     </defs>
     <rect width="100" height="100" rx="10" ry="10" fill="#f39c12" filter="url(#brightness)" />
   </svg>
   

이 예시들은 filter 요소를 사용하여 다양한 시각적 효과를 적용하는 방법을 보여줍니다. filter는 다양한 효과 및 필터링을 지원하므로 필요에 따라 적절한 효과를 찾을 수 있습니다.