The
<svg>tag is used to embed Scalable Vector Graphics (SVG) directly inside an HTML document.
SVG graphics are resolution-independent, meaning they scale without losing quality and are ideal for icons, diagrams, charts, and illustrations.
SVG elements are part of the HTML5 specification and work seamlessly with CSS and JavaScript.
Syntax
<svg width="width" height="height">
<!-- SVG shapes go here -->
</svg>Attributes
| Attribute | Description |
|---|---|
width | Defines the width of the SVG canvas |
height | Defines the height of the SVG canvas |
viewBox | Defines the coordinate system of the SVG |
xmlns | Defines the SVG XML namespace |
fill | Defines fill color (can be overridden per shape) |
stroke | Defines stroke color |
stroke-width | Defines stroke thickness |
id, class, style | Global attributes |
Example
<!DOCTYPE html>
<html>
<head>
<title>SVG Tag Example</title>
</head>
<body>
<h2>SVG Example</h2>
<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="180" height="130"
fill="lightblue" stroke="black" stroke-width="2"/>
<text x="50" y="80" fill="black" font-size="16">Hello SVG</text>
</svg>
</body>
</html>Output
Browser Output
A light-blue rectangle with black border appears, containing the text “Hello SVG” inside it.
SVG graphics are sharp at any zoom level.
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ⚠️ Partial |
SVG renders natively in modern browsers without any plugins.
IE9 partially support SVG tag
SVG Elements Reference
Basic Shape Elements
| SVG Element | Purpose / Description |
|---|---|
<rect> | Draws rectangles and squares |
<circle> | Draws circles |
<ellipse> | Draws ellipses (oval shapes) |
<line> | Draws a straight line |
<polyline> | Draws connected straight lines |
<polygon> | Draws closed multi-sided shapes |
Drawing & Text Elements
| SVG Element | Purpose / Description |
|---|---|
<path> | Draws complex shapes using path commands |
<text> | Displays text inside SVG |
<tspan> | Styles or positions parts of SVG text |
Grouping & Reusability Elements
| SVG Element | Purpose / Description |
|---|---|
<g> | Groups multiple SVG elements |
<defs> | Stores reusable definitions |
<use> | Reuses elements defined in <defs> |
<symbol> | Defines reusable symbols |
Gradient & Color Effects Element
| SVG Element | Purpose / Description |
|---|---|
<linearGradient> | Creates linear color gradients |
<radialGradient> | Creates circular color gradients |
<stop> | Defines gradient color stops |
Filters & Effects (Advanced)
| SVG Element | Purpose / Description |
|---|---|
<filter> | Defines graphical effects |
<feGaussianBlur> | Applies blur effect |
<feOffset> | Moves image position |
<feColorMatrix> | Color transformations |
Animation Elements (SVG SMIL)
| SVG Element | Purpose / Description |
|---|---|
<animate> | Animates SVG attributes |
<animateTransform> | Animates transformations |
<animateMotion> | Animates movement along a path |
Metadata & Interaction
| SVG Element | Purpose / Description |
|---|---|
<title> | Tooltip / accessibility text |
<desc> | Description for screen readers |
<a> | Creates clickable links in SVG |
Notes
- SVG graphics are DOM elements, so they can be styled with CSS and manipulated with JavaScript.
- SVG is different from
<canvas>— SVG is vector-based, canvas is pixel-based. - Inline SVG is preferred over image-based SVG for better interactivity and styling.
Conclusion
The <svg> tag enables powerful, scalable, and interactive vector graphics in HTML.
It is an essential modern web technology for icons, visualizations, and responsive design.
