The **`<svg>` element** in #key# HTML: Hypertext markup language #key# is used to support SVG graphics. SVG graphics include a container that we can use to draw multiple shapes like boxes, paths, text, graphic images, and circles. Almost every latest browser supports this HTML tag.

#    
## What is SVG?
* SVG is an abbreviation for Scalable Vector Graphics.
* You can use SVG to generate vector-based graphics for the web.
* SVG defines the graphics in *_XML_* format describing 2D-based vector graphics.
* Every attribute or element in SVG files can be animated, as well as recommended by W3C standards.
* SVG also supports DOM and XSL, which are W3C standards.

#    
## Syntax
```html
<svg width="x" height="y"> shape_tags... </svg>
```

#    
## Shapes Element
The `<svg>` element can draw multiple shapes with different attributes. Here are some elements to draw different shapes like circles, ellipses, polygons etc.

Useful Elements for Shapes

align-center

#     
## Demo Code
Using the `<svg>` element in lines *7*, *12*, and *17* generates a circle, rectangle, and star, respectively. The objects or SVG images are of different widths and heights, with a black border and filled red color.

<html>
   <head>
   </head>
   <body>
      <div class="row">
         <div class="column">
            <svg width="100" height="100">
               <circle cx="50" cy="50" r="40" stroke="black" stroke-width="6" fill="red" />
            </svg>
         </div>
         <div class="column">
            <svg width="400" height="100">
               <rect x="50" y="20" rx="20" ry="20" width="75" height="75" style="fill:red;stroke:black;stroke-width:5;" />
            </svg>
         </div>
         <div class="column">
            <svg width="200" height="200">
               <polygon points="101,11 41,199 191,79 11,79 161,199"
                  style="fill:red;stroke:black;stroke-width:5;fill-rule:evenodd;" />
               Alas!, This browser doesn't support inline "SVG".
            </svg>
         </div>
      </div>
   </body>
</html>

/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 25%;
  padding: 8px;
}



codemirror

What is the HTML < svg > element?

The `<svg>` element supports SVG graphics for drawing shapes and supports animation and W3C standards.

Tag	Attribute	Description
<rect />	width and height	Generates multiple shapes like squares, rectangles, etc.
<polygon />	points	Generates polygons like stars, pentagons, etc.
<ellipse />	cx, cy, rx, and ry	Draws ellipse-like shapes.
<circle />	cx, cy, and r	Draws circles of every shape.