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

```html
<!-- Apollo: `filter: url(#Apollo)` -->
<svg id="svg-filter-apollo" class="absolute -left-full w-0 h-0">
	<filter id="Apollo" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
		<feColorMatrix values="0.8 0.6 -0.4 0.1 0,
			0 1.2 0.05 0 0,
			0 -1 3 0.02 0,
			0 0 0 50 0" result="final" in="SourceGraphic"></feColorMatrix>
	</filter>
</svg>

```

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