How timestamps become SVG keyTimes
Each keyTime is a fraction of the animation’s simple duration. For a two-second timeline, timings of 0, 1 and 2 seconds become 0;0.5;1. The same timeline entered as 0, 1000 and 2000 milliseconds produces the same fractions. Keyframe percentages are these fractions multiplied by 100.
Choose the interpolation that matches the job
Linear mode blends neighboring numeric values. Discrete mode holds the latest value until the next timing, including a final hold when the last timing is before 100%. Spline mode adjusts interval progress using cubic Bézier controls. One control set is needed for each pair of neighboring values, including a zero-duration pair.
Keep timing validation separate from a full document check
A correctly formed keyTimes list does not prove that a complete SVG animation will work. The target attribute, surrounding SVG geometry, CSS, event timing, browser behavior and other animation elements can affect playback. This calculator deliberately uses known numeric geometry and does not read arbitrary source code. Interval tables distinguish the duration between converted source timestamps from the duration reconstructed from exported SVG keyTimes. Very tightly spaced timings can amplify finite-precision rounding; the tool rejects collapsed timings and flags significant relative drift.
Frequently asked questions
Is this a complete SVG animation validator?
No. It checks one finite simple-duration timing list and numeric cx values. Event timing, delays, repeats, additive animation, arbitrary SVG attributes and artwork are not modeled. Verify the exported attributes in your complete document.
Can I use the percentage output for CSS keyframes?
The percentages identify positions within the entered duration and can help author CSS keyframes. They are not a generated CSS animation, and CSS easing or duplicate-keyframe rules need their own review.
Are equal keyTimes valid?
Yes. Key times must not decrease, but equal entries are allowed and represent an instantaneous jump. This manual preview uses the last listed value at a shared instant, matching the tested Chromium examples. Check exact playback boundaries in your target browser.
Why is paced animation not offered?
Paced animation ignores keyTimes and keySplines. This calculator focuses on explicit timing, so it offers linear, discrete and spline modes instead of pretending that a keyTimes list controls paced playback.
How many keySplines control sets do I need?
Spline mode needs one set per interval: one fewer than the number of values. Each set contains x1 y1 x2 y2, all between 0 and 1. In other modes keySplines is ignored and omitted from the export.
Why are the raw attributes and demo SVG different?
Raw animate attributes retain the entered numeric cx values. The known-geometry preview and downloaded SVG normalize the input range to local x coordinates from 0 to 100, or 50 for a constant value, so very small spans and large origins stay visible. The report keeps the mapping and both value lists.
Does the preview play automatically?
No. Drag the progress slider to inspect a static numeric sample. The downloaded normalized demo SVG plays once for the entered duration and then freezes. It contains known geometry and an animate element, without scripts or external resources.
What are the practical limits?
Use 2–64 semicolon-separated numeric values and timings. Duration is 0.000001–86,400 seconds; values are between −1,000,000 and 1,000,000. Numeric inputs that underflow and distinct timings that collapse during conversion or normalization are rejected. Finite JavaScript numeric precision is used. Interval tables preserve converted source durations and show normalized SVG durations separately; significant relative drift is flagged. Displays are rounded while exports retain numeric precision.
References: W3C SVG animation timing, keyTimes and keySplines.