Skip to main content
WPFSharp Academy
Syllabus
On this page

HTML SVG (Scalable Vector Graphics)

Badar KhalilUpdated September 27, 2026 3 min read
Share X Facebook LinkedIn WhatsApp

HTML SVG (Scalable Vector Graphics)

SVG (Scalable Vector Graphics) is an XML-based markup language for drawing 2D graphics that stay perfectly crisp at any zoom level or screen size — a huge advantage for responsive, high-DPI, and dark/light-theme-aware modern websites.

What Makes SVG Different from Canvas?

Unlike Canvas (pixel-based, drawn imperatively with JavaScript), SVG is vector-based and lives directly in the DOM as real HTML elements. This means every shape can be styled with CSS, animated with CSS transitions, selected with document.querySelector, and given event listeners like any other HTML element — a major reason SVG is trending for icon systems, logos, and interactive data dashboards.

Basic SVG Syntax

An SVG image starts with the <svg> tag, which defines a coordinate system using the viewBox attribute for responsive scaling.

Code
<svg width="200" height="200" viewBox="0 0 200 200">
  <circle cx="100" cy="100" r="80" fill="dodgerblue" />
</svg>

Common SVG Shape Elements

  • <rect> — rectangles, with optional rx/ry for rounded corners
  • <circle> — circles using cx, cy, r
  • <ellipse> — ovals using rx and ry
  • <line> — a straight line between two points
  • <polygon> — a closed multi-sided shape from a list of points
  • <path> — the most powerful element, drawing any custom shape using path commands
Code
<rect x="10" y="10" width="120" height="80" rx="15" fill="tomato" />
<polygon points="100,10 150,190 50,190" fill="gold" />

The path Element and d Attribute

The <path> element uses a compact mini-language in its d attribute: M (move to), L (line to), C (curve), and Z (close path) are the most common commands. This is the foundation of nearly every custom icon set used on modern websites.

Code
<path d="M10 10 L90 10 L50 90 Z" fill="seagreen" />

Linear and radial gradients are heavily trending in 2026 UI design. SVG supports rich gradients defined once and reused across shapes.

Code
<svg width="200" height="100">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#6a11cb" />
      <stop offset="100%" style="stop-color:#2575fc" />
    </linearGradient>
  </defs>
  <rect width="200" height="100" fill="url(#grad1)" />
</svg>

Styling SVG with CSS

Because SVG elements live in the DOM, you can style and even animate them directly with regular CSS — including hover effects, a very common pattern for interactive icon buttons.

Code
svg circle:hover {
  fill: crimson;
  transition: fill 0.3s ease;
}

SVG vs Canvas: When to Use SVG

Choose SVG when you need scalability (logos, icons, illustrations), accessibility (screen readers can read SVG text and titles), or easy CSS/JS interactivity on a smaller number of shapes. Choose Canvas for pixel-heavy, high-object-count scenes like games or real-time visualizations.

Live Example

Edit the shapes, colors, or gradient stops below to see SVG update instantly.

Try it Yourself HTML
Output

Press Run to execute.

Try it Yourself HTML
Output

Press Run to execute.

Try it Yourself JAVASCRIPT
Output

Press Run to execute.

Exercise: Build an SVG Badge IconHTML

Create an SVG badge icon: a circle background filled with a linear gradient, and a star-like shape (use polygon or path) centered inside it in a contrasting color.

Try it Yourself HTML
Output

Press Run to execute.

Show expected output 
An SVG containing a gradient-filled circle with a star or badge polygon/path layered on top.

This is a self-check — compare your result with the expected output above.

Was this page helpful?