Using SVG and Animation for Interactive Graphics

A sharp icon and an interactive graphic solve different problems. SVG supplies scalable geometry; interaction also needs an appropriate control, a clear state, and a decision about how much motion is useful. Start with a small drawing before adding an animation library.

Define the drawing coordinates

viewBox="0 0 240 120" establishes the internal coordinate system. CSS can change the displayed width without changing the circle's coordinates. In this example, cx and cy locate the centre and r sets the radius. Other building blocks include rect, line, and path.

<svg viewBox="0 0 240 120" width="240" height="120"
     role="img" aria-labelledby="demo-title">
  <title id="demo-title">Blue circle</title>
  <circle cx="120" cy="60" r="32" fill="#1769aa" />
</svg>

Give an informative graphic an accessible name. For decoration that merely repeats nearby text, hiding it from assistive technology may be more appropriate. Keep title IDs unique when several graphics share a page. Embedding a photograph in an SVG does not turn the photograph into vector geometry.

Use a button to control the graphic

A click handler on a circle does not automatically provide keyboard operation. Here a native HTML button controls a decorative SVG. The label stays fixed while aria-pressed reports the toggle state. Without JavaScript, the disabled button and initial status remain visible.

<div class="svg-demo">
  <svg viewBox="0 0 240 120" aria-hidden="true">
    <circle cx="120" cy="60" r="32" />
  </svg>
  <button id="highlight-toggle" type="button"
          aria-pressed="false" disabled>Toggle highlight</button>
  <p id="highlight-state">Highlight off.</p>
</div>
<style>
  .svg-demo svg { display: block; width: 100%; max-width: 24rem; }
  .svg-demo circle { fill: #1769aa; transition: fill 180ms ease; }
  .svg-demo.is-active circle { fill: #a23b00; }
  .svg-demo button:focus-visible { outline: 3px solid #1769aa; }
  @media (prefers-reduced-motion: reduce) {
    .svg-demo circle { transition: none; }
  }
</style>
<script>
  const demo = document.querySelector('.svg-demo');
  const toggle = demo.querySelector('button');
  const state = demo.querySelector('#highlight-state');
  toggle.disabled = false;
  toggle.addEventListener('click', () => {
    const active = toggle.getAttribute('aria-pressed') !== 'true';
    toggle.setAttribute('aria-pressed', String(active));
    demo.classList.toggle('is-active', active);
    state.textContent = active ? 'Highlight on.' : 'Highlight off.';
  });
</script>

Try the example in a standalone HTML file. The script follows the markup deliberately; moving it into the document head requires waiting for the DOM. Adapt IDs and selectors when creating multiple instances. If a site's Content Security Policy disallows inline code, move the CSS and JavaScript into permitted files instead of disabling the policy.

An SVG image is not an inline SVG tree

With <img src="graphic.svg" alt="...">, the page gets an image element, not direct access to the file's internal circle through querySelector. Use trusted inline markup when individual shapes need DOM interaction. Do not insert untrusted uploads through innerHTML; SVG content can contain more than harmless drawing instructions.

Check operation before adding more movement

Reach the button with Tab and toggle it with Enter and Space. Emulate reduced motion in browser tools and check that the transition disappears. Test a narrow viewport, zoomed text, and disabled JavaScript. If you later add continuous movement, provide a way to stop it; this example intentionally uses only a short colour transition.

References: SVG viewBox and reduced motion preferences.