# 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.

```astro
<!-- The Target Element -->
<img ... style="filter: url(#Apollo)" />

<!-- Via arbitrary Tailwind syntax -->
<Avatar classes="[filter:url(#Apollo)]" />

<!-- The SVG Filter with a matching unique ID -->
<svg><filter id="Apollo">...</filter></svg>
```

We've provided a curated collection of SVG Filters to choose from below.

## 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}`.