SVG Basics

HTML5 SVG Basics Overview

SVG, or Scalable Vector Graphics, is an XML-based format for drawing shapes, icons, charts, and illustrations directly in the browser. Unlike raster images, SVG graphics stay sharp at any screen size because they are defined with math rather than pixels.

SVG can be embedded inline in HTML, styled with CSS, animated, and manipulated with JavaScript. It is widely used for icons, logos, data visualizations, interactive diagrams, maps, and responsive interface graphics.

Basic Inline SVG Example

<svg
  width="300"
  height="200"
  viewBox="0 0 300 200"
  role="img"
  aria-label="Blue circle on light background">

  <rect
    width="300"
    height="200"
    fill="#f5f7fb" />

  <circle
    cx="150"
    cy="100"
    r="60"
    fill="#2563eb" />
</svg>

This example creates a simple SVG scene with a background rectangle and a centered circle. The viewBox defines the internal coordinate system for scaling.

How SVG Works

SVG uses a coordinate system where the top-left corner is (0, 0) and values increase to the right and downward. Shapes are defined with elements and attributes, then rendered by the browser as vector graphics.

Core SVG Shape Elements

Draw Basic SVG Shapes

<svg
  width="320"
  height="220"
  viewBox="0 0 320 220">

  <rect
    x="20"
    y="20"
    width="120"
    height="80"
    fill="#dbeafe"
    stroke="#2563eb"
    stroke-width="4"
    rx="8" />

  <circle
    cx="230"
    cy="70"
    r="40"
    fill="#22c55e" />

  <line
    x1="20"
    y1="150"
    x2="300"
    y2="150"
    stroke="#111827"
    stroke-width="3" />

  <polygon
    points="60,180 100,120 140,180"
    fill="#f59e0b" />
</svg>

SVG shape elements use simple attributes for position and size. This makes it easy to build icons, badges, and interface graphics without image files.

Create a Custom Path

<svg
  width="300"
  height="180"
  viewBox="0 0 300 180">

  <path
    d="M 20 140
       Q 80 20, 150 90
       T 280 60"
    fill="none"
    stroke="#7c3aed"
    stroke-width="5"
    stroke-linecap="round" />
</svg>

The <path> element is the most flexible SVG shape. Its d attribute uses commands such as move, line, curve, and close path to draw complex graphics.

Add SVG Text

<svg
  width="280"
  height="120"
  viewBox="0 0 280 120">

  <text
    x="20"
    y="40"
    font-size="24"
    font-family="Arial, sans-serif"
    fill="#111827">
    SVG Basics
  </text>

  <text
    x="20"
    y="80"
    font-size="16"
    fill="#4b5563">
  Scalable vector graphics
  </text>
</svg>

SVG text is part of the graphic itself, so it scales cleanly with the rest of the drawing. This is useful for chart labels, badges, and diagram annotations.

Group SVG Elements

<svg
  width="240"
  height="240"
  viewBox="0 0 240 240">

  <g
    fill="#ef4444"
    transform="translate(40, 40)">

    <rect
      x="0"
      y="0"
      width="60"
      height="60"
      rx="8" />

    <rect
      x="80"
      y="0"
      width="60"
      height="60"
      rx="8" />

    <rect
      x="40"
      y="80"
      width="60"
      height="60"
      rx="8" />
  </g>
</svg>

The <g> element groups related shapes so you can move, rotate, scale, or style them together. Groups are especially helpful for icons and reusable components.

Update SVG with JavaScript

<svg
  id="pulseChart"
  width="300"
  height="200"
  viewBox="0 0 300 200">

  <circle
    id="statusDot"
    cx="150"
    cy="100"
    r="20"
    fill="#22c55e" />
</svg>

const statusDot =
  document.getElementById("statusDot");

function setStatus(color, radius) {
  statusDot.setAttribute("fill", color);
  statusDot.setAttribute("r", radius);
}

setStatus("#ef4444", 28);

const svgNamespace =
  "http://www.w3.org/2000/svg";

const svgRoot =
  document.getElementById("pulseChart");

const newLine =
  document.createElementNS(
    svgNamespace,
    "line"
  );

newLine.setAttribute("x1", "40");
newLine.setAttribute("y1", "160");
newLine.setAttribute("x2", "260");
newLine.setAttribute("y2", "160");
newLine.setAttribute("stroke", "#9ca3af");
newLine.setAttribute("stroke-width", "2");

svgRoot.appendChild(newLine);

Inline SVG can be updated like regular DOM elements. When creating new SVG nodes in JavaScript, use document.createElementNS() with the SVG namespace.

Style SVG with CSS

<svg
  class="icon"
  width="120"
  height="120"
  viewBox="0 0 120 120">

  <circle
    class="icon-circle"
    cx="60"
    cy="60"
    r="40" />
</svg>

.icon-circle {
  fill: #2563eb;
  stroke: #1e3a8a;
  stroke-width: 4;
  transition: transform 0.2s ease;
}

.icon:hover .icon-circle {
  transform: scale(1.08);
}

SVG supports CSS for fills, strokes, transforms, transitions, and hover effects. This makes SVG a strong choice for interactive icons and interface elements.

Understand the viewBox Attribute

<!-- Fixed pixel size -->
<svg
  width="200"
  height="100"
  viewBox="0 0 200 100">
  <circle cx="100" cy="50" r="40" fill="#0ea5e9" />
</svg>

<!-- Responsive scaling -->
<svg
  width="100%"
  height="auto"
  viewBox="0 0 200 100"
  preserveAspectRatio="xMidYMid meet">
  <circle cx="100" cy="50" r="40" fill="#0ea5e9" />
</svg>

The viewBox attribute defines the internal coordinate space. Combined with percentage widths, it allows SVG graphics to scale responsively without losing quality.

Ways to Use SVG in HTML

Common SVG Use Cases

• Website icons and interface symbols.
• Logos and brand graphics that must scale cleanly.
• Charts, graphs, and data visualizations.
• Interactive diagrams and product illustrations.
• Maps, timelines, and educational graphics.
• Animated loaders, badges, and progress indicators.

SVG Best Practices

• Use viewBox for responsive and scalable graphics.
• Prefer simple shapes before complex paths when starting out.
• Group related elements with <g> for easier maintenance.
• Add role and aria-label for meaningful graphics.
• Optimize SVG files by removing unnecessary metadata and groups.
• Use CSS classes instead of repeating inline styles everywhere.
• Choose inline SVG when JavaScript interaction is required.

Accessibility Considerations

• Mark decorative SVGs with aria-hidden="true".
• Provide text alternatives for informative graphics.
• Use role="img" and descriptive labels when needed.
• Ensure color contrast is strong enough for strokes and fills.
• Do not rely on color alone to communicate meaning in charts.
• Keep text inside SVG readable at different zoom levels.

Common SVG Mistakes

• Forgetting viewBox and breaking responsive scaling.
• Using raster thinking instead of vector coordinates.
• Creating overly complex paths when simple shapes would work.
• Styling external SVG images with page CSS when not allowed.
• Using document.createElement() instead of createElementNS().
• Exporting bloated SVG files from design tools without cleanup.
• Ignoring accessibility for icons and charts.

SVG vs Canvas

Key Takeaways

• SVG creates scalable vector graphics directly in the browser.
• Use shape elements, paths, text, and groups to build graphics.
• The viewBox attribute is key to responsive SVG design.
• Inline SVG can be styled with CSS and updated with JavaScript.
• SVG is ideal for icons and diagrams, while Canvas is better for pixel-heavy rendering.