HTML Graphics

HTML SVG Basics

SVG (Scalable Vector Graphics) lets you draw resolution-independent shapes, icons, charts and illustrations directly in your HTML using plain XML markup. Because SVG is text, it is searchable, styleable with CSS, scriptable with JavaScript, and stays crisp at any zoom level. This page covers what SVG is, how vector graphics differ from raster images, the core shape elements, and when SVG is the right tool versus the <canvas> element.

What is SVG?

SVG is an XML-based markup language for describing two-dimensional vector graphics. Instead of storing a grid of pixels like a JPG or PNG, an SVG file stores mathematical descriptions of shapes: "a circle of radius 40 at (60, 60), filled red." The browser renders those descriptions to pixels at draw time, so the image is recalculated every time it is displayed and never looks blurry, no matter the screen resolution or zoom level.

You can embed SVG in an HTML document three ways: inline (an <svg> element written directly in the HTML, which is the most flexible because CSS and JS can reach into it), as an <img src="logo.svg"> reference, or as a CSS background-image. Inline SVG is used throughout this tutorial.

Vector vs Raster Graphics

Aspect	Vector (SVG)	Raster (PNG / JPG)
Stored as	Shapes and math (paths, coordinates)	A grid of coloured pixels
Scaling	Infinitely sharp at any size	Blurry / pixelated when enlarged
File size	Small for flat shapes, logos, icons	Grows with resolution and detail
Editable	Each shape editable via code / CSS / JS	Only whole-pixel editing
Best for	Logos, icons, charts, diagrams, line art	Photographs, complex textures
Animation	CSS / SMIL / JS per-element	Frame-based only

The <svg> Element

Every SVG drawing lives inside an <svg> root element. Two attributes matter most: the physical size (width and height, or CSS sizing) and the viewBox, which defines the internal coordinate system. A viewBox of "0 0 100 100" means "the visible canvas is 100 units wide and 100 units tall," and those units are then scaled to whatever CSS size you give the element.

An empty, sized SVG canvas

<svg width="200" height="200" viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg">
  <!-- shapes go here; coordinates run 0..100 -->
</svg>

ℹ️

The internal coordinate system's origin (0, 0) is the TOP-LEFT corner. X grows to the right and Y grows DOWNWARD, the same as most screen graphics.

Basic Shapes

SVG ships with a small set of primitive shape elements. Each is a self-contained tag with geometry attributes; you style them with fill (interior colour) and stroke (outline colour).

<rect> - a rectangle, positioned with x/y and sized with width/height (rx/ry round the corners).
<circle> - a circle, centred at cx/cy with radius r.
<ellipse> - an oval, centred at cx/cy with radii rx and ry.
<line> - a straight line between (x1, y1) and (x2, y2); needs a stroke to be visible.
<polyline> - a connected series of straight segments through a list of points (not auto-closed).
<polygon> - like polyline but automatically closed back to the first point.
<path> - the most powerful shape: an arbitrary outline described by the d attribute (move, line, curve, arc commands).
<text> - renders characters as vector glyphs at position x/y.

A Runnable SVG Example

This single SVG combines a rounded rectangle, a circle, a line, a triangle (polygon), a curved path and some text. Paste it into any HTML file and open it in a browser.

Multiple shapes in one SVG

<svg width="320" height="180" viewBox="0 0 320 180"
     xmlns="http://www.w3.org/2000/svg">

  <!-- rounded rectangle -->
  <rect x="10" y="10" width="90" height="60" rx="10"
        fill="#e0f2fe" stroke="#0284c7" stroke-width="3" />

  <!-- circle -->
  <circle cx="160" cy="40" r="30" fill="#fca5a5" />

  <!-- straight line -->
  <line x1="220" y1="10" x2="300" y2="70"
        stroke="#16a34a" stroke-width="4" />

  <!-- triangle via polygon -->
  <polygon points="60,160 20,110 100,110" fill="#fde68a" />

  <!-- smooth curve via path -->
  <path d="M 140 150 Q 200 90 280 150" fill="none"
        stroke="#7c3aed" stroke-width="4" />

  <!-- vector text -->
  <text x="160" y="120" text-anchor="middle"
        font-family="sans-serif" font-size="16" fill="#111">
    Hello SVG
  </text>
</svg>

When to Use SVG vs Canvas

SVG and <canvas> both draw graphics, but they work very differently. SVG builds a retained scene graph of DOM elements you can inspect and restyle; Canvas gives you an immediate-mode pixel buffer you paint into with JavaScript and then forget.

Choose SVG when...	Choose Canvas when...
You have a modest number of shapes (icons, charts, diagrams)	You render thousands of objects or per-pixel effects
Shapes must scale crisply at any resolution	You are doing games, particle systems or image processing
You want CSS styling, hover states and click handlers per shape	Performance of a fast redraw loop matters more than DOM access
You need accessibility and text that is real, selectable text	You are manipulating photographs pixel by pixel
You want easy animation of individual elements	You are drawing a continuously changing frame every animation tick

💡

Rule of thumb: SVG for scalable, interactive, document-like graphics; Canvas for high-volume, fast-changing, pixel-level rendering.