HTML Svg Intro

SVG stands for Scalable Vector Graphics — an XML-based format for describing two-dimensional shapes, lines, curves, and text that a browser can render directly, without ever decoding a grid of pixels. Because an SVG image is drawn from mathematical instructions rather than a fixed bitmap, it can be resized to fit a tiny icon or a full-screen banner without ever looking blurry or “pixelated.” HTML gives you a native <svg> element so you can write vector graphics directly inside a page, style them with CSS, and even manipulate them — making SVG one of the most versatile tools available to a web author.

Overview / How It Works

Most images on the web are raster images: JPEGs, PNGs, and GIFs are stored as a grid of colored pixels. Zoom in far enough and you see the individual squares. SVG takes a completely different approach. Instead of storing pixels, an SVG document stores a list of drawing instructions — “draw a circle at this point with this radius,” “draw a path along these coordinates,” “fill this shape with this color.” The browser’s rendering engine reads those instructions and paints the shapes fresh at whatever size is requested, so the result is always crisp, at any zoom level or screen resolution.

You can bring SVG into a page in two very different ways, and the difference matters:

  • As an external file, referenced with <img src="icon.svg">, as a CSS background image, or with <object>. The browser treats the whole graphic as one opaque image, the same way it treats a PNG. This is simple and cacheable, but you cannot style or script the shapes inside it from the containing page.
  • Inline, by writing the <svg> element and its children directly in your HTML. When the HTML parser encounters <svg>, it switches into a special “foreign content” parsing mode defined by the HTML5 specification, and builds real DOM nodes for every shape — in the SVG namespace (http://www.w3.org/2000/svg) rather than the regular HTML namespace. Because these become genuine nodes in the same document tree as your headings and paragraphs, you can select them with CSS (circle { fill: red; }), read and change their attributes, and attach event listeners, exactly like any other element.

This lesson focuses on the inline approach, since that is where SVG’s real power as a native part of the HTML document lives. Every shape inside <svg> is positioned using its own internal coordinate system, which is independent of the surrounding page’s pixel grid — that is what the viewBox attribute controls, and it is one of the most important ideas to understand about SVG.

Syntax

<svg width="200" height="100" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- shape elements go here, e.g. circle, rect, line, path -->
</svg>
Attribute Purpose
width / height The rendered size of the SVG viewport on the page, in pixels (or another CSS length).
viewBox Four numbers — min-x min-y width height — defining the internal coordinate system that the shapes are drawn in. The browser scales this internal box to fit the element’s rendered width/height, which is what makes the graphic resize cleanly.
xmlns The XML namespace declaration. It is required if the SVG is ever saved and opened as its own standalone .svg file; browsers already know how to handle inline <svg> in an HTML page without it, but including it is good practice and required for standards-valid SVG documents.

Inside the <svg> element you place shape elements such as <rect> (rectangle), <circle>, <ellipse>, <line>, <polygon>, <path> (arbitrary curves and lines), and <text>. Each shape is styled with presentation attributes like fill, stroke, and stroke-width, which can also be set from CSS.

Examples

Example 1: A Simple Circle

<svg width="120" height="120">
  <circle cx="60" cy="60" r="50" fill="tomato" stroke="black" stroke-width="3" />
</svg>

Result: A 120×120-pixel box containing a solid tomato-red circle, 100 pixels across, outlined with a 3-pixel black border. The circle is centered in the box because cx and cy (the center coordinates) are both set to 60, exactly half of the 120-pixel dimensions.

This is the simplest possible SVG drawing: one shape, no viewBox, sized directly in pixels. cx/cy set the center point and r sets the radius, all measured in the SVG’s default coordinate space, which equals the pixel size of the element when no viewBox is given.

Example 2: A Labeled Box

<svg width="220" height="120" viewBox="0 0 220 120">
  <rect x="10" y="10" width="200" height="80" fill="lightblue" stroke="navy" stroke-width="2" />
  <text x="110" y="58" text-anchor="middle" font-size="16">Hello SVG</text>
</svg>

Result: A light-blue rectangle with a dark navy border sits inside the 220×120 canvas, leaving a 10-pixel margin on every side, with the words “Hello SVG” centered horizontally inside it.

Here a viewBox of 0 0 220 120 is set to exactly match the width/height, so one SVG unit equals one pixel. The <text> element’s x is the horizontal center of the rectangle, and text-anchor="middle" tells the browser to center the text on that point rather than starting the text there — without it, the text would start at x="110" and run off to the right.

Example 3: Combining Shapes into a Scene

<svg viewBox="0 0 100 100" width="150" height="150">
  <rect x="0" y="0" width="100" height="100" fill="#eef6ff" />
  <circle cx="70" cy="25" r="12" fill="gold" />
  <path d="M0 90 Q50 50 100 90 L100 100 L0 100 Z" fill="seagreen" />
</svg>

Result: A small 150×150-pixel landscape icon: a pale blue sky fills the background, a gold sun sits in the upper right, and a curved green hill rises across the bottom of the scene.

Notice that the viewBox (0 0 100 100) is smaller than the rendered width/height (150×150) — the browser scales every coordinate up by 1.5× to fit, which is exactly why SVG stays sharp at any size: you are free to define your artwork in convenient round numbers and let the browser handle the resizing. The <path> element’s d attribute is a mini language of its own: M moves the pen without drawing, Q draws a curve, L draws a straight line, and Z closes the shape back to its start.

Under the Hood: How the Browser Handles SVG

  1. The HTML parser reads through the document as usual until it reaches the opening <svg> tag.
  2. Recognizing <svg> as foreign content, the parser switches parsing rules to the SVG namespace for everything until the matching </svg>. Inside this region, elements like circle and rect are created as SVG DOM elements, not HTML elements — this is why, for example, attribute names inside SVG (like viewBox) are case-sensitive, unlike ordinary HTML attributes.
  3. The browser builds a small DOM subtree for the graphic, with the <svg> element as its root and each shape as a child node, exactly as it would build a subtree of <div>s and <span>s elsewhere on the page.
  4. The layout engine computes a transform that maps the internal viewBox coordinate space onto the element’s rendered box, then paints each shape in document order — later shapes are drawn on top of earlier ones, which is why the sun and hill in Example 3 appear on top of the sky rectangle rather than being hidden behind it.
  5. Because the shapes are real DOM nodes, the CSS engine applies any matching style rules to them (for example a stylesheet rule targeting svg circle), and any JavaScript on the page can read or change their attributes just like it would for an HTML element.

Common Mistakes

Mistake 1: Leaving a Shape Element Unclosed

SVG shape elements must always be explicitly closed, either with a matching closing tag or a self-closing slash. Forgetting this produces invalid markup:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue">
</svg>

The <circle> tag above is never closed, so the document structure is broken. The fix is to add the self-closing slash (or a separate closing tag):

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

Mistake 2: Using <img> When You Need to Style the Shapes

Loading an SVG file through <img> is perfectly valid HTML, but it is the wrong tool when you need CSS or script access to the shapes inside it:

<img src="chart.svg" width="200" height="150" alt="Sales chart">

Because the browser treats an <img>-loaded SVG as one opaque image, a stylesheet rule like circle { fill: red; } on the containing page has no effect on anything inside chart.svg. If the shapes need to be styled, colored dynamically, or animated from the page, embed the markup inline instead so it becomes part of the page’s own DOM:

<svg width="200" height="150" viewBox="0 0 200 150">
  <rect x="20" y="20" width="60" height="100" class="bar" />
  <rect x="100" y="50" width="60" height="70" class="bar" />
</svg>

With this version, a rule such as .bar { fill: steelblue; } in a stylesheet will correctly color both bars, because they are ordinary elements in the page’s own document tree.

Best Practices

  • Choose inline <svg> when shapes need to be styled with CSS or manipulated dynamically; choose an external file with <img> or a CSS background when the graphic is static and simple, since external files can be cached separately by the browser.
  • Always include a viewBox so the artwork scales predictably instead of being clipped or distorted when its rendered size changes.
  • Give meaningful, non-decorative SVG graphics a <title> element as their first child so assistive technology can announce what the image represents; purely decorative graphics should be marked aria-hidden="true".
  • Keep coordinate numbers in a viewBox as simple, round values (like 0 0 100 100) so the drawing instructions stay easy to read and maintain.
  • Reserve actual colors, fonts, and visual polish for CSS rather than hardcoding every presentation attribute inline, the same way you would separate style from structure in regular HTML.
  • Remember this is an HTML topic: SVG can be scripted with JavaScript and animated with CSS, but those techniques belong to their own courses — here the focus is on correct, well-formed markup.

Practice Exercises

  1. Write an inline <svg> that draws a single rectangle 150 pixels wide and 80 pixels tall, filled light gray with a 2-pixel black border.
  2. Build a simple “traffic light”: an <svg> with a viewBox of 0 0 60 150 containing a dark gray background rectangle and three stacked circles colored red, yellow, and green.
  3. Take a graphic currently referenced as <img src="logo.svg" alt="Logo"> and rewrite it as an inline <svg> containing a couple of basic shapes, so that its fill colors could later be changed from a stylesheet.

Summary

  • SVG (Scalable Vector Graphics) describes images as shapes and coordinates rather than pixels, so it scales to any size without blurring.
  • The <svg> element can be embedded inline in HTML, where the browser builds real DOM nodes for it in the SVG namespace.
  • Inline SVG can be styled with CSS and manipulated like any other DOM content; SVG loaded via <img> is treated as one opaque image and cannot be styled from the page.
  • The viewBox attribute defines the internal coordinate system and is what allows an SVG graphic to scale cleanly to its rendered width and height.
  • Common shapes include <rect>, <circle>, <ellipse>, <line>, <polygon>, <path>, and <text>, all of which must be properly closed like any other markup.
  • Later shapes in the document are painted on top of earlier ones, so layering order in the markup determines what appears in front.