This reference is built into PageRIJ — a live HTML, CSS & SVG authoring and learning environment.

HTML <svg> element

The <svg> element contains an SVG graphic. SVG stands for Scalable Vector Graphics: shapes are described by coordinates and drawing instructions, allowing them to remain sharp when resized. The element can be placed directly in an HTML page, with SVG child elements supplying the shapes, text, and other parts of the drawing.

The element establishes a drawing area called a viewport. Its width and height specify the size of that area on the page, which can also be controlled with CSS. The outer <svg> provides the container; the elements inside it provide the visible graphic.

The viewBox attribute describes the rectangle of drawing coordinates to fit into that viewport. Its four numbers are the starting x-coordinate, starting y-coordinate, width, and height. For example, viewBox="0 0 120 80" describes an area starting at (0, 0) and extending 120 units across and 80 units down. These drawing units need not correspond to the same number of pixels on the page.

The preserveAspectRatio attribute controls how this rectangle fits when the viewport has different proportions. Its default, xMidYMid meet, centres the drawing and scales it uniformly so that the whole viewBox fits. This preserves the shapes' proportions and may leave unused space along two sides.

SVG elements have their own attributes and content rules. In an ordinary HTML page, the browser recognises them when it encounters <svg>. A standalone SVG file uses xmlns="http://www.w3.org/2000/svg" on its root element to identify the SVG namespace; this declaration is optional for SVG written directly in HTML.

A graphic conveying information should have an accessible name. The example uses an SVG <title> referenced by aria-labelledby, with role="img" identifying the drawing as an image. This SVG title names the graphic; it is distinct from the HTML title that names a document. A purely decorative graphic can instead use aria-hidden="true" to omit it from the accessibility tree.

In the example below, the circle’s cx="60" and cy="40" place its centre at (60, 40), the centre of the viewBox. Its r="30" gives a radius of 30 drawing units, and fill="orange" supplies its colour. The circle keeps its proportions as the graphic is resized.

Attributes (commonly used): width, height, viewBox, preserveAspectRatio, id, class, style. SVG also supports presentation attributes such as fill and stroke.

Typical layout:
<svg width="180" height="120"
  viewBox="0 0 120 80"
  role="img" aria-labelledby="drawing-title">
  <title id="drawing-title">Orange circle</title>
  <circle cx="60" cy="40" r="30"
    fill="orange" />
</svg>

Visual representation:
Orange circle