Introduction to SVG | Lecture 42

Let’s begin with Lecture 42 of the HTML5 & CSS3 series. Introduction to SVG – Scalable Vector Graphics. This lecture is for absolute beginners; even kids can follow along and understand.

Table of Contents

🎯 Objective:

By the end of this lecture, you will:

Understand what SVG is and why it’s useful
Be able to write basic SVG shapes like circles, rectangles, and paths
Know how to style SVG using CSS and add interactivity with JavaScript
Embed SVG in HTML using different methods
Create a simple interactive SVG logo or icon that responds to clicks or hovers

🖼️ What Is SVG?

SVG stands for Scalable Vector Graphics — it’s a way to draw graphics using XML-based code .

Think of it like this:

If HTML is for text and Canvas is for drawing, then SVG is for scalable, editable, and interactive graphics — like digital drawings that you can zoom in forever and still look sharp!

📐 Why Use SVG?

BENEFIT	DESCRIPTION
Scalable	Looks sharp on all screen sizes (perfect for logos, icons)
Editable	You can edit SVG with code or tools like Illustrator
Responsive	Scales with your layout
Interactive	Can be styled with CSS and controlled with JavaScript
Accessible	Can add labels and titles for screen readers
Small File Size	Often smaller than PNG for simple graphics

🧱 Basic SVG Elements

TAG	PURPOSE
`<svg>`	The container for all SVG content
`<circle>`	Draws a circle
`<rect>`	Draws a rectangle
`<line>`	Draws a straight line
`<polygon>`	Draws a shape with multiple sides
`<path>`	Draws complex shapes using commands like`M`,`L`,`C`,`Z`

💻 Try This: Draw a Smiley Face Using SVG

Let’s create a new HTML file that shows a smiley face SVG that changes when hovered or clicked.

Step 1: Create a New File

In your VS Code project folder (MyFirstWebsite), create a new file named:

svg-smiley.html

Step 2: Add This Code

<!DOCTYPE html>
<html>
<head>
    <title>SVG Smiley Face</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 40px;
            background-color: #f4f4f4;
            text-align: center;
        }

        svg {
            width: 200px;
            height: 200px;
            transition: transform 0.3s ease;
        }

        svg:hover {
            transform: scale(1.2);
        }

        circle:hover {
            fill: #ffcc00;
        }

        .mouth {
            stroke-width: 5;
            stroke: black;
            fill: none;
        }
    </style>
</head>
<body>

    <h2>SVG Smiley Face</h2>

    <svg id="smiley" viewBox="0 0 100 100" onclick="toggleFace()">
        <!-- Face -->
        <circle cx="50" cy="50" r="40" fill="yellow" stroke="black" stroke-width="2"/>

        <!-- Eyes -->
        <circle cx="35" cy="40" r="5" fill="black"/>
        <circle cx="65" cy="40" r="5" fill="black"/>

        <!-- Mouth -->
        <path class="mouth" d="M30 60 Q50 80 70 60" />
    </svg>

    <p id="faceStatus">Click the face to make it sad 😊</p>

    <script>
        let happy = true;

        function toggleFace() {
            let mouth = document.querySelector(".mouth");
            let status = document.getElementById("faceStatus");

            if (happy) {
                // Sad face
                mouth.setAttribute("d", "M30 70 Q50 50 70 70");
                status.textContent = "Now it's sad 😢";
            } else {
                // Happy face
                mouth.setAttribute("d", "M30 60 Q50 80 70 60");
                status.textContent = "Click the face to make it sad 😊";
            }

            happy = !happy;
        }
    </script>

    <p style="margin-top: 30px;"><a href="index.html">Back to Home</a></p>
</body>
</html>

Step 3: Run with Live Server

Right-click the code → Show All Commands → Launch Live Server

🎉 You’ve created a scalable, interactive smiley face using SVG — that changes its mouth when clicked!

💡 Bonus: Style SVG with CSS

You can style SVG elements just like HTML!

Add This CSS:

circle:hover {
    fill: #fff399;
}

path:hover {
    stroke: red;
}

Now when you hover over the face or mouth, it changes color — no JavaScript needed!

💡 Bonus: Add a Button to Toggle SVG Color

Let’s add a button that changes the face color using JavaScript.

Add HTML:

<button onclick="changeColor()">Change Face Color</button>

Add JavaScript:

function changeColor() {
    let face = document.querySelector("circle");
    let randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
    face.setAttribute("fill", randomColor);
}

Now clicking the button gives your smiley a new color — fun and dynamic!

🧪 Try It Yourself!

Make the eyes blink by toggling visibility on click
Add a nose using <ellipse> or <circle>
Use transform="rotate()" to spin the face
Draw a rainbow using multiple <path> elements

🧠 How to Use SVG in HTML

There are several ways to use SVG:

1. Inline SVG in HTML

Just like we did — full control with CSS and JS

2. Using `<img>` Tag

<img src="smiley.svg" alt="Smiley Face">

Fast and simple
Cannot style with CSS or interact with JavaScript

3. Using `<object>` or `<iframe>`

<object data="smiley.svg" type="image/svg+xml"></object>

Good for embedding external SVG
Can interact with JavaScript inside SVG

4. Using CSS Background

div {
    width: 100px;
    height: 100px;
    background-image: url("icon.svg");
}

Great for icons
No interaction possible

✅ Summary of What You Learned Today

CONCEPT	DESCRIPTION
SVG	A scalable, editable, and interactive graphics format
Basic Shapes	`circle`,`rect`,`line`,`polygon`,`path`
ViewBox	Makes SVG responsive and scalable
Styling	Use CSS to style SVG elements
Interactivity	Use JavaScript to change SVG on click or hover
Inline SVG	Easiest way to make SVG interactive and styleable

🚀 Next Lecture Preview:

In Lecture 43 , we’ll explore advanced SVG features — including animations with CSS and JavaScript , filters , and complex paths — so you can build animated icons, logos, and even SVG-based games!

Stay Updated

If you found this information useful, don’t forget to bookmark this page and Share.

HTML5 and CSS3 Compleate Series