HTML <svg> Tag

The HTML <svg> tag is used to define Scalable Vector Graphics (SVG), which are XML-based graphics that can be scaled without losing quality. SVGs are resolution-independent, making them ideal for creating responsive and interactive graphics like icons, charts, illustrations, and animations directly within an HTML document.

The <svg> element can contain various graphical elements, such as shapes, text, and paths, along with attributes to style and animate them.

Basic Syntax of HTML <svg> Tag

The basic structure of the <svg> tag is:

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

The width and height attributes define the size of the SVG canvas, and graphical elements are placed inside the <svg> element.

Example of a Simple SVG

Here’s an example of an SVG that contains a circle, rectangle, and text:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Simple SVG Example</h2>

        <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
            <rect x="10" y="10" width="100" height="50" fill="blue" />
            <circle cx="150" cy="50" r="30" fill="red" />
            <text x="50" y="150" font-size="20" fill="green">Hello SVG</text>
        </svg>

    </body>
</html>
Example of a Simple SVG

Explanation: This SVG creates a blue rectangle, a red circle, and a green text label. The elements are positioned on the canvas using coordinates and dimensions.

Attributes of HTML <svg> Tag

  • width: Specifies the width of the SVG canvas.
  • height: Specifies the height of the SVG canvas.
  • viewBox: Defines the coordinate system and scaling for the SVG.
  • xmlns: Specifies the XML namespace, usually http://www.w3.org/2000/svg.
  • fill: Sets the default fill color for shapes.
  • stroke: Defines the color and width of the outline for shapes.

These attributes allow you to customize and control the SVG canvas and its elements effectively.

Using <svg> for Responsive Graphics

You can use the viewBox attribute to make SVGs responsive:

</>
Copy
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="100%" height="100%">
    <circle cx="100" cy="100" r="50" fill="purple" />
</svg>
Using <svg> for Responsive Graphics

Explanation: The viewBox attribute ensures that the SVG scales proportionally, adapting to different screen sizes without distortion.

Styling SVG with CSS

SVG elements can be styled with inline attributes or external CSS:

</>
Copy
<style>
    circle {
        fill: orange;
        stroke: black;
        stroke-width: 2px;
    }
</style>

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
    <circle cx="100" cy="100" r="50" />
</svg>
Styling SVG with CSS

Result: The circle is styled with an orange fill, a black border, and a stroke width of 2px using CSS.

Animation in SVG

SVGs support animations using the <animate> or <animateTransform> elements:

</>
Copy
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
    <circle cx="100" cy="100" r="50" fill="blue">
        <animate attributeName="r" from="10" to="50" dur="2s" repeatCount="indefinite" />
    </circle>
</svg>

Explanation: This animation makes the circle grow and shrink continuously by changing its radius (r) over 2 seconds.

Practical Applications of the <svg> Tag

  • Icons: Create resolution-independent icons for websites and applications.
  • Charts and Graphs: Use SVG to render dynamic or interactive data visualizations.
  • Illustrations: Include responsive and scalable vector graphics for web designs.
  • Animations: Add engaging, animated elements for interactivity and design.
  • Custom UI Components: Use SVG for buttons, sliders, and other custom interface elements.

The <svg> tag is a powerful tool for creating flexible, scalable, and interactive graphics directly in the browser.