Skill · Version 1.0.0

SVG-Animation

Bereitet skalierbare SVG-Bewegung mit korrekten Koordinaten, eindeutigen Kennungen und zugänglicher reduzierter Bewegung vor.

svg-animation

Entdecke, wie der Skill hilft

Wann ist der Skill hilfreich?

Nutze dies bei kollidierenden Instanzen oder falsch skalierenden animierten Symbolen.

Wobei hilft er dir?

Definiert Ansichtsgeometrie und einheitliche Transformationsursprünge.
Verhindert doppelte IDs in Verläufen, Masken und Ausschnitten.
Wählt geeignete Animationstechniken und misst Darstellungskosten.

Das könntest du fragen

Animiere zwei Statusillustrationen ohne Maskenkollision und biete eine sinnvolle statische Alternative. Zeige beide Illustrationen, pausiere eine und skaliere die andere. Masken und Animationen bleiben unabhängig, mit verständlichem statischem Statustext.

Ausführliche Dokumentation

Hier findest du die ursprüngliche Anleitung, Beispiele und Prüfschritte des Skills in ihrer Originalsprache.

Details…Weniger anzeigen

SVG Animation

SVGs provide resolution-independent, DOM-addressable vector graphics that bridge UI components and expressive illustrations. Well-structured SVG markup is 80% of a reliable SVG animation.

Preparing Clean, Animatable SVG Markup

Viewport & coordinate hygiene:
- Always include an explicit viewBox="0 0 width height" and preserve aspect ratio (preserveAspectRatio="xMidYMid meet").
- Group related visual layers into semantic <g id="..."> or data-part="..." groups flattened to a shared coordinate space so transforms don't compound unexpectedly across deeply nested matrices.
Avoid ID collisions across multiple component instances:
- Inline SVGs often contain <linearGradient id="grad-1">, <clipPath id="clip-1">, or <mask id="mask-1">. Rendering the same component twice on a page causes duplicate DOM IDs—and hiding the first instance breaks gradients/clips in the second! Prefix IDs dynamically per component instance (useId()).
Transform origin normalization:
- By default, SVG <path> and <g> elements calculate transform-origin relative to the entire SVG canvas (0, 0), not the element's own bounding box.
- In CSS, always set transform-box: fill-box; transform-origin: center; on animated SVG child elements (or use GSAP's svgOrigin / transformOrigin: "50% 50%", which normalizes cross-browser behavior automatically).

Core SVG Animation Techniques

Technique	Best Practice
Line / Path Drawing (`stroke-dasharray` & `stroke-dashoffset`)	Set `pathLength="1"` directly on the `<path>`, `<line>`, or `<circle>` element! That normalizes the total path length to `1` regardless of viewport scale, allowing clean `stroke-dasharray: 1; stroke-dashoffset: 1 -> 0` animations without calling `getTotalLength()` in JavaScript.
Data-Flow Connectors & Pulses	Layer two paths sharing the exact same `d` attribute: a muted base track (`stroke-opacity="0.2"`) and an animated highlight segment (`pathLength="1"`, `stroke-dasharray="0.12 0.88"`, animating `stroke-dashoffset` from `1` to `0`) to visualize live request/data routing.
Icon Micro-Interactions (Morph & State Toggle)	Keep anchor point counts compatible when morphing `d` attributes, or animate composite `<line>` / `<path>` primitives (`rotate`, `scaleX`, `stroke-dashoffset`) for crisp play/pause, menu/close, and copy/check transitions.
Clipping & Mask Reveals	Prefer `<clipPath>` (hard geometry edge, fast GPU compositing) over `<mask>` (luminance/alpha pixel calculation per frame) unless soft feathered gradients are required.

Accessibility & Performance Guardrails

Decorative vs. informative SVGs: Mark purely decorative icons and background vector scenes with aria-hidden="true" focusable="false". For informative diagrams, include <title> and <desc> linked via aria-labelledby or expose semantic HTML labels alongside the graphic.
Avoid animating SVG <filter> primitives (feGaussianBlur, feDisplacementMap) continuously on large viewports: Filter regions trigger expensive CPU/GPU rasterization every frame. Restrict animated filters to small bounded <filter x y width height> regions or replace them with layered opacity/transform transitions.

Enthaltene Dateien 1

SKILL.md