HTML SVG

Introduction

Scalable Vector Graphics (SVG) is an XML-based markup language for describing two-dimensional graphics. SVG is widely used on the web for icons, logos, charts, diagrams, and animations. Because SVG is vector-based, graphics stay sharp at any size or resolution—making it ideal for responsive web design and high-DPI screens.

This tutorial shows how to use SVG inside HTML pages: the basic syntax, common shape elements, styling, animation, accessibility, and complete working examples you can run in the browser.

What You’ll Learn

What Is SVG?

SVG is a vector image format that uses XML to describe shapes, lines, curves, and text. Unlike raster images (PNG, JPG, GIF) which store pixels, SVG stores mathematical paths. Scale an SVG to 10× or shrink it to an icon—edges stay crisp.

Modern browsers render SVG natively. You write SVG markup directly in HTML (or load an .svg file) without plugins or special libraries.

SVG vs Canvas vs Raster Images

Choosing the right graphics format depends on what you need:

• SVG — Vector markup in the DOM. Best for icons, logos, charts, and UI illustrations. Scales perfectly; each shape is selectable and styleable.
• HTML canvas — Bitmap drawn with JavaScript. Best for games, photo filters, and heavy pixel manipulation. See the HTML canvas tag tutorial.
• PNG / JPG / WebP — Fixed-resolution pixels. Best for photographs and complex textures where vector paths would be impractical.

Basic SVG Syntax

An SVG graphic lives inside an <svg> element. That container holds shape elements and optional metadata:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- SVG shape elements go here -->
</svg>

• width / height — size of the SVG viewport on the page (pixels by default).
• xmlns — required namespace when SVG is standalone; browsers accept inline SVG in HTML5 without it, but including it is good practice.
• viewBox — internal coordinate system (covered below for responsive graphics).

Ways to Use SVG in HTML

There are several ways to add SVG to a web page:

• Inline SVG — paste <svg>...</svg> directly in HTML. Full CSS/JS control; best for icons and interactive graphics.
• <img src="logo.svg"> — simple embedding; no DOM access to inner shapes.
• <object data="chart.svg"> — loads external SVG as a separate document; rarely needed today.
• CSS background — background-image: url(icon.svg) for decorative graphics.

This tutorial focuses on inline SVG because it is the most flexible approach for learning and for interactive web apps.

Common SVG Elements

SVG provides dedicated elements for basic shapes and complex paths:

• <svg> — root container for the graphic.
• <rect> — rectangles (optionally with rounded corners via rx/ry).
• <circle> — circles defined by center (cx, cy) and radius (r).
• <ellipse> — ellipses with separate x and y radii.
• <line> — straight line between two points.
• <polyline> — series of connected straight segments (open shape).
• <polygon> — closed shape with multiple sides.
• <path> — arbitrary curves and shapes using path commands (M, L, Q, C, etc.).
• <text> — text labels inside the graphic.

Explore each shape in depth in our dedicated tutorials: SVG Rectangle, SVG Circle, and SVG Path.

SVG Attributes

These presentation attributes appear on most shape elements:

• width and height — dimensions of the SVG canvas (on the root <svg>).
• x and y — position of elements like <rect> from the top-left origin.
• fill — interior color (use none for hollow shapes).
• stroke — outline color.
• stroke-width — thickness of the outline in user units.
• opacity — transparency from 0 (invisible) to 1 (opaque).

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
  <circle cx="60" cy="60" r="40"
          fill="blue" stroke="black" stroke-width="3"/>
</svg>

Responsive SVG with viewBox

The viewBox attribute defines the coordinate system inside the SVG. Pair it with CSS width for graphics that scale with the layout:

<style>
  .icon { width: 100%; max-width: 120px; height: auto; }
</style>

<svg class="icon" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="#6366f1"/>
</svg>

viewBox="min-x min-y width height" maps internal coordinates to the displayed size. The circle above always fills the box proportionally, whether the SVG renders at 48 px or 480 px wide.

Styling SVG

Style SVG elements with presentation attributes directly on the tag, or with CSS classes and selectors:

Inline attributes

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40"
          fill="blue" stroke="black" stroke-width="3"/>
</svg>

External CSS

<style>
  .my-circle {
    fill: green;
    stroke: red;
    stroke-width: 2;
  }
  .my-circle:hover {
    fill: lightgreen;
  }
</style>

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" class="my-circle"/>
</svg>

CSS gives you pseudo-classes (:hover), media queries, and animations on SVG shapes—something you cannot do when SVG is loaded only as an external <img>.

Animating SVG

SVG has built-in animation elements. The SMIL <animate> tag changes an attribute over time (note: SMIL is deprecated in Chrome but still useful for learning; CSS animations are preferred for new projects):

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="30" fill="blue">
    <animate attributeName="cx" from="50" to="150"
             dur="2s" repeatCount="indefinite"/>
  </circle>
</svg>

For production sites, animate with CSS (@keyframes on transform or fill) or JavaScript for full control.

Accessibility Considerations

Make SVG content usable for screen reader users and keyboard navigation:

• Add <title> and <desc> as the first children of <svg> to describe the graphic.
• Use role="img" and aria-labelledby when the SVG conveys meaningful information.
• For decorative icons, hide them with aria-hidden="true" so assistive tech skips them.
• Ensure interactive SVG elements are focusable (tabindex="0") and operable with the keyboard.

<svg width="100" height="100" role="img"
     aria-labelledby="svg-title svg-desc"
     xmlns="http://www.w3.org/2000/svg">
  <title id="svg-title">Blue Circle</title>
  <desc id="svg-desc">A circle with a blue fill and black outline.</desc>
  <circle cx="50" cy="50" r="40" fill="blue" stroke="black" stroke-width="3"/>
</svg>

Examples Gallery

Six examples from a single circle to a full HTML page with multiple shapes. Open Try It Yourself to edit and preview live in the browser.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="60"
          fill="#3b82f6" stroke="#1e3a8a" stroke-width="4"/>
</svg>

<svg width="220" height="120" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="100" height="100" fill="lightblue" stroke="black" stroke-width="2"/>
  <circle cx="170" cy="60" r="40" fill="tomato" stroke="black" stroke-width="2"/>
</svg>

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40"
          fill="blue" stroke="black" stroke-width="3"/>
</svg>

fill="blue"
stroke="black"
stroke-width="3"

<style>
  .my-circle { fill: green; stroke: red; stroke-width: 2; }
  .my-circle:hover { fill: lightgreen; }
</style>

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" class="my-circle"/>
</svg>

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="25" fill="blue">
    <animate attributeName="cx" from="50" to="150"
             dur="2s" repeatCount="indefinite"/>
  </circle>
</svg>

attributeName="cx" — moves left to right
dur="2s" — one cycle takes 2 seconds
repeatCount="indefinite" — loops forever

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Example</title>
  <style>
    .rect-style { fill: lightblue; stroke: black; stroke-width: 2; }
    .circle-style { fill: tomato; stroke: black; stroke-width: 2; }
  </style>
</head>
<body>
  <h1>SVG Example</h1>
  <svg width="220" height="200" xmlns="http://www.w3.org/2000/svg">
    <title>Sample shapes</title>
    <desc>A rectangle, circle, and green curve.</desc>
    <rect x="10" y="10" width="100" height="100" class="rect-style"/>
    <circle cx="170" cy="60" r="40" class="circle-style"/>
    <path d="M10 170 Q 60 140, 110 170 T 210 170"
          fill="none" stroke="green" stroke-width="4"/>
  </svg>
</body>
</html>

CSS classes for rect and circle
<title> and <desc> for accessibility
<path> with quadratic curve (Q) command

🚀 Common Use Cases

• Icons and logos — crisp at any size on retina displays.
• Data charts — bar, line, and pie charts with DOM-accessible segments.
• Maps and diagrams — scalable illustrations for documentation and education.
• Interactive UI — hover states, clickable regions, and animated infographics.
• Responsive illustrations — hero graphics that scale with CSS layout.
• Accessible graphics — labeled shapes for users who rely on screen readers.

💡 Best Practices