---
title: "How to use HTML SVG Tag"  
description: "SVG is used to create a variety of graphical elements, such as lines, shapes, and text, and it supports styling and scripting."  
author: "Ashutosh Patel"  
published: 2024-06-11  
updated: 2024-06-11  
canonical: https://www.mindstick.com/articles/336073/how-to-use-html-svg-tag  
category: "html"  
tags: ["html5", "html tags", "html svg"]  
reading_time: 4 minutes  

---

# How to use HTML SVG Tag

### HTML SVG Tag

The HTML <svg> tag is used to define editable vector images. SVG is an XML-based format for vector graphics, which means it can scale to any size without losing quality. SVG is used to create graphics such as lines, shapes, text, and supports styling and scripting.

**[Basic Structure](https://answers.mindstick.com/qa/37771/mit-scientists-have-designed-a-robotic-system-for-3d-printing-the-basic-structure-of-which)**\
Here is a simple example of an SVG element,

```html
<svg width="100" height="100">
 <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
```

**[Explanation](https://answers.mindstick.com/blog/94/neural-network-simple-explanation-with-real-life-examples)-**

- `<svg>` element Parent container for SVG elements.
- The `width`and `height`[attributes](https://www.mindstick.com/interview/34453/what-are-attributes-in-dot-net) set the shape of the SVG viewport.
- **<circle> Element** Defines circular shape.
- The attributes `cx` and `cy` define the **x** and **y coordinates** of the center of the circle.
- The `r`attribute determines the **radius** of the circle.
- The `Stroke`attribute sets the color of the circle border.
- The `stroke-width` attribute sets the border width.
- `fill` attribute Sets the color to fill the circle.

\
**Common SVG Elements**\
Here are some other common SVG objects.

#### Rectangle

```html
<svg width="200" height="100">
 <rect width="100" height="50" x="50" y="25" fill="blue" />
</svg>
```

`<rect>` element defines a rectangle.

- `width` and `height` attributes set the dimensions.
- `x` and `y` attributes set the position.
- `fill` attribute sets the fill color.

#### Line

```html
<svg width="200" height="100">
 <line x1="0" y1="0" x2="200" y2="100" stroke="black" stroke-width="2" />
</svg>
```

- `<line>`elementdefines a line segment.
- `x1`, `y1` and `x2`, `y2` attributes aset the start and end coordinates.
- `stroke` and `stroke-width` attributes set the color and width of the line.

#### Polygon

```html
<svg width="200" height="100">
 <polygon points="50,0 100,100 0,100" fill="green" />
</svg>
```

- `<polygon>` element defines a closed shape with multiple points.
- `points` sets the coordinates of the vertices.

#### Text

```html
<svg width="200" height="100">
 <text x="10" y="40" font-family="Verdana" font-size="35" fill="blue">Hello</text>
</svg>
```

`<text>` element defines the text.

- `x` and `y` attributes set the position.
- `font-family`, `font-size`, and `fill` attributes set the font style and color.

#### Using SVG with CSS and JavaScript

You can use CSS for styling the SVG elements and add interactivity with [JavaScript](https://www.mindstick.com/forum/12869/how-to-c-sharp-and-javascript-email-validation-regex).

## CSS Example

```css
<svg width="100" height="100">
 <circle cx="50" cy="50" r="40" class="my-circle" />
</svg>
<style>
 .my-circle {
   fill: yellow;
   stroke: blue;
   stroke-width: 5;
 }
</style>
```

## JavaScript Example

```javascript
<svg width="100" height="100">
 <circle id="myCircle" cx="50" cy="50" r="40" fill="red" />
</svg>
<script>
 document.getElementById("myCircle").addEventListener("click", function() {
   this.setAttribute("fill", "green");
 });
</script>
```

#### Embedding SVG in HTML

You can place SVG directly into HTML documents in several ways,

**[Inline SVG](https://www.mindstick.com/forum/159198/how-can-i-apply-a-mask-from-an-inline-svg-that-can-work-in-chrome)**

```html
<div>
 <svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
 </svg>
</div>
```

## External SVG File

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

or

```html
<img src="image.svg" alt="Description of the image">
```

## Example-

Here is a basic example to demonstrates the use of HTML SVG tag,

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic SVG Example</title>
</head>
<body>
  <h1>Basic shapes using HTML SVG</h1>
  <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <!-- Draw a rectangle -->
    <rect x="10" y="10" width="100" height="50" fill="blue" />

    <!-- Draw a circle -->
    <circle cx="150" cy="50" r="40" fill="red" />

    <!-- Draw some text -->
    <text x="10" y="150" font-family="Verdana" font-size="20" fill="black">I am SVG!</text>
  </svg>
</body>
</html>
```

**In the above example-** \
`<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">` This defines the SVG canvas as having a [width and height](https://www.mindstick.com/forum/158680/what-css-property-is-used-to-set-the-width-and-height-of-an-element) of **200 pixels**. the `xmlns`attribute specify the **[XML namespace](https://www.mindstick.com/interview/1284/what-characters-are-allowed-in-an-xml-namespace-prefix)** for the SVG.

## Rectangle

`<straight x="10" y="10" width="100" height="50" fill="blue" />`

`x="10" and y="10"` Place the top left corner of the rectangle at (10, 10).

`width="100" and height="50"` Sets the dimensions of the rectangle.

`fill="blue"` Set the fill color to blue.

## circle

`<circle cx="150" cy="50" r="40" insert="red" />`

`cx="150" and cy="50"` Place the center of the circle at (150, 50).

`r="40"` Set the radius of the circle to 40 pixels.

`fill="red"` Sets the fill color to red.

## Text

`<text x="10" y="150" font-family="Verdana" font-size="20" fill="black">Hello, SVG!</text>`

`x="10" and y="150"` Set the bottom left corner of the text to (10, 150).

`font-family="Verdana"` Set the [font family](https://www.mindstick.com/forum/158669/how-can-change-the-font-family-of-a-text-using-css) to Verdana.

`font-size="20"` Set the font size to 20 pixels.

`fill="black"` Sets the [text color](https://www.mindstick.com/forum/158651/what-is-the-css-property-used-to-change-the-text-color-of-an-element) to black.

## Output-

![How to use HTML SVG Tag](https://www.mindstick.com/mindstickarticle/387bcce6-b4fa-48eb-bf51-cb1f55b7e496/images/515708a6-76ab-4e2b-b30b-8cea78c7ea62.png)

**Also, Read:** [How to fetch data from API using HTML Fetch API](https://www.mindstick.com/articles/336072/how-to-fetch-data-from-api-using-html-fetch-api)

---

Original Source: https://www.mindstick.com/articles/336073/how-to-use-html-svg-tag

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.