What Does fill="hold" Do in SMIL 3.0?
In SMIL 3.0 (Synchronized Multimedia Integration Language), the
fill="hold" attribute determines the post-active state of a
media or animation element by preserving its final visual or audible
frame on screen after its active playback duration ends. Rather than
disappearing or resetting to a default state, an element configured with
fill="hold" remains visible and statically frozen until the
parent container finishes or an explicit event terminates it. This
article explores how fill="hold" functions within the SMIL
timing architecture, its syntax and practical applications, and how it
compares to alternative fill behaviors.
Understanding the SMIL Timing Model
SMIL defines multimedia presentations through temporal containers
such as <seq> (sequential) and
<par> (parallel). Every timed element possesses an
active duration defined by attributes like begin,
dur, and end. Once this active period
concludes, the SMIL runtime must determine what to do with the element's
visual or audio presentation.
The fill attribute dictates this post-active behavior.
By default, most media elements employ fill="remove", which
causes the element to cease rendering immediately upon completion. When
setting fill="hold", the author instructs the player to
extend the element’s display state beyond its active lifecycle, holding
the final rendered frame indefinitely or until the enclosing container
terminates.
Practical Implementation and Syntax
The fill attribute is applied directly to timing
containers or individual media elements such as
<video>, <img>,
<audio>, <text>, or animation
elements (<animate>, <set>).
<smil xmlns="http://www.w3.org/ns/SMIL" version="3.0" baseProfile="Language">
<body>
<par dur="15s">
<!-- Video plays for 5 seconds, then holds its final frame for the remaining 10 seconds -->
<video src="intro.mp4" dur="5s" fill="hold" />
<!-- Audio plays alongside for the full duration -->
<audio src="narration.mp3" dur="15s" />
</par>
</body>
</smil>In this example, the video element stops actively decoding frames
after 5 seconds, but the display continues to show the last frame until
the parent <par> container reaches its 15-second
duration.
Key Differences:
fill="hold" vs. Other Fill Values
SMIL 3.0 supports several values for the fill attribute,
each serving distinct layout and timing requirements:
hold: The element’s presentation remains visible in its final active state for the remainder of the parent container's duration.remove: The element disappears immediately when its active duration finishes. This is the default behavior for most media nodes.freeze: Syntactically synonymous withholdin SMIL 3.0 timing modules, maintaining backward compatibility with SVG animations and SMIL 1.0/2.0 implementations.auto: Delegates fill behavior to the runtime environment or parent container inheritance rules.transition: Keeps the final state visible while executing a transition effect to the subsequent element.
Common Use Cases in Multimedia Design
The fill="hold" attribute is essential for seamless
multimedia sequencing and interactive layouts:
- Slide Presentations and Overlays: Keeping background graphics, branding watermarks, or slide titles visible while other dynamic elements load or play sequentially.
- Video Pauses and End Screens: Displaying a static closing title card from the end of a video stream without needing a separate image asset.
- Synchronized Captions and Subtitles: Ensuring subtitles or textual explanations remain readable on screen until the next speaker begins.
- Vector and SVG Animation States: Preserving transformed positions, colors, or opacities at the end of an animation sequence instead of snapping back to initial coordinates.
By controlling the post-active lifecycle of presentation assets,
fill="hold" provides granular control over visual
persistence without inflating asset size or complicating timeline
structures.