HTML SVG

Introduction:

SVG stands for Scalable Vector Graphics. It is used to define vector-based graphics for the web. SVG is built directly into the browser to be interactive and animated, scalable to any size without losing quality, perfect for responsive design.

Key SVG Elements and Attributes:

1. SVG Container

The <svg> element is the container for all SVG shapes. It can contain a variety of shape elements like rectangles, circles, lines, text, etc.

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

2. Drawing Rectangles

Use the <rect> element to draw rectangles.

    <svg width="100" height="100">
        <rect x="10" y="10" width="80" height="80" fill="blue" />
    </svg>
                

3. Drawing Circles and Ellipses

The <circle> and <ellipse> elements represent circles and ellipses.

    <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" fill="red" />
    </svg>
                

4. Adding Lines and Polylines

Create lines using the <line> element and polylines with the <polyline> element.

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

5. Displaying Text

Integrate text within SVG using the <text> element, adjustable with style attributes.

    <svg width="200" height="100">
        <text x="10" y="40" font-family="Verdana" font-size="35" fill="black">SVG Text</text>
    </svg>