Skip to main content
HTML for Beginners
CHAPTER 16 Beginner

HTML SVG Graphics

Updated: May 10, 2026
5 min read

# HTML SVG Graphics

1. Introduction

SVG stands for Scalable Vector Graphics. Unlike a JPG or PNG (which are made of pixels and get blurry when zoomed in), SVG is defined by math. You can zoom in infinitely, and the image will remain perfectly crisp. The best part? You write SVG using HTML-like tags!

2. Learning Objectives

  • Understand the <svg> tag.
  • Draw simple SVG shapes (Circle, Rectangle, Line).
  • Understand why SVGs are superior for icons and logos.

3. Detailed Explanations

The <svg> Container

All SVG shapes must be placed inside an <svg> container tag.
html
123 
<svg width="100" height="100">
    <!-- Shapes go here -->
</svg>

Drawing Shapes

Circle: Defines center X (cx), center Y (cy), and radius (r).

html
123 
<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Rectangle: Defines width, height, and optional rounded corners (rx, ry).

html
123 
<svg width="400" height="110">
    <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

The Power of SVG

Because SVGs are written in code directly inside the HTML document:
  1. 1. They load instantly (no extra network requests).
  1. 2. You can style them using standard CSS!
  1. 3. You can animate them.
html
123456789 
<!-- You can change an SVG&#039;s color using CSS! -->
<style>
  .my-icon { fill: gray; transition: fill 0.3s; }
  .my-icon:hover { fill: red; }
</style>

<svg class="my-icon" width="50" height="50">
    <circle cx="25" cy="25" r="20" />
</svg>

4. Mini Project: SVG Icon Gallery

Instead of using heavy icon fonts, modern developers use inline SVGs.
html
123456789101112 
<div class="icon-gallery">
    <!-- Play Icon -->
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <polygon points="5 3 19 12 5 21 5 3"></polygon>
    </svg>
    
    <!-- Pause Icon -->
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <rect x="6" y="4" width="4" height="16"></rect>
        <rect x="14" y="4" width="4" height="16"></rect>
    </svg>
</div>

5. MCQs

Q1: What does SVG stand for? A) Simple Vector Graphics B) Scalable Vector Graphics C) Standard Visual Graphics D) Screen Vector Graphics *Answer: B*

6. Summary

For photographs, use JPG or WebP. For logos, icons, and UI elements, always use SVG. They are infinitely scalable, incredibly lightweight, and manipulatable via CSS.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter HTML Canvas Basics
Next Chapter HTML Drag and Drop API

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 6

🎥 Related Videos 1