Understanding SVG Tag in HTML

Understanding SVG Tag in HTML

5 mins readComment
Esha
Esha Gupta
Associate Senior Executive
Updated on Apr 8, 2024 13:21 IST

Do you know the secret to crisp and scalable web graphics? It lies in the SVG tag in HTML! This powerful tool allows for the creation of vector-based graphics, ensuring that your images look sharp at any size, from tiny icons to large banners. Let's understand more.

In HTML (Hypertext Markup Language), tags are the basic building blocks used to create web pages. They are used to define and structure the content of a webpage. In this blog, we will dive deeper into SVG tag in HTML.

Span Tag in HTML
Span Tag in HTML
Have you ever wondered how web developers style or manipulate specific parts of a webpage's text without affecting the whole document? This is where the tag in HTML comes into...read more

All About br Tag in HTML
All About br Tag in HTML
Have you ever wondered how to create a simple line break in your HTML content? The tag is your solution. It's a self-closing element used to insert line breaks,...read more

Learning div Tag in HTML
Learning div Tag in HTML
Have you ever wondered what keeps web pages organized and styled consistently? The HTML tag plays a crucial role in this. It's a versatile, block-level element used primarily as...read more

Learning ul Tag in HTML
Learning ul Tag in HTML
Have you ever wondered how to organize items on a webpage without any specific order neatly? The HTML tag is the solution, designed to create unordered lists with bullet...read more

All About meta Tag in HTML
All About meta Tag in HTML
Have you ever wondered how web pages communicate important information to browsers and search engines? HTML tags play a pivotal role in this process. They reside in the head...read more

Table of Content

 

What is an SVG Tag in HTML?

The <svg> tag in HTML is used to define Scalable Vector Graphics (SVG) in an HTML document. SVG is an XML-based vector image format that allows for the creation of two-dimensional graphics. These graphics can be static, dynamic, or animated. The SVG format is particularly beneficial for graphics that need to scale without losing quality, such as logos, charts, and other complex drawings.

20+ Web Designer Interview Questions and Answers for 2024
20+ Web Designer Interview Questions and Answers for 2024
Are you a budding web designer preparing for your interviews? If you are, then you are at the right place! In this blog, you will find 20+ web designer interview...read more

Syntax of SVG Tag in HTML


 
<svg width="width_value" height="height_value">
<!-- SVG shapes and elements go here -->
</svg>
Copy code
In the syntax above, we have

1. width and height attributes specify the size of the SVG container.
2. Inside the <svg> tag, you can use various elements to draw shapes:

  • <circle> for circles.
  • <rect> for rectangles.
  • <line> for straight lines.
  • <path> for complex shapes and paths.
  • <text> for text.

Each of these elements has its own set of attributes to define its appearance. 

Usage of HTML SVG Tag with Examples

Let's see some examples showing the usage of the SVG tag in HTML.

Example 1: Creating a Circle

Problem Statement: Design a simple web page that displays a blue circle in the centre.


   
<!DOCTYPE html>
<html>
<head>
<title>SVG Circle Example</title>
</head>
<body>
<!-- SVG element to draw a circle -->
<svg width="100" height="100">
<!-- Circle with center (cx,cy), radius (r), and blue fill color -->
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>
</body>
</html>
Copy code

Output

 

Example 2: Drawing a Rectangle

Problem Statement: Create an HTML page that shows a red rectangle.


 
<!DOCTYPE html>
<html>
<head>
<title>SVG Rectangle Example</title>
</head>
<body>
<!-- SVG element to draw a rectangle -->
<svg width="200" height="100">
<!-- Rectangle with position (x,y), width, height, and red fill color -->
<rect x="50" y="20" width="100" height="60" fill="red" />
</svg>
</body>
</html>
Copy code

Output

 

Example 3: Creating a Line

Problem Statement: Display a diagonal line across the SVG canvas.


 
<!DOCTYPE html>
<html>
<head>
<title>SVG Line Example</title>
</head>
<body>
<!-- SVG element to draw a line -->
<svg width="200" height="100">
<!-- Line from (x1,y1) to (x2,y2) with black stroke color -->
<line x1="0" y1="0" x2="200" y2="100" stroke="black" />
</svg>
</body>
</html>
Copy code

Output

 

Example 4: Adding Text

Problem Statement: Add a text label inside an SVG element.


 
<!DOCTYPE html>
<html>
<head>
<title>SVG Text Example</title>
</head>
<body>
<!-- SVG element to add text -->
<svg width="200" height="100">
<!-- Text positioned at (x,y) with specified font size -->
<text x="10" y="50" font-size="20">Hello SVG</text>
</svg>
</body>
</html>
Copy code

Output

 

Example 5: Combining Shapes

