HTML Tutorial

- HTML Global Attribute
- HTML Event Attributes

<svg> Tag in HTML | Scalable Vector Graphics

The <svg> tag in HTML is used to define vector-based graphics. SVG (Scalable Vector Graphics) allows you to create graphics that are resolution-independent and can scale to any size without losing quality.

Key Points on <svg> Tag:

The <svg> tag is used to embed vector graphics in an HTML document.
SVG graphics are defined using XML-based syntax, making them easily scalable.
It allows the creation of complex shapes, paths, and animations.
Unlike raster images (JPEG, PNG), SVG graphics do not lose quality when scaled.
SVG supports both static and animated graphics, making it versatile for web design.
You can manipulate SVG elements using CSS and JavaScript for dynamic effects.

Syntax of <svg> Tag:

Syntax Example

<svg width="100" height="100">
            
        </svg>

Example of <svg> Tag in HTML:

This example demonstrates how to use the <svg> tag to draw a simple rectangle.

Code Example

<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>HTML SVG Tag Example</title>
        </head>
        <body>
            <h1>Simple Rectangle with SVG</h1>
            <svg width="200" height="100">
                <rect x="50" y="20" width="150" height="60" style="fill:blue;stroke:black;stroke-width:2" />
            </svg>
        </body>
        </html>

Output

The <svg> tag provides a powerful way to create scalable, resolution-independent graphics for web design. It is widely used for creating logos, icons, charts, and other graphic elements in web development.