Skip to main content

🗓️ 22062025 1113
📎

svg_smil

ABSTRACT
  • SMIL (Synchronized Multimedia Integration Language) is part of the SVG specification, designed for animating SVG elements.
  • Still supported in all major browsers, despite a now-reversed deprecation attempt by Chrome in 2015.
  • Works even when SVGs are used outside browsers (e.g., PDFs, native apps).

How SMIL Works​

  • Add <animate> as a child element of the shape you want to animate.
  • Animate any SVG attribute, not just those allowed in CSS (e.g. points, width, rx, etc.).

Core <animate> Attributes​

AttributeDescription
attributeNameThe SVG attribute you want to animate
toFinal value of the attribute
durDuration of the animation (e.g. 1s)
fill="freeze"Freezes animation at final state (prevents reset)
<animate
  attributeName="the attribute you want to animate"
  to="the final value of the attribute"
  dur="the duration of the animation"
/>

Triggering Animation with begin​

  • The begin attribute lets you control when the animation starts.
  • Syntax: begin="elementId.eventName"
    Example: begin="charts.mouseenter" starts animation on hover.
  • Makes it easy to respond to interactions without needing CSS or JS.
Event NameTrigger DescriptionUse Case
clickFires when the element is clickedStart animation on button or shape click
mousedownFires when mouse button is pressed downHighlight or animate on press
mouseupFires when mouse button is releasedBounce back effect after click
mouseoverFires when pointer enters element (includes children)Hover effects
mouseenterFires when pointer enters element (excludes children)Precise hover triggers
mouseoutFires when pointer leaves element (includes children)Fade out or reset on exit
mouseleaveFires when pointer leaves element (excludes children)Prevent unintended exits from child elements
focusinFires when an element receives focusAnimate input field or form label
focusoutFires when an element loses focusReverse or validate animation
keydownFires when a key is pressed while the element is focusedTrigger based on keyboard interaction
keyupFires when a key is releasedFollow-up animations after key press
loadFires when the element is loadedAutoplay intro animations

Freeze Final State with fill="freeze"​

  • Prevents animations from snapping back to their initial state.
  • Especially useful for morphing shapes or adjusting dimensions.

Multiple Animations per Element​

  • You can add multiple <animate> elements to a single shape to layer or chain animations.
  • Enables more complex effects without increasing DOM size or requiring JS orchestration.

Triggering animations manually​

  1. Setting the begin attribute to indefinite;
  2. Using the beginElement method to start the animation.
NOTE

In React, we can grab the animate element using the useRef hook and trigger the animation in response to something using the useEffect hook

References