<defs> و <filter>

تمام فیلترهای اینترنتی SVG در داخل یک عنصر <defs> تعریف می شوند. عنصر <defs> مخفف کلمه ی definitions است و عناصر خاص را تعریف می کند( مانند فیلترها). 

از عنصر <filter> برای تعریف یک فیلتر در SVG استفاده می شود. ضروری است که عنصر <filter> یک id داشته باشد تا این فیلتر مشخص شود. سپس بدین وسیله می توان گرافیک را به فیلتر متصل کرد. 

 <feGaussianBlur> در SVG

مثال 1

از عنصر <feGaussianBlur> برای ایجاد افکت های blur استفاده می شود: 

fegaussianblur

کد SVG مورد نظر در زیر قرار دارد:

مثال

<svg height="110" width="110">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>
خودتان امتحان کنید »

توضیح کد بالا:

  • خصوصیت id از عنصر <filter> یک نام یکتا را برای فیلتر مورد نظر مشخص می کند. 
  • افکت blur به وسیله ی عنصر <feGaussianBlur> تعریف شده است. 
  • عبارت "in="SourceGraphic تعریف می کند که افکت مورد نظر برای تمامی عنصر هدف تعیین شده است. 
  • خصوصیت stdDeviation مقدار blur را مشخص می کند. 
  • خصوصیت filter که در عنصر <rect> قرار دارد، این عنصر را به فیلتر با آی دی f1 متصل می کند.