TelemetryOS Logo - SMIL Demo

What is SMIL?

SMIL (Synchronized Multimedia Integration Language) is a W3C standard for creating animations directly in SVG files using declarative XML tags. Unlike CSS animations, SMIL is completely self-contained within the SVG file.

No external CSS required - animations defined in SVG markup
Works in <img> tags - unlike inline SVG with CSS
Declarative syntax - easier to understand than CSS keyframes
Universal compatibility - works in all modern browsers

Basic Usage

The SMIL variant works exactly like a regular image - no external files needed:

<!-- Simple: Just use the SMIL SVG -->
<img src="telemetryos-logo-smil.svg" alt="TelemetryOS" style="width: 200px;" />

<!-- Or with object tag -->
<object data="telemetryos-logo-smil.svg" type="image/svg+xml" style="width: 200px;"></object>

SMIL Animated (200px)

telemetryos-logo-smil.svg

          
<svg viewBox="0 0 295 291.62" xmlns="http://www.w3.org/2000/svg">
<!-- Main T vertical stroke with top bar -->
<g transform-origin="147.5 145.81">
  <!-- Scale animation -->
  <animateTransform
    attributeName="transform"
    attributeType="XML"
    type="scale"
    values="1; 1.15; 0.95; 1; 1"
    keyTimes="0; 0.15; 0.3; 0.45; 1"
    dur="2s"
    repeatCount="indefinite"
    additive="sum"
    calcMode="spline"
    keySplines="0.42 0 0.58 1; 0.42 0 0.58 1; 0.42 0 0.58 1; 0.42 0 0.58 1"
  />
  <!-- Opacity animation -->
  <animate
    attributeName="opacity"
    values="0.75; 1; 0.85; 0.75; 0.75"
    keyTimes="0; 0.15; 0.3; 0.45; 1"
    dur="2s"
    repeatCount="indefinite"
    calcMode="spline"
    keySplines="0.42 0 0.58 1; 0.42 0 0.58 1; 0.42 0 0.58 1; 0.42 0 0.58 1"
  />
  <path
    d="M245.1,107.09l6.77-25.27c1.05-3.92-1.9-7.77-5.96-7.77H112.48c-4.19,0-7.86,2.82-8.95,6.86l-6.77,25.27c-1.05,3.92,1.9,7.77,5.96,7.77h37.54c4.06,0,7.01,3.85,5.96,7.77l-23.6,88.07c-1.05,3.92,1.9,7.77,5.96,7.77h26.16c4.19,0,7.86-2.82,8.95-6.86l24.09-89.89c1.08-4.05,4.75-6.86,8.95-6.86h39.42c4.19,0,7.86-2.82,8.95-6.86Z"
    fill="#f7b434"
  />
</g>

<!-- Top left dot -->
<g transform-origin="56.09 88.395">
  <!-- Translate animation -->
  <animateTransform
    attributeName="transform"
    attributeType="XML"
    type="translate"
    values="0,0; 0,-8; 0,3; 0,0; 0,0"
    keyTimes="0; 0.15; 0.3; 0.45; 1"
    dur="2s"
    begin="0.25s"
    repeatCount="indefinite"
    additive="sum"
    calcMode="spline"
    keySplines="0.42 0 0.58 1; 0.42 0 0.58 1; 0.42 0 0.58 1; 0.42 0 0.58 1"
  />
  <!-- Scale animation -->
  <animateTransform
    attributeName="transform"
    attributeType="XML"
    type="scale"
    values="1; 1.25; 0.9; 1; 1"
    keyTimes="0; 0.15; 0.3; 0.45; 1"
    dur="2s"
    begin="0.25s"
    repeatCount="indefinite"
    additive="sum"
    calcMode="spline"
    keySplines="0.42 0 0.58 1; 0.42 0 0.58 1; 0.42 0 0.58 1; 0.42 0 0.58 1"
  />
  <!-- Opacity animation -->
  <animate
    attributeName="opacity"
    values="0.7; 1; 0.8; 0.7; 0.7"
    keyTimes="0; 0.15; 0.3; 0.45; 1"
    dur="2s"
    begin="0.25s"
    repeatCount="indefinite"
    calcMode="spline"
    keySplines="0.42 0 0.58 1; 0.42 0 0.58 1; 0.42 0 0.58 1; 0.42 0 0.58 1"
  />
  <path
    d="M84.19,107.09l6.77-25.27c1.05-3.92-1.9-7.77-5.96-7.77h-26.16c-4.19,0-7.86,2.82-8.95,6.86l-6.77,25.27c-1.05,3.92,1.9,7.77,5.96,7.77h26.16c4.19,0,7.86-2.82,8.95-6.86Z"
    fill="#f7b434"
  />
</g>