Problem Statement: Combine multiple SVG shapes to create a simple face.


 
<!DOCTYPE html>
<html>
<head>
<title>SVG Face Example</title>
</head>
<body>
<!-- SVG element to draw a face -->
<svg width="200" height="200">
<!-- Face outline as a circle -->
<circle cx="100" cy="100" r="80" fill="yellow" />
<!-- Two eyes as smaller circles -->
<circle cx="70" cy="85" r="10" fill="black" />
<circle cx="130" cy="85" r="10" fill="black" />
<!-- A smile as a path -->
<path d="M 70 130 Q 100 150 130 130" stroke="black" fill="transparent" />
</svg>
</body>
</html>
Copy code

Output

 

Top 62+ HTML Interview Questions and Answers for 2024
Top 62+ HTML Interview Questions and Answers for 2024
Here are the HTML interview questions most likely to be asked during the interviews. This list also covers some HTML CSS interview questions to help you start or move ahead...read more

How to Create HTML Forms – Tutorial with Examples
How to Create HTML Forms – Tutorial with Examples
HTML forms or web forms are a powerful medium for interacting with users. They have interactive controls for submitting information. Web forms enable us to collect data or personal information...read more

HTML Attributes Explained with Examples
HTML Attributes Explained with Examples
HTML attributes provide additional information about HTML elements. They are used to modify the behavior or appearance of an element. Attributes are specified within the opening tag of an element...read more

Creating HTML Links – Tutorial With Examples

HTML Lists: Ordered and Unordered Lists Explained with Examples
HTML Lists: Ordered and Unordered Lists Explained with Examples
This tutorial explains how to create different types of lists: unordered, ordered, and description lists in HTML. In this blog, you will learn what are HTML lists and understand how...read more

Knowing nav Tag in HTML
Knowing nav Tag in HTML
Have you ever wondered how websites organize their menus and links for easy navigation? The HTML tag is the key for this which is specifically designed to define navigation...read more

Mastering Button Tag in HTML
Mastering Button Tag in HTML
Have you ever wondered how interactive buttons on websites are created? They're often made using the HTML tag, which allows developers to add clickable elements for various actions like...read more

All About anchor Tag in HTML
All About anchor Tag in HTML
Have you ever wondered how web pages are interconnected, allowing you to easily click and navigate from one page to another? This is made possible by the HTML anchor ()...read more

Learning body Tag in HTML
Learning body Tag in HTML
Do you know that the tag in HTML is where all the magic of a webpage happens? It's the container that holds everything you see on a web page, including...read more

Key Takeaways

  • The SVG (Scalable Vector Graphics) tag in HTML is used for embedding vector-based graphics in web pages. Unlike raster images (like PNG or JPEG), SVG graphics don't lose quality when scaled, making them ideal for responsive design.

  • SVG code can be written directly within HTML, allowing for easy integration and manipulation. This direct embedding enables web developers to style and interact with SVG elements using CSS and JavaScript, just like other HTML elements.

  • It supports a wide range of visual features, including shapes, paths, text, and complex fill patterns. It's also capable of interactivity and animation, making it a powerful tool for creating dynamic and engaging web graphics.

  • SVGs are text-based and can be made accessible to screen readers, unlike raster/bitmap images. They can also be indexed by search engines, which can be beneficial for SEO.

FAQs

What is the svg tag used for in HTML?

The svg tag is used to embed SVG (Scalable Vector Graphics) content in HTML documents. It allows for the creation and display of vector graphic elements such as shapes, paths, and text directly within HTML, making it useful for high-quality graphics that need to scale cleanly on all types of devices.

How is SVG different from other image formats like JPEG or PNG?

Unlike JPEG or PNG, which are raster graphics and can lose quality when scaled, SVG is a vector format. This means SVG graphics are composed of points, lines, and shapes, not pixels, so they can be resized without losing clarity. SVG is ideal for logos, icons, and other designs that require scalability and crisp display on various screen sizes.

Can SVG be styled with CSS?

Yes, SVG elements can be styled with CSS. Styles can be applied externally or inline within the SVG itself. This includes changing colors, fill, stroke, and applying transformations like rotation or scaling. CSS animations and transitions can also be used to animate SVG elements.

Is SVG supported by all modern browsers?

Yes, all modern web browsers support SVG. This includes browsers like Chrome, Firefox, Safari, and Edge. SVG provides a consistent and accessible way to display vector graphics across different platforms and devices.

How do you embed an SVG graphic in an HTML document?

An SVG graphic can be embedded directly into HTML using the svg tag. The SVG code can be written inside the svg tag. Alternatively, an SVG file can be referenced externally using an img tag, similar to other image formats, or by using CSS background images. However, embedding SVG directly in HTML offers greater flexibility for styling and interaction.

About the Author
author-image
Esha Gupta
Associate Senior Executive

Hello, world! I'm Esha Gupta, your go-to Technical Content Developer focusing on Java, Data Structures and Algorithms, and Front End Development. Alongside these specialities, I have a zest for immersing myself in v... Read Full Bio