🧩 Inline SVG and Manipulation

Why Inline SVG?

Inline SVG means writing the <svg> markup directly in your HTML document instead of pointing an <img> at an external .svg file. The payoff is enormous: the shapes join the page's DOM, so they behave like any other element — selectable, styleable, scriptable.

💡 A useful analogy: An <img src="chart.svg"> is a sealed photograph of a chart — you can hang it on the wall but not touch what's inside. Inline SVG is the chart itself, with every bar, label, and axis handed to you as a component you can paint, move, and click.

Because each element is a DOM node, inline SVG unlocks:

• Direct manipulation of individual shapes via JavaScript
• CSS styling, including hover states and media queries
• Interactive behaviors — clicks, drags, tooltips
• Dynamic updates driven by data or application state

Embedding Methods Compared

There are several ways to put SVG on a page. They trade convenience for control — and only inline SVG gives you full JavaScript access.

<!-- Inline: every child is reachable from JS and CSS -->
<svg width="200" height="200" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle id="dot" cx="50" cy="50" r="40" fill="#3b82f6" stroke="#0d47a1" stroke-width="2" />
  <text x="50" y="54" text-anchor="middle" fill="#fff" font-size="10">Inline</text>
</svg>

Manipulating with JavaScript

Reading and changing existing shapes uses the same DOM methods you already know. The one twist: SVG lives in its own XML namespace, so creating new elements requires createElementNS, not createElement.

// Read & change an existing element
const dot = document.getElementById('dot');
dot.setAttribute('fill', 'tomato');
dot.setAttribute('r', '30');
dot.addEventListener('click', () => dot.setAttribute('fill', 'seagreen'));

// Create a NEW element — must use the SVG namespace
const SVG_NS = 'http://www.w3.org/2000/svg';
const rect = document.createElementNS(SVG_NS, 'rect');
rect.setAttribute('x', '10');
rect.setAttribute('y', '10');
rect.setAttribute('width', '80');
rect.setAttribute('height', '80');
rect.setAttribute('fill', '#f59e0b');

const svg = document.querySelector('svg');
svg.appendChild(rect);          // it appears immediately

Styling & Animating with CSS

Inline SVG elements respond to CSS just like HTML — element, class, ID, and pseudo-class selectors all work. The SVG-specific properties (fill, stroke, stroke-width, stroke-dasharray) sit alongside standard ones like opacity and transform.

.dot {
  fill: #3b82f6;
  transition: fill .3s ease, transform .3s ease;
  transform-box: fill-box;      /* so transforms pivot on the shape */
  transform-origin: center;
}
.dot:hover { fill: #ef4444; transform: scale(1.2); }

/* Pulsing keyframe animation */
@keyframes pulse {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(1.2); opacity: 0.7; }
}
.pulse { animation: pulse 2s infinite ease-in-out; }

The line-drawing trick

A favorite SVG effect animates a path as if it's being drawn by hand. It works by setting stroke-dasharray to the path's total length (one giant dash), then animating stroke-dashoffset from that length down to zero:

.draw {
  fill: none;
  stroke: #6366f1;
  stroke-width: 2;
  stroke-dasharray: 1000;       /* >= the path length */
  stroke-dashoffset: 1000;      /* start fully "hidden" */
  animation: draw 3s forwards ease-in-out;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

Generating SVG from Data

The real power appears when SVG is built from data. Loop over an array, create one element per data point, and you have a chart — with each bar a live object you can style and wire to events. Here's a compact, modern bar chart generator:

const SVG_NS = 'http://www.w3.org/2000/svg';

const data = [
  { label: 'Jan', value: 120 },
  { label: 'Feb', value: 150 },
  { label: 'Mar', value: 180 },
  { label: 'Apr', value: 110 },
  { label: 'May', value: 200 },
];

function renderChart(svg, data) {
  const W = 500, H = 300, pad = 40;
  const max = Math.max(...data.map(d => d.value));
  const barW = (W - pad * 2) / data.length * 0.7;
  const gap  = (W - pad * 2) / data.length;

  svg.replaceChildren();        // clear any previous render

  data.forEach((d, i) => {
    const h = (d.value / max) * (H - pad * 2);
    const x = pad + i * gap;
    const y = H - pad - h;

    const bar = document.createElementNS(SVG_NS, 'rect');
    bar.setAttribute('x', x);
    bar.setAttribute('y', y);
    bar.setAttribute('width', barW);
    bar.setAttribute('height', h);
    bar.setAttribute('fill', '#3b82f6');
    bar.dataset.value = d.value;

    bar.addEventListener('mouseenter', () => bar.setAttribute('fill', '#f59e0b'));
    bar.addEventListener('mouseleave', () => bar.setAttribute('fill', '#3b82f6'));

    const label = document.createElementNS(SVG_NS, 'text');
    label.textContent = d.label;
    label.setAttribute('x', x + barW / 2);
    label.setAttribute('y', H - pad + 16);
    label.setAttribute('text-anchor', 'middle');
    label.setAttribute('font-size', '12');

    svg.append(bar, label);
  });
}

renderChart(document.getElementById('chart'), data);

Interactivity Patterns

Because shapes are DOM nodes, they take event listeners directly. A few patterns cover most needs.

Hover feedback (CSS is usually enough)

.node { fill: #3b82f6; transition: fill .2s; }
.node:hover { fill: #ef4444; }

Click to toggle selection

shape.addEventListener('click', (event) => {
  const selected = shape.classList.toggle('selected');
  shape.setAttribute('stroke-width', selected ? 3 : 1);
  event.stopPropagation();
});

Tooltip that follows the cursor

const tip = document.getElementById('tooltip');

bar.addEventListener('mousemove', (event) => {
  tip.textContent = `Value: ${bar.dataset.value}`;
  tip.style.left = `${event.pageX + 12}px`;
  tip.style.top  = `${event.pageY - 24}px`;
  tip.style.display = 'block';
});
bar.addEventListener('mouseleave', () => { tip.style.display = 'none'; });

Accessibility

Interactive SVG must work for keyboard and screen-reader users too. The essentials:

• Give the SVG role="img" with a <title> and <desc>, referenced by aria-labelledby
• Make clickable shapes focusable (tabindex="0"), give them role="button" and an aria-label
• Support the keyboard — activate on Enter/Space, not just mouse clicks
• Don't rely on color alone; keep contrast sufficient

<svg role="img" aria-labelledby="t d">
  <title id="t">Quarterly sales, 2025</title>
  <desc id="d">Bar chart; Q3 shows the strongest growth.</desc>

  <g role="button" tabindex="0" aria-label="Q1 sales: 250,000">
    <rect class="bar" x="50" y="150" width="50" height="100" />
    <text x="75" y="265" text-anchor="middle">Q1</text>
  </g>
</svg>

const q1 = document.querySelector('[aria-label^="Q1"]');
q1.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); showDetails('q1'); }
});
q1.addEventListener('click', () => showDetails('q1'));

Hands-on Exercise

const SVG_NS = 'http://www.w3.org/2000/svg';
const svg = document.getElementById('chart');
let data = [40, 90, 60, 120, 80];

function renderChart(values) {
  const H = 300, pad = 30, max = Math.max(...values);
  const gap = (500 - pad * 2) / values.length;
  svg.replaceChildren();

  values.forEach((v, i) => {
    const h = (v / max) * (H - pad * 2);
    const bar = document.createElementNS(SVG_NS, 'rect');
    bar.setAttribute('x', pad + i * gap);
    bar.setAttribute('y', H - pad - h);
    bar.setAttribute('width', gap * 0.7);
    bar.setAttribute('height', h);
    bar.setAttribute('fill', '#3b82f6');
    bar.addEventListener('mouseenter', () => bar.setAttribute('fill', '#f59e0b'));
    bar.addEventListener('mouseleave', () => bar.setAttribute('fill', '#3b82f6'));
    svg.appendChild(bar);
  });
}

document.getElementById('shuffle').addEventListener('click', () => {
  data = data.map(() => Math.floor(Math.random() * 120) + 20);
  renderChart(data);
});

renderChart(data);

Best Practices

Summary & Quiz

📚 Further Reading

• MDN — SVG reference
• CSS-Tricks — A Complete Guide to SVG
• D3.js — data-driven SVG at scale

🚀 What's Next?

You've now covered forms and all of Module 4's interactive HTML APIs. Next you'll put them to work in the Weekend Project: HTML Forms & HTML5 APIs, combining validation, drag-and-drop, Canvas, and SVG into one small application.