<!-- Bottom left dot -->
<g transform-origin="103.79 144.895">
  <!-- Translate animation -->
  <animateTransform
    attributeName="transform"
    attributeType="XML"
    type="translate"
    values="0,0; 0,-8; 0,3; 0,0; 0,0"
    keyTimes="0; 0.15; 0.3; 0.45; 1"
    dur="2s"
    begin="0.5s"
    repeatCount="indefinite"
    additive="sum"
    calcMode="spline"
    keySplines="0.42 0 0.58 1; 0.42 0 0.58 1; 0.42 0 0.58 1; 0.42 0 0.58 1"
  />
  <!-- Scale animation -->
  <animateTransform
    attributeName="transform"
    attributeType="XML"
    type="scale"
    values="1; 1.25; 0.9; 1; 1"
    keyTimes="0; 0.15; 0.3; 0.45; 1"
    dur="2s"
    begin="0.5s"
    repeatCount="indefinite"
    additive="sum"
    calcMode="spline"
    keySplines="0.42 0 0.58 1; 0.42 0 0.58 1; 0.42 0 0.58 1; 0.42 0 0.58 1"
  />
  <!-- Opacity animation -->
  <animate
    attributeName="opacity"
    values="0.7; 1; 0.8; 0.7; 0.7"
    keyTimes="0; 0.15; 0.3; 0.45; 1"
    dur="2s"
    begin="0.5s"
    repeatCount="indefinite"
    calcMode="spline"
    keySplines="0.42 0 0.58 1; 0.42 0 0.58 1; 0.42 0 0.58 1; 0.42 0 0.58 1"
  />
  <path
    d="M124.75,125.86h-26.16c-4.19,0-7.86,2.82-8.95,6.86l-6.77,25.27c-1.05,3.92,1.9,7.77,5.96,7.77h26.16c4.19,0,7.86-2.82,8.95-6.86l6.77-25.27c1.05-3.92-1.9-7.77-5.96-7.77Z"
    fill="#f7b434"
  />
</g>
</svg>

        

Size Variants - Perfect Scaling

SMIL animations scale perfectly to any size:

Small (64px)

Medium (128px)

Large (200px)

Extra Large (300px)

Inline Usage Example

Loading your data

Processing request...

SMIL vs CSS Animations

Both approaches create the same visual result, but with different technical implementations:

SMIL Animations

100% self-contained - no external files
Uses <animate> and <animateTransform> tags
Works in <img> tags
Declarative XML syntax
Browser support: All modern browsers

CSS Animations

Uses CSS @keyframes in <style> block
Familiar syntax for web developers
Also works in <img> tags (when inline)
Easier to customize with external CSS (when inlined)
Browser support: All modern browsers

Which to choose? Both are excellent options. Choose SMIL if you prefer declarative XML syntax, or CSS if you're more comfortable with keyframe animations. Both produce identical visual results.

Technical Details

The SMIL implementation uses these animation tags:

<animateTransform type="scale"> - Scales elements smoothly
<animateTransform type="translate"> - Moves elements up and down
<animate attributeName="opacity"> - Fades elements in and out
additive="sum" - Allows multiple transforms to combine
repeatCount="indefinite" - Loops animations continuously

Animation timing:

Main T: 2-second animation with no delay
Top dot: 2-second animation with 0.25s delay
Bottom dot: 2-second animation with 0.5s delay

Example SMIL Code

Here's how the SMIL animations are structured:

<g transform-origin="147.5 145.81">
  <!-- Scale animation -->
  <animateTransform
    attributeName="transform"
    type="scale"
    values="1; 1.15; 0.95; 1; 1"
    keyTimes="0; 0.15; 0.3; 0.45; 1"
    dur="2s"
    repeatCount="indefinite"
    additive="sum"
  />

  <!-- Opacity animation -->
  <animate
    attributeName="opacity"
    values="0.75; 1; 0.85; 0.75; 0.75"
    keyTimes="0; 0.15; 0.3; 0.45; 1"
    dur="2s"
    repeatCount="indefinite"
  />

  <path d="..." fill="#f7b434" />
</g>

When to Use SMIL

Static websites - Drop-in animated logo with zero configuration
Email signatures - Some email clients support animated SVG (test first!)
Content management systems - Upload as a single file
Documentation sites - Simple <img> tag usage
Learning SVG animations - Declarative syntax is easier to understand

When to use alternatives:

React apps - Use TelemetryOSLoader.jsx component
Need animation control - CSS with classes or React props
Mobile apps - Use proper Lottie files from After Effects

Files Needed

telemetryos-logo-smil.svg - That's it! Everything is included.

Quick Start

<!-- Copy the SMIL SVG file to your project -->
<!-- Use it like any image -->
<img src="telemetryos-logo-smil.svg" alt="TelemetryOS" style="width: 200px;" />