2learn

SVG fundamentals

What it is

SVG is a markup language for two-dimensional vector graphics. An SVG document declares shapes — paths, rectangles, circles, lines — inside a coordinate system, and the browser renders them as part of the page’s DOM. Because it is markup, an SVG element can be selected by CSS, respond to events and be generated by script like any other node.

Why it matters

Raster images have a fixed resolution, so they blur when scaled or zoomed, and they cannot take the page’s text colour. An SVG has neither problem: it is resolution-independent and, when inlined, it inherits currentColor so one icon can appear in any theme. It is also far smaller for line art — an icon or a logo is often a few hundred bytes of path data rather than tens of kilobytes of pixels. The reason to learn the fundamentals rather than download files is that the coordinate system and the styling rules are what determine whether a given icon can be recoloured, sized reliably and made accessible.

Core ideas

viewBox defines the coordinate system

The viewBox attribute maps an internal coordinate space onto the element’s rendered size. Drawing in a consistent internal grid — commonly 24 by 24 units — means every icon can be scaled to any pixel size without editing the paths.

<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
  <path d="M4 12h16M12 4v16" fill="none" stroke="currentColor" stroke-width="2" />
</svg>

Without a viewBox, the drawing is pinned to its intrinsic size and does not scale with the element.

Shapes and paths are the whole vocabulary

rect, circle, ellipse, line, polyline, polygon and path cover everything; a path with M, L, C and Z commands describes an arbitrary outline. Most icon files you encounter are a single path, because that is how design tools export a shape.

Fills, strokes and currentColor

fill paints the interior and stroke paints the outline; both accept currentColor, which resolves to the element’s CSS color. That is what lets one icon file serve a dark and a light theme with no duplication.

.icon {
  width: 1.25em;
  height: 1.25em;
  color: var(--icon-colour, currentColor);
}

.icon path { fill: currentColor; }

Sizing in em makes the icon track the surrounding font size, which is usually what an inline icon should do.

Text does not scale like shapes

Anything the user must read should stay as HTML text next to the icon rather than as SVG text or a path outline. Drawn letterforms cannot be translated, searched, or resized by the reader’s font settings.

An inlined SVG is a DOM subtree

Once inlined, its elements are selectable and animatable, and its ids are global to the document — two copies of the same icon will produce duplicate ids unless you scope them. That last point is the usual reason to generate icons as components rather than pasting raw markup.

Practice

Draw an icon you can recolour

Create a 24 by 24 icon from simple shapes, using currentColor for fill and stroke. Place two copies on a page with different text colours, at two different sizes.

Done when: both copies take their parent’s colour with no CSS targeting the SVG, and both scale without blurring.

Fix a scaling bug

Take an SVG that refuses to scale and give it a viewBox that matches its drawing bounds, removing any hard-coded width and height.

Done when: setting a width in em on the parent changes the rendered size smoothly and the aspect ratio is preserved.

Common mistakes

  • Omitting the viewBox — the graphic cannot scale and blurs or crops instead; fix: declare the coordinate space the paths were drawn in.
  • Using fill and stroke inconsistently across an icon set — icons look like they came from different families; fix: pick one convention and apply it to every icon.
  • Hard-coding a colour — the icon cannot be themed and stands out in dark mode; fix: use currentColor and set color in CSS.
  • Drawing text as paths — it cannot be translated, searched or resized by the reader; fix: use real text beside the icon.
  • Pasting the same inline SVG twice with ids inside — duplicate ids make references ambiguous; fix: make the icon a component and scope or omit the ids.

Go deeper

Worked examples

Analytics cookies are set only if you allow them. Nothing is loaded, and nothing is sent, until you choose.