SVG

Course 3 · Ch 3

SVG in HTML

Inline vector graphics that are genuinely part of the DOM — stylable with CSS, scriptable with JavaScript, perfectly scalable

Chapter 2 ended by contrasting canvas with SVG. This chapter delivers on that promise — SVG embedded directly in HTML, where every shape is a real DOM element you can select, style, and animate exactly like any other HTML element covered throughout this entire series.

Inline SVG — Genuinely Part of the Document

<svg viewBox="0 0 200 100" width="200" height="100">
  <rect x="10" y="10" width="80" height="50" fill="#e34c26"></rect>
  <circle cx="150" cy="35" r="25" fill="#58a6ff"></circle>
  <text x="10" y="85" font-size="14">Inline SVG</text>
</svg>

Unlike canvas's pixel buffer, every <rect>, <circle>, and <text> here is a genuine, individually inspectable element in the DOM — visible and selectable in DevTools exactly like an ordinary <div> or <p>.

viewBox — The Key to Genuine Scalability

viewBox="0 0 200 100" defines the internal coordinate system (here, 200×100 units) independent of the actual rendered width/height — this is what lets an SVG scale to any size with zero blurring or pixelation, unlike a raster image or canvas content.

Omitting viewBox is the most common reason an SVG "doesn't scale properly" when resized with CSS

Without a viewBox, an SVG's internal coordinates are tied directly to its width/height attributes — resizing it via CSS afterward can crop or distort the content rather than scaling it cleanly. Setting a viewBox once, matching the original drawn dimensions, fixes this category of problem entirely.

Styling SVG with CSS — Exactly Like Any Other Element

<style>
  .my-icon { fill: #3fb950; transition: fill 0.2s; }
  .my-icon:hover { fill: #e34c26; }
</style>

<svg viewBox="0 0 24 24" width="24" height="24" class="my-icon">
  <circle cx="12" cy="12" r="10"></circle>
</svg>

Note fill as the CSS property controlling colour, not color or background — SVG has its own specific set of presentation properties (fill, stroke, stroke-width) that CSS can target directly, alongside the standard properties already familiar from the CSS courses.

Manipulating SVG with JavaScript

const circle = document.querySelector('circle');
circle.setAttribute('r', '40'); // grow the circle
circle.style.fill = '#a371f7'; // or set styles directly, exactly like any HTML element

circle.addEventListener('click', () => {
  console.log('Circle clicked!'); // real DOM events, per-shape
});

This per-element interactivity — a click handler on one specific shape, independent of every other shape on the page — is exactly what canvas content cannot offer at all, since canvas pixels have no individual identity once drawn.

SVG <img> vs Inline SVG

Simple, cacheable as a separate file, but the SVG's internals are completely opaque — no CSS styling of individual shapes, no JavaScript access from the main page at all.

Inline <svg>...</svg>

Full CSS/JS access to every individual shape, but adds to the HTML file's size directly and isn't separately cacheable the way an external file is.

Use inline SVG specifically when you need to style or script individual parts

For a purely decorative icon that never changes, <img src="icon.svg"> is simpler and perfectly adequate. For an icon that needs a hover colour change, an animated logo, or any shape-level interactivity, inline SVG is the only option that actually allows it.

Common SVG Elements Beyond the Basics

<path> — the most powerful and common SVG element, drawing arbitrary curves and lines via a compact "d" attribute path-data string (the same underlying mechanism used by icon libraries and the kanji stroke animations elsewhere on osztromok.com).
<g> — groups multiple shapes together, letting transforms and styles apply to the whole group at once.
<use> — references and reuses a shape defined elsewhere, avoiding duplicating the same path data repeatedly.

Chapter 3 Quick Reference

Inline <svg> — every shape is a real, inspectable DOM element, unlike canvas's opaque pixels
viewBox — defines internal coordinates independent of rendered size; the key to genuine scaling without distortion
SVG presentation properties (fill, stroke, stroke-width) — styled via CSS exactly like standard properties
setAttribute/style/addEventListener — full per-shape JavaScript manipulation, impossible with canvas
<img src="x.svg"> for simple decorative icons; inline SVG when individual shapes need styling/scripting
<path>/<g>/<use> — the building blocks behind most real-world icon sets and complex SVG graphics
Next chapter: Drag and drop API