過濾器

雖然必須在 IE 上使用 fakeSMIL 庫來獲得相同的結果，但大多數過濾器屬性都可以通過 <animate> 元素進行動畫製作。SMIL 動畫（<animate> 元素）將被棄用，以支援新的 Web 動畫規範 - 截至 2016 年中期，該規範的支援非常有限。

Filter 元素的子元素 - 濾鏡基元 - 具有兩個可選屬性，用於指定執行顏色插值計算的顏色空間：顏色插值和顏色插值濾鏡。前者的預設值是 sRGB，後者的預設值是 linearRGB。反轉色彩空間的操作（通過 feColorMatrix 或 feComponentTransfer）可能會導致非直觀的結果 - 對於那些習慣於 CSS sRGB 色彩空間的人來說。例如，線性 RGB 中的灰度影象的顏色反轉將導致明顯向更白色調的偏移。這可以通過將基元的值設定為 sRGB 來糾正。這些屬性可以在各個過濾器基元上設定，也可以從過濾器元素本身繼承。

如果未指定其他輸入，但需要一個輸入，則過濾器中的第一個過濾器基元將使用引用元素的柵格化（點陣圖）版本作為其輸入。期望輸入的後續濾波器基元將把前一個濾波器基元的結果作為輸入。

在複雜的過濾器中，如果隱含的話，很難跟蹤（和除錯）輸入和輸出; 優良作法是明確宣告每個基元的輸入和輸出。

SVG 濾波器基元可以通俗地分為輸入，變換，燈光效果和組合

輸入：

feFlood：生成一個色域

feTurbulence：產生各種各樣的噪音效果

feImage：從外部影象引用，資料 URI 或物件引用生成影象（截至 12 月中旬，Firefox 不支援物件引用）

轉換：

feColorMatrix：將 RBGA 畫素的輸入值轉換為輸出值

feComponentTransfer：調整單個顏色通道的顏色曲線

feConvolveMatrix：用從相對於當前畫素的區域中的畫素值計算的新畫素替換每個畫素）

feGaussianBlur：用畫素周圍區域中畫素的加權平均值替換當前畫素

feDisplacementMap：根據另一個輸入圖形中的 R，G 或 B 值移動每個畫素的當前位置。

feMorphology：用從該畫素周圍的矩形區域中的所有畫素的最大值或最小值計算的新畫素替換每個畫素。

feOffset：將輸入從當前位置移開

照明效果：

feSpecularLighting：提供閃亮的2D 或偽 3D 照明效果

feDiffuseLighting：提供遮罩2D 或偽 3D 照明效果

feDistantLight：為鏡面反射或漫射照明提供遠距離光源

feSpotLight：為鏡面反射或漫反射照明提供圓錐截面光源

fePointLight：為鏡面反射或漫反射照明提供點光源

組合：

feMerge：從多個輸入建立一個簡單的複合（包括先前的濾波器輸入）

feBlend：使用混合規則混合多個輸入

feComposite：使用集合組合規則組合多個輸入，同時考慮 alpha 值。

feTile：tile 輸入以建立重複模式

其他說明

雖然 SVG 是一種向量圖形技術，但重要的是要強調 SVG 濾波器對所有輸入（包括 SVG 形狀） 執行畫素級操作，並以指定的解析度生成光柵化（點陣圖）輸出。在以正常螢幕解析度過濾的普通 SVG 曲線上應用 10x 比例變換（例如）將產生畫素化邊緣，因為原始圖形的抗鋸齒已經被濾波器轉換為畫素並按比例放大。 （目前還不清楚這是符合規範還是僅限於當前的實施）

請記住，在編寫過濾器時，SVG 是 XML，因此必須關閉所有標記，並且需要顯式指定許多屬性和屬性，否則將不執行過濾器。

永遠不會直接渲染濾鏡元素。僅使用應用過濾器的元素上的 filter 屬性引用它。請注意，display 屬性不適用於 filter 元素，即使 display 屬性設定為 none 以外的值，也不會直接呈現元素。相反，即使 filterelement 或其任何祖先的 display 屬性設定為 none，過濾元素也可用於引用。

可以通過 CSS 過濾器引用 SVG 過濾器，儘管截至 2016 年中，通過此機制僅支援基元的子集，並且 Microsoft 瀏覽器不支援此機制。