🖊️ SVG Fundamentals and Implementation

What Is SVG?

Scalable Vector Graphics (SVG) is an XML-based format for describing two-dimensional graphics. Instead of storing a grid of colored pixels the way a JPEG or PNG does, SVG stores instructions: "draw a circle here with radius 40," "connect these points with a line." The browser follows those instructions to redraw the image fresh at whatever size it needs.

💡 A useful analogy: A raster image is a mosaic made of tiny tiles — zoom in and you see the individual squares. A vector image is a recipe for drawing shapes, so the browser re-bakes it crisply at any size. One is a photograph of a drawing; the other is the drawing's blueprint.

Because SVG is just text markup that lives in the DOM, it inherits superpowers that raster images can't have:

• Scalability — razor-sharp from a 16px favicon to a billboard
• Small files — a logo can be a few hundred bytes
• Styleable — CSS targets individual shapes, including :hover
• Scriptable — JavaScript can create, move, and animate elements
• Accessible — text stays real text; shapes can carry descriptions

Vector vs. Raster

Neither format is "better" — they solve different problems. The rule of thumb: vectors for anything geometric (icons, logos, UI, diagrams, charts) and raster for anything photographic (photos, textures, painted artwork).

Structure & Coordinate System

An SVG is a root <svg> element containing shape elements. Here's the smallest useful example — a single circle:

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="crimson" stroke="black" stroke-width="2" />
</svg>

• width/height — the on-screen size (can be overridden by CSS)
• viewBox="min-x min-y width height" — the internal coordinate space the shapes are drawn in. This is what makes SVG responsive: set width:100% in CSS and the viewBox scales to fit
• xmlns — the XML namespace (required for standalone .svg files)

The Basic Shapes

SVG ships with a handful of primitive shapes. Combine them and you can draw almost anything.

<svg viewBox="0 0 300 80" xmlns="http://www.w3.org/2000/svg">
  <rect    x="10" y="15" width="50" height="50" rx="8" fill="#3b82f6" />
  <circle  cx="105" cy="40" r="25" fill="#22c55e" />
  <ellipse cx="175" cy="40" rx="30" ry="18" fill="#f59e0b" />
  <polygon points="240,15 265,65 215,65" fill="#a855f7" />
</svg>

The Path Element

The <path> is the most powerful shape — every other shape can be expressed as a path. It draws using a mini-language in its d ("data") attribute, a sequence of single-letter commands followed by coordinates.

Uppercase means absolute coordinates; lowercase means relative. Think of uppercase as GPS coordinates ("go to this exact spot") and lowercase as walking directions ("move 10 steps forward from where you are").

Here's a heart drawn with two cubic curves — the classic path demo:

<svg width="120" height="120" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path d="M50,88
           C10,55 10,20 35,20
           C48,20 50,33 50,33
           C50,33 52,20 65,20
           C90,20 90,55 50,88 Z"
        fill="crimson" />
</svg>

Styling & Reuse

Presentation attributes vs. CSS

You can style SVG two ways: with presentation attributes directly on the element, or with CSS. CSS wins for anything shared, interactive, or animated.

<!-- Presentation attributes (inline) -->
<circle cx="50" cy="50" r="40" fill="royalblue" stroke="black" stroke-width="2" />

<!-- Or with CSS -->
<style>
  .dot { fill: royalblue; stroke: black; stroke-width: 2; transition: fill .3s; }
  .dot:hover { fill: tomato; }   /* impossible with a raster image */
</style>
<circle class="dot" cx="50" cy="50" r="40" />

The common styling properties are fill, stroke, stroke-width, fill-opacity, stroke-opacity, stroke-linecap, stroke-linejoin, and stroke-dasharray (for dashed lines).

Group, define, and reuse

Three elements keep complex SVGs manageable — and they map neatly onto ideas you already know from components:

