Table of contents

Introduction

Definition and Usage

Why Use SVG?

Basic SVG Structure

4.1.

Using SVG in HTML

4.2.

Practical Example: Creating a Simple Icon

Advantages of SVG

Differences Between SVG and Canvas

Examples

7.1.

Example 1: Simple SVG Shape

7.2.

Example 2: SVG Circle with Animation

7.3.

Example 3: Interactive SVG using JavaScript

Frequently Asked Questions

8.1.

What is the main advantage of using SVG over PNG or JPEG?

8.2.

When should I use SVG instead of Canvas?

8.3.

Can I animate SVG elements?

Conclusion

Last Updated: Mar 3, 2025

Medium

What is SVG in HTML?

Author Rahul Singh

Do you think IIT Guwahati certified course can help you in your career?

Yes

Introduction

SVG (Scalable Vector Graphics) in HTML is a markup language used to create vector-based graphics that can be scaled without losing quality. It is widely used for creating icons, charts, and complex illustrations on web pages. Unlike raster images, SVG graphics are resolution-independent and can be styled using CSS and manipulated with JavaScript.

In this article, you will learn about SVG, its syntax, features, and how to use it in HTML.

Definition and Usage

SVG stands for Scalable Vector Graphics. It is a type of image format that uses XML (Extensible Markup Language) to define graphics. Unlike raster images like JPEG or PNG, which are made up of pixels, SVG images are made up of paths, shapes, & text. This makes SVG images resolution-independent, meaning they can be scaled up or down without losing quality.

Why Use SVG?

1. Scalability: SVG images look sharp on any screen size or resolution. Whether you’re viewing them on a small smartphone or a large desktop monitor, they remain crisp & clear.

2. Small File Size: SVG files are often smaller in size compared to raster images, especially for simple graphics like icons or logos.

3. Editability: Since SVG is text-based, you can easily edit the code to change colors, shapes, or sizes.

4. Interactivity: SVG supports animations & interactivity using CSS or JavaScript, making it ideal for modern web design.

Basic SVG Structure

Let’s take a simple example of an SVG image:

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

Let’s understand the components of this example:

`<svg>`: This is the root element that defines the SVG image. The `width` & `height` attributes set the size of the image.
`<circle>`: This element creates a circle. The `cx` & `cy` attributes define the center of the circle, while `r` sets the radius.
`stroke`, `stroke-width`, & `fill`: These attributes define the border color, border thickness, & fill color of the circle.

When you open this code in a browser, you’ll see a red circle with a black border.

Using SVG in HTML

You can use SVG in HTML in three ways:

1. Inline SVG: Embed the SVG code directly into your HTML file.

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Inline SVG Example</title>
   </head>
   <body>
       <h1>My SVG Image</h1>
       <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
           <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
       </svg>
   </body>
   </html>

2. SVG as an Image File: Use the `<img>` tag to include an SVG file.

   <img src="example.svg" alt="Example SVG Image">

3. SVG as a Background Image: Use CSS to set an SVG file as a background image.

   .background {
       background-image: url('example.svg');
       background-size: cover;
   }

Practical Example: Creating a Simple Icon

Let’s create a simple SVG icon of a house:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <!-- Roof -->
  <polygon points="50,10 90,50 10,50" fill="brown" />
  <!-- Walls -->
  <rect x="30" y="50" width="40" height="40" fill="lightblue" />
  <!-- Door -->
  <rect x="45" y="70" width="10" height="20" fill="brown" />
</svg>

This code creates a house icon with a brown roof, light blue walls, & a brown door. You can copy & paste this into your HTML file to see it in action.

Advantages of SVG

Scalability: SVG images do not lose quality when resized.
Smaller File Size: Since SVGs are code-based, they take up less space than raster images.
Editable with Code: SVGs can be modified using CSS and JavaScript.
Search Engine Friendly: SVG files contain text data, making them easier for search engines to index.
Interactivity: You can animate and manipulate SVG elements with JavaScript.
Better Performance: Unlike image formats like PNG or JPG, SVGs don’t require HTTP requests, reducing load time.

Differences Between SVG and Canvas

Feature	SVG	Canvas
Type	Vector-based	Raster-based
Scalability	Infinite without quality loss	Becomes pixelated when scaled
Performance	Best for simple graphics	Better for complex, real-time rendering
Interactivity	Supports events on individual elements	Requires manual event handling
Modification	Can be edited via CSS and JavaScript	Requires redrawing

SVG is best for sharp, scalable icons, whereas Canvas is ideal for dynamic, pixel-based animations like games.

Examples

Example 1: Simple SVG Shape

Below is an example of an SVG rectangle:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG Example</title>
</head>
<body>
    <svg width="200" height="100">
        <rect width="200" height="100" style="fill:blue;stroke:black;stroke-width:3" />
    </svg>
</body>
</html>

Output:

A blue rectangle with a black border.

Example 2: SVG Circle with Animation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG Animation</title>
</head>
<body>
    <svg width="200" height="200">
        <circle cx="100" cy="100" r="50" fill="red">
            <animate attributeName="r" from="10" to="50" dur="1s" repeatCount="indefinite" />
        </circle>
    </svg>
</body>
</html>

Output:

A red circle that expands and contracts continuously.

Example 3: Interactive SVG using JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive SVG</title>
    <script>
        function changeColor() {
            document.getElementById("myCircle").style.fill = "green";
        }
    </script>
</head>
<body>
    <svg width="200" height="200" onclick="changeColor()">
        <circle id="myCircle" cx="100" cy="100" r="50" fill="blue" />
    </svg>
</body>
</html>

Output:

Clicking the blue circle changes its color to green.

Frequently Asked Questions

What is the main advantage of using SVG over PNG or JPEG?

SVG files are scalable and do not lose quality when resized, making them ideal for responsive web design.

When should I use SVG instead of Canvas?

Use SVG for static vector images like logos and icons, and Canvas for dynamic graphics like real-time charts and games.

Can I animate SVG elements?

Yes, SVG elements can be animated using built-in SVG animations or JavaScript.

Conclusion

In this article, we explored SVG (Scalable Vector Graphics) in HTML, which is used to create and display vector-based graphics like icons, charts, and illustrations. Unlike images in PNG or JPEG formats, SVG is resolution-independent and scales without losing quality. Understanding SVG in HTML helps in creating responsive, high-quality graphics for modern web applications.

Live masterclass

Microsoft SDE Roadmap: Use AI Tools to Succeed

by Pranav Malik

19 May, 2025

01:30 PM

518+ registered

Break into MAANG Data Analyst roles from Non-Tech Profession

by Abhishek Soni

20 May, 2025

01:30 PM

434+ registered

SDE LinkedIn & Naukri Hacks to Get More Recruiter Calls

by Shantanu Shubham

21 May, 2025

01:30 PM

325+ registered

Amazon Data Analyst: Advanced Excel & AI Interview Tips

by Megna Roy

22 May, 2025

01:30 PM

311+ registered

Microsoft SDE Roadmap: Use AI Tools to Succeed

by Pranav Malik

19 May, 2025

01:30 PM

518+ registered

Break into MAANG Data Analyst roles from Non-Tech Profession

by Abhishek Soni

20 May, 2025

01:30 PM

434+ registered

View more events