Skip to content

Rule · Lint

Hardcoded id on an SVG <filter>, gradient, <clipPath> or <mask> inside a reusable component

lint/svg-global-idwarnvoid lintupdated

Why it matters

Ids are document-global. Two instances (or any other SVG using #filter/#gradient) resolve url(#…) to whichever element came first, so the second instance silently renders with the wrong filter or none (Aceternity spotlight uses id="filter").

How to fix it

Generate the id with useId() (strip the colons for url()), or hoist one shared definition to the layout and reference it.

Example

tsx
const id = useId().replace(/:/g, '');
<filter id={`${id}-blur`}>…</filter>
<g filter={`url(#${id}-blur)`} />

References

void lint reports 67 rules in this category. Static source checks with no browser: Tailwind v4 silent failures, Next.js 16 API traps, React render-body bugs, accessibility markup, SEO files and motion hygiene.