• <g> — a group. Apply one transform or style to many shapes at once.
• <defs> — a definitions block: shapes declared but not drawn until referenced.
• <symbol> + <use> — define a reusable icon once, stamp it anywhere (like a component).

<svg viewBox="0 0 200 60" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <symbol id="star" viewBox="0 0 100 100">
      <polygon points="50,5 61,38 96,38 68,59 79,92 50,72 21,92 32,59 4,38 39,38" />
    </symbol>
  </defs>

  <use href="#star" x="10"  y="10" width="40" height="40" fill="gold" />
  <use href="#star" x="80"  y="10" width="40" height="40" fill="silver" />
  <use href="#star" x="150" y="10" width="40" height="40" fill="#cd7f32" />
</svg>

Worked Example: Interactive Chart

Let's tie it together. Because inline SVG lives in the DOM, each bar can carry data attributes and respond to events — something a chart image could never do. Here's a compact, accessible bar chart with a hover tooltip.

<figure>
  <svg id="sales" width="480" height="280" viewBox="0 0 480 280"
       role="img" aria-labelledby="chartTitle chartDesc">
    <title id="chartTitle">Monthly sales, 2025</title>
    <desc id="chartDesc">Bar chart; sales peak in April at 55,000.</desc>

    <!-- axis -->
    <line x1="40" y1="240" x2="460" y2="240" stroke="#94a3b8" />

    <!-- bars: height and data live on each rect -->
    <rect class="bar" x="60"  y="140" width="40" height="100" data-month="Jan" data-value="25000" />
    <rect class="bar" x="130" y="100" width="40" height="140" data-month="Feb" data-value="35000" />
    <rect class="bar" x="200" y="60"  width="40" height="180" data-month="Mar" data-value="45000" />
    <rect class="bar" x="270" y="20"  width="40" height="220" data-month="Apr" data-value="55000" />
    <rect class="bar" x="340" y="80"  width="40" height="160" data-month="May" data-value="40000" />
  </svg>
  <div id="tip" class="tip" role="status"></div>
</figure>

<style>
  .bar { fill: #3b82f6; transition: fill .2s; cursor: pointer; }
  .bar:hover, .bar:focus { fill: #f59e0b; }
  .tip { position: absolute; padding: 6px 10px; background: #1e293b; color: #fff;
         border-radius: 6px; pointer-events: none; opacity: 0; transition: opacity .2s; }
</style>

<script>
  const tip = document.getElementById('tip');
  for (const bar of document.querySelectorAll('.bar')) {
    bar.addEventListener('mousemove', (e) => {
      const value = Number(bar.dataset.value).toLocaleString();
      tip.textContent = `${bar.dataset.month}: $${value}`;
      tip.style.left = `${e.pageX + 12}px`;
      tip.style.top  = `${e.pageY - 36}px`;
      tip.style.opacity = '1';
    });
    bar.addEventListener('mouseleave', () => { tip.style.opacity = '0'; });
  }
</script>

Hands-on Exercise

<svg viewBox="0 0 100 100" width="120" role="img" aria-labelledby="logoTitle">
  <title id="logoTitle">Rocket badge logo</title>
  <g class="logo">
    <circle cx="50" cy="50" r="46" fill="#0f172a" />
    <polygon points="50,20 62,55 38,55" fill="#f59e0b" />
    <path d="M42,55 Q50,72 58,55 Z" fill="#ef4444" />
  </g>
</svg>
<style>
  .logo { transform-box: fill-box; transform-origin: center; transition: transform .3s; }
  svg:hover .logo { transform: scale(1.1); }
</style>

Best Practices

Summary & Quiz

📚 Further Reading

• MDN — SVG reference & tutorials
• CSS-Tricks — SVG properties and CSS
• SVGOMG — online SVG optimizer

🚀 What's Next?

SVG is one of the two ways to draw on the web. Next we meet the other: the Canvas API, a pixel-based drawing surface that trades SVG's DOM friendliness for raw rendering speed — perfect for games and heavy animation.