When should you choose SVG over Canvas?

Choose SVG for UI icons, company logos, interactive maps, and illustrations with moderate element counts where individual shapes need CSS styling or click events. Choose Canvas for high-frame-rate games or rendering millions of data points.

Topic 50 of 57 10. Advanced HTML Topics Interactive Tutorial

SVG in HTML: What It Is, How to Use, and Examples

12 mins read Last updated: 12 Nov 2026 18,100 views

HTML Editor HTML Cheat Sheet 0.00%

On This Page0 sectionsQuick jump to subtopic

Topic Overview & Definition

Key Question

What is SVG in HTML and how do inline vector graphics provide infinitely sharp, animatable icons?

Direct Answer & Overview

SVG (Scalable Vector Graphics) is an XML-based markup format for describing two-dimensional vector graphics. Unlike pixel-based PNG or JPG formats, SVGs use mathematical vectors, allowing graphics to scale to any resolution without pixelation. In HTML5, SVGs can be embedded inline directly inside the HTML markup, enabling CSS styling and JavaScript animation.

Comprehensive Step-by-Step Concepts

1) Why SVG Outperforms Raster Images: Raster images (JPG, PNG) store fixed grids of colored pixels, becoming blurry when magnified. SVGs store geometric coordinates (points, lines, curves, colors), remaining crisp at any zoom level or screen density. 2) Inline SVG vs Tag Embedding: - Embedding:

. Cached by browser, but cannot be styled with CSS. - Inline Embedding: directly in HTML. Allows CSS hover effects (fill, stroke), CSS animations, and direct JavaScript DOM manipulation. 3) Fundamental SVG Shape Elements: - : Draws rectangles with x, y, width, height, and rx (rounded corners). - : Draws circles defined by center (cx, cy) and radius (r). - : Draws straight lines between (x1, y1) and (x2, y2). - : Draws closed multi-sided shapes defined by points. - : The most powerful SVG element, drawing complex bezier curves and paths via 'd' (draw) instructions. 4) The 'viewBox' Attribute: The viewBox="min-x min-y width height" specifies the coordinate system and aspect ratio of the SVG, enabling responsive scaling. 5) Styling with CSS: SVG elements are styled using specialized CSS properties like 'fill' (background color) and 'stroke' (border color and width).

Runnable HTML5 Code Example & Practical Implementation

index.html

HTML Editor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline SVG Showcase</title>
    <style>
        .icon-hover { cursor: pointer; transition: 0.3s; }
        .icon-hover:hover circle { fill: #2563eb; }
        .icon-hover:hover path { stroke: #ffffff; }
    </style>
</head>
<body>
    <h2>Inline Scalable Vector Graphics (SVG)</h2>

    <!-- Scalable Checkmark Badge Icon -->
    <svg class="icon-hover" width="120" height="120" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <!-- Background Circle -->
        <circle cx="50" cy="50" r="45" fill="#dcfce7" stroke="#16a34a" stroke-width="4" />
        <!-- Checkmark Path -->
        <path d="M 30 50 L 45 65 L 70 35" fill="none" stroke="#16a34a" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" />
    </svg>

    <p>Hover over the SVG icon above to see live CSS fill and stroke transitions.</p>
</body>
</html>

Key Takeaways, Best Practices & Standards

Best Practice & Standards

Always specify viewBox for responsive scaling, use inline SVG when you need CSS hover/animation, and sanitize user-uploaded SVG files.

Common Technical & Interview Questions

Q1: What does the 'viewBox' attribute do in an SVG?

A1: The 'viewBox' defines the internal coordinate system and aspect ratio of the SVG canvas. It allows the SVG to scale responsively to fit any outer width and height without distorting the internal shapes.

Q2: What is the security risk of embedding untrusted third-party SVG files?

A2: Because SVG is XML and supports embedded