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  element in HTMLHypertext markup language 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.  

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.