# SVG Filters Apply filter effects to elements and images. ## How It Works This feature is enabled by [SVG filters](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter) paired with [feColorMatrix](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix) transformations. ## Usage Apply a filter to any element using the Filter style property and passing the unique SVG Filter ID. ```svelte ... ``` We've provided a curated collection of SVG Filters to choose from below. ```svelte
Apollo filter #Apollo
BlueNight filter #BlueNight
Emerald filter #Emerald
GreenFall filter #GreenFall
Noir filter #Noir
NoirLight filter #NoirLight
Rustic filter #Rustic
Summer84 filter #Summer84
XPro filter #XPro
``` ## Create a Filter We recommend [SVG Color Matrix Mixer](https://fecolormatrix.com/) by [Rik Schennink](https://x.com/rikschennink/) to create your own filters. ## Tips * The SVG must be in the same scope as the elements you wish to filter. Global scope is acceptable. * Consder storing your SVGs within your local project for quick and reusable imports. * All Vite-based frameworks support [SVG imports](https://vite.dev/guide/assets.html#importing-asset-as-url). * Optionally you can embed the SVG within a imported component (ex: `Apollo.svelte`, `Apollo.tsx`). * Filter SVGs are affected by the flow DOM, including class styles such as `space-{x|y}`.