HTML 25 💻 svg, circle, polygon and rect - KandZ

SVG (Scalable Vector Graphics) is a powerful way to create resolution-independent graphics directly in HTML. Unlike raster images (JPEG, PNG), SVGs maintain quality at any size and can be styled, animated, and manipulated with CSS and JavaScript.

What is SVG?

SVG is an XML-based markup language for describing two-dimensional vector graphics. It’s perfect for:

Logos and icons
Illustrations and diagrams
Charts and data visualizations
Interactive graphics (hover effects, animations)

Key Benefits:

Benefit	Description
Scalability	No quality loss at any size
Small file size	For simple graphics
Styling	Style with CSS like HTML elements
Interactivity	Support for `onclick`, `onmouseover`, etc.
Accessibility	Can include text and ARIA labels
JavaScript	Can be manipulated with JS

Adding SVG to HTML

There are three ways to include SVG in your HTML:

1. Inline SVG (Recommended)

<svg width="200" height="100" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="yellow" stroke="green" stroke-width="4"/>
</svg>

2. Using `<img>` Tag

<img src="image.svg" alt="Description of SVG image">

3. Using `<object>` Tag

<object type="image/svg+xml" data="image.svg"></object>

Basic SVG Attributes

Attribute	Purpose	Example
`width`	Width of the SVG canvas	`width="200"`
`height`	Height of the SVG canvas	`height="200"`
`viewBox`	Defines the coordinate system	`viewBox="0 0 100 100"`

Understanding `viewBox`:

viewBox = "min-x min-y width height"

The viewBox defines the internal coordinate system
It’s like setting up your own grid
viewBox="0 0 100 100" creates a 100×100 grid regardless of canvas size

Common SVG Shapes

Element	Shape	Key Attributes
`<rect>`	Rectangle	`x`, `y`, `width`, `height`, `rx`, `ry`
`<circle>`	Circle	`cx`, `cy`, `r`
`<ellipse>`	Ellipse	`cx`, `cy`, `rx`, `ry`
`<line>`	Straight line	`x1`, `y1`, `x2`, `y2`
`<polyline>`	Connected line segments	`points`
`<polygon>`	Closed shape	`points`
`<path>`	Complex paths	`d` (commands)

Common Styling Attributes

Attribute	Purpose	Example
`fill`	Fill color of the shape	`fill="blue"` or `fill="#007bff"`
`stroke`	Border/outline color	`stroke="green"`
`stroke-width`	Width of the border	`stroke-width="4"`
`opacity`	Transparency (0–1)	`opacity="0.5"`
`fill-opacity`	Fill transparency	`fill-opacity="0.8"`

The Circle Element `<circle>`

The <circle> element creates circular shapes.

Basic Syntax:

<circle cx="50" cy="50" r="40" fill="yellow" stroke="green" stroke-width="4"/>

Browser Display:
A yellow circle with a green border.

Attributes:

Attribute	Purpose	Example
`cx`	X-coordinate of the center	`cx="50"`
`cy`	Y-coordinate of the center	`cy="50"`
`r`	Radius of the circle	`r="40"`

The Rectangle Element `<rect>`

The <rect> element creates rectangles and squares.

Basic Syntax:

<rect width="150" height="75" x="25" y="12.5" fill="#007bff" stroke="#0056b3" stroke-width="2"/>

Browser Display:
A blue rectangle with a dark blue border.

Attributes:

Attribute	Purpose	Example
`x`	X-coordinate of the top-left corner	`x="25"`
`y`	Y-coordinate of the top-left corner	`y="12.5"`
`width`	Width of the rectangle	`width="150"`
`height`	Height of the rectangle	`height="75"`
`rx`	Corner radius (rounded corners)	`rx="10"`
`ry`	Corner radius (vertical)	`ry="10"`

The Polygon Element `<polygon>`

The <polygon> element creates closed shapes with three or more sides.

Basic Syntax:

<polygon points="100,10 40,180 190,60 10,60 160,180" fill="purple" stroke="green" stroke-width="2"/>

Browser Display:
A purple star shape with a green border.

Attributes:

Attribute	Purpose	Example
`points`	List of x,y coordinate pairs	`points="10,10 100,10 100,100"`

The points attribute is a space or comma-separated list of coordinates:

points="x1,y1 x2,y2 x3,y3 ..."

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG Elements: Circle, Polygon, Rect</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background: #f8f9fa;
            line-height: 1.6;
        }

        h1 {
            color: #007bff;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }

        h2 {
            color: #28a745;
            margin-top: 30px;
            border-left: 4px solid #28a745;
            padding-left: 15px;
        }

        h3 {
            color: #333;
            margin-top: 20px;
        }

        .svg-container {
            background: white;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
            margin: 20px 0;
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            align-items: center;
        }

        .svg-container svg {
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #ddd;
        }

        .example-box {
            background: #e9ecef;
            padding: 15px;
            border-radius: 6px;
            margin: 10px 0;
            border-left: 4px solid #007bff;
            flex: 1;
            min-width: 250px;
        }

        .grid-3 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 15px 0;
        }

        .grid-3 .shape-card {
            background: white;
            padding: 15px;
            border-radius: 8px;
            border: 2px solid #ddd;
            text-align: center;
        }

        .shape-card:hover {
            border-color: #007bff;
        }

        code {
            background: #f4f4f4;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            font-size: 0.95em;
            color: #dc3545;
        }

        pre {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.95em;
            line-height: 1.8;
            margin: 10px 0;
        }

        .reference-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        .reference-table th,
        .reference-table td {
            padding: 12px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .reference-table th {
            background: #007bff;
            color: white;
        }

        .reference-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        .reference-table tr:hover {
            background: #e9ecef;
        }

        .comparison-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin: 15px 0;
        }

        .comparison-card {
            flex: 1;
            min-width: 200px;
            background: white;
            padding: 20px;
            border-radius: 8px;
            border: 2px solid #ddd;
        }

        .comparison-card h3 {
            margin-top: 0;
            padding-bottom: 10px;
            border-bottom: 2px solid #ddd;
        }

        .hover-demo svg {
            transition: transform 0.3s;
        }

        .hover-demo svg:hover {
            transform: scale(1.05);
        }

        .interactive-demo .shape {
            transition: all 0.3s;
        }

        .interactive-demo .shape:hover {
            fill: #ff6b6b;
            stroke: #c92a2a;
            stroke-width: 4;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <h1>SVG: Circle, Polygon, and Rect</h1>

    <!-- ====== SECTION 1: BASIC SVG ====== -->
    <h2>1. Basic SVG with ViewBox</h2>

    <div class="svg-container">
        <div>
            <h3>Without ViewBox</h3>
            <svg width="200" height="100">
                <circle cx="50" cy="50" r="40" fill="yellow" stroke="green" stroke-width="4"/>
            </svg>
            <p><small>200×100 canvas, circle at (50,50)</small></p>
        </div>

        <div>
            <h3>With ViewBox</h3>
            <svg width="200" height="100" viewBox="0 0 100 100">
                <circle cx="50" cy="50" r="40" fill="yellow" stroke="green" stroke-width="4"/>
            </svg>
            <p><small>200×100 canvas, viewBox="0 0 100 100" — circle scales</small></p>
        </div>

        <div class="example-box">
            <h4>🔍 Code:</h4>
            <pre style="background: #f4f4f4; color: #333; padding: 10px; border-radius: 4px; overflow-x: auto;">
                <code>&lt;svg width="200" height="100" viewBox="0 0 100 100"&gt;
                    &lt;circle cx="50" cy="50" r="40" fill="yellow" stroke="green" stroke-width="4"/&gt;
                &lt;/svg&gt;</code>
            </pre>
        </div>
    </div>

    <!-- ====== SECTION 2: CIRCLE ====== -->
    <h2>2. Circle Element</h2>

    <div class="svg-container">
        <svg width="200" height="200" viewBox="0 0 200 200">
            <circle cx="100" cy="100" r="80" fill="#ffc107" stroke="#007bff" stroke-width="5"/>
        </svg>

        <div class="example-box">
            <h4>🔍 Code:</h4>
            <pre style="background: #f4f4f4; color: #333; padding: 10px; border-radius: 4px; overflow-x: auto;">
                <code>&lt;circle cx="100" cy="100" r="80" fill="#ffc107" stroke="#007bff" stroke-width="5"/&gt;</code>
            </pre>
            <ul>
                <li><code>cx="100"</code> — Center X</li>
                <li><code>cy="100"</code> — Center Y</li>
                <li><code>r="80"</code> — Radius</li>
                <li><code>fill="#ffc107"</code> — Yellow fill</li>
                <li><code>stroke="#007bff"</code> — Blue border</li>
                <li><code>stroke-width="5"</code> — Border thickness</li>
            </ul>
        </div>
    </div>

    <!-- ====== SECTION 3: RECTANGLE ====== -->
    <h2>3. Rectangle Element</h2>

    <div class="svg-container">
        <svg width="200" height="150" viewBox="0 0 200 150">
            <!-- Standard rectangle -->
            <rect x="25" y="12.5" width="150" height="75" fill="#007bff" stroke="#0056b3" stroke-width="3"/>

            <!-- Rounded rectangle -->
            <rect x="25" y="12.5" width="150" height="75" fill="none" stroke="#28a745" stroke-width="3" rx="15" ry="15"/>
        </svg>

        <div class="example-box">
            <h4>🔍 Code:</h4>
            <pre style="background: #f4f4f4; color: #333; padding: 10px; border-radius: 4px; overflow-x: auto;">
                <code>&lt;rect x="25" y="12.5" width="150" height="75" fill="#007bff" stroke="#0056b3" stroke-width="3"/&gt;

                &lt;rect x="25" y="12.5" width="150" height="75" fill="none" stroke="#28a745" stroke-width="3" rx="15" ry="15"/&gt;</code>
            </pre>
            <ul>
                <li><code>x="25"</code> — X coordinate</li>
                <li><code>y="12.5"</code> — Y coordinate</li>
                <li><code>width="150"</code> — Width</li>
                <li><code>height="75"</code> — Height</li>
                <li><code>rx="15"</code>, <code>ry="15"</code> — Rounded corners</li>
            </ul>
        </div>
    </div>

    <!-- ====== SECTION 4: POLYGON ====== -->
    <h2>4. Polygon Element</h2>

    <div class="svg-container">
        <svg width="200" height="200" viewBox="0 0 200 200">
            <!-- Triangle -->
            <polygon points="100,10 190,180 10,180" fill="#28a745" stroke="#1e7e34" stroke-width="3"/>

            <!-- Star -->
            <polygon points="100,60 120,150 50,95 150,95 80,150" fill="none" stroke="#dc3545" stroke-width="3"/>
        </svg>

        <div class="example-box">
            <h4>🔍 Code:</h4>
            <pre style="background: #f4f4f4; color: #333; padding: 10px; border-radius: 4px; overflow-x: auto;">
                <code>&lt;!-- Triangle --&gt;
                &lt;polygon points="100,10 190,180 10,180" fill="#28a745" stroke="#1e7e34" stroke-width="3"/&gt;

                &lt;!-- Star --&gt;
                &lt;polygon points="100,60 120,150 50,95 150,95 80,150" fill="none" stroke="#dc3545" stroke-width="3"/&gt;</code>
            </pre>
            <ul>
                <li><code>points="x1,y1 x2,y2 x3,y3 ..."</code></li>
                <li>Triangle: 3 points (100,10), (190,180), (10,180)</li>
                <li>Star: 5 points forming a star shape</li>
            </ul>
        </div>
    </div>

    <!-- ====== SECTION 5: STYLING WITH CSS ====== -->
    <h2>5. Styling SVG with CSS</h2>

    <div class="svg-container" style="flex-direction: column;">
        <div style="display: flex; flex-wrap: wrap; gap: 30px; width: 100%;">
            <div style="flex: 1; min-width: 250px;">
                <h3>With CSS Class</h3>
                <svg width="200" height="200" viewBox="0 0 200 200">
                    <style>
                        .star { fill: purple; stroke: green; stroke-width: 2; }
                        .star:hover { fill: orange; cursor: pointer; }
                    </style>
                    <polygon class="star" points="100,10 40,180 190,60 10,60 160,180"/>
                </svg>
                <p><small>Hover over the star → it changes color!</small></p>
            </div>

            <div style="flex: 1; min-width: 250px;">
                <h3>With Hover Effect</h3>
                <svg width="200" height="200" viewBox="0 0 200 200">
                    <rect x="25" y="25" width="150" height="150" rx="20" fill="#007bff" stroke="#0056b3" stroke-width="3"
                          style="transition: all 0.3s;"
                          onmouseover="this.setAttribute('fill', '#28a745')"
                          onmouseout="this.setAttribute('fill', '#007bff')"/>
                </svg>
                <p><small>Hover over the rectangle → it changes color!</small></p>
            </div>
        </div>

        <div class="example-box" style="width: 100%;">
            <h4>🔍 CSS Code:</h4>
            <pre style="background: #f4f4f4; color: #333; padding: 10px; border-radius: 4px; overflow-x: auto;">
                <code>&lt;style&gt;
                    .star { fill: purple; stroke: green; stroke-width: 2; }
                    .star:hover { fill: orange; }
                &lt;/style&gt;

                &lt;polygon class="star" points="100,10 40,180 190,60 10,60 160,180"/&gt;</code>
            </pre>
        </div>
    </div>

    <!-- ====== SECTION 6: MORE SHAPES ====== -->
    <h2>6. More SVG Shapes</h2>

    <div class="svg-container" style="flex-direction: column; gap: 20px;">
        <div class="grid-3">
            <div class="shape-card">
                <h4>Circle</h4>
                <svg width="120" height="120" viewBox="0 0 120 120">
                    <circle cx="60" cy="60" r="50" fill="#ff6b6b" stroke="#c92a2a" stroke-width="3"/>
                </svg>
            </div>

            <div class="shape-card">
                <h4>Ellipse</h4>
                <svg width="120" height="120" viewBox="0 0 120 120">
                    <ellipse cx="60" cy="60" rx="50" ry="30" fill="#4ecdc4" stroke="#0ca678" stroke-width="3"/>
                </svg>
            </div>

            <div class="shape-card">
                <h4>Rectangle</h4>
                <svg width="120" height="120" viewBox="0 0 120 120">
                    <rect x="20" y="30" width="80" height="60" fill="#ffd93d" stroke="#fab005" stroke-width="3"/>
                </svg>
            </div>

            <div class="shape-card">
                <h4>Rounded Rectangle</h4>
                <svg width="120" height="120" viewBox="0 0 120 120">
                    <rect x="20" y="30" width="80" height="60" rx="15" ry="15" fill="#6c5ce7" stroke="#4a2a9e" stroke-width="3"/>
                </svg>
            </div>

            <div class="shape-card">
                <h4>Triangle</h4>
                <svg width="120" height="120" viewBox="0 0 120 120">
                    <polygon points="60,10 110,100 10,100" fill="#00b894" stroke="#005b4f" stroke-width="3"/>
                </svg>
            </div>

            <div class="shape-card">
                <h4>Star</h4>
                <svg width="120" height="120" viewBox="0 0 120 120">
                    <polygon points="60,10 70,50 110,50 80,75 90,110 60,90 30,110 40,75 10,50 50,50" fill="#e17055" stroke="#d63031" stroke-width="2"/>
                </svg>
            </div>
        </div>
    </div>

    <!-- ====== SECTION 7: INTERACTIVE SVG ====== -->
    <h2>7. Interactive SVG</h2>

    <div class="svg-container" style="flex-direction: column;">
        <div style="display: flex; flex-wrap: wrap; gap: 30px; width: 100%;">
            <div style="flex: 1; min-width: 250px;">
                <h3>Click Interaction</h3>
                <svg width="200" height="200" viewBox="0 0 200 200">
                    <circle cx="100" cy="100" r="70" fill="#ffc107" stroke="#007bff" stroke-width="3"
                            style="cursor: pointer; transition: all 0.3s;"
                            onclick="alert('You clicked the circle!')"
                            onmouseover="this.setAttribute('fill', '#ff6b6b')"
                            onmouseout="this.setAttribute('fill', '#ffc107')"/>
                </svg>
                <p><small>Hover → changes color<br>Click → shows alert</small></p>
            </div>

            <div style="flex: 1; min-width: 250px;">
                <h3>Transform Animation</h3>
                <svg width="200" height="200" viewBox="0 0 200 200">
                    <rect x="50" y="50" width="100" height="100" rx="10" fill="#28a745" stroke="#1e7e34" stroke-width="3"
                          style="cursor: pointer; transition: all 0.5s;"
                          onmouseover="this.setAttribute('transform', 'rotate(45, 100, 100)')"
                          onmouseout="this.setAttribute('transform', 'rotate(0, 100, 100)')"/>
                </svg>
                <p><small>Hover → rotates 45 degrees</small></p>
            </div>
        </div>
    </div>

    <!-- ====== SECTION 8: REFERENCE TABLES ====== -->
    <h2>8. Quick Reference</h2>

    <h3>SVG Shape Elements</h3>
    <table class="reference-table">
        <thead>
            <tr>
                <th>Element</th>
                <th>Purpose</th>
                <th>Key Attributes</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><code>&lt;circle&gt;</code></td>
                <td>Circle</td>
                <td><code>cx</code>, <code>cy</code>, <code>r</code></td>
            </tr>
            <tr>
                <td><code>&lt;rect&gt;</code></td>
                <td>Rectangle</td>
                <td><code>x</code>, <code>y</code>, <code>width</code>, <code>height</code>, <code>rx</code>, <code>ry</code></td>
            </tr>
            <tr>
                <td><code>&lt;polygon&gt;</code></td>
                <td>Polygon</td>
                <td><code>points</code></td>
            </tr>
            <tr>
                <td><code>&lt;ellipse&gt;</code></td>
                <td>Ellipse</td>
                <td><code>cx</code>, <code>cy</code>, <code>rx</code>, <code>ry</code></td>
            </tr>
            <tr>
                <td><code>&lt;line&gt;</code></td>
                <td>Line</td>
                <td><code>x1</code>, <code>y1</code>, <code>x2</code>, <code>y2</code></td>
            </tr>
            <tr>
                <td><code>&lt;polyline&gt;</code></td>
                <td>Connected lines</td>
                <td><code>points</code></td>
            </tr>
            <tr>
                <td><code>&lt;path&gt;</code></td>
                <td>Complex path</td>
                <td><code>d</code></td>
            </tr>
        </tbody>
    </table>

    <h3>Common Styling Attributes</h3>
    <table class="reference-table">
        <thead>
            <tr>
                <th>Attribute</th>
                <th>Purpose</th>
                <th>Example</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><code>fill</code></td>
                <td>Interior color</td>
                <td><code>fill="blue"</code></td>
            </tr>
            <tr>
                <td><code>stroke</code></td>
                <td>Border color</td>
                <td><code>stroke="green"</code></td>
            </tr>
            <tr>
                <td><code>stroke-width</code></td>
                <td>Border thickness</td>
                <td><code>stroke-width="4"</code></td>
            </tr>
            <tr>
                <td><code>opacity</code></td>
                <td>Transparency</td>
                <td><code>opacity="0.5"</code></td>
            </tr>
            <tr>
                <td><code>fill-opacity</code></td>
                <td>Fill transparency</td>
                <td><code>fill-opacity="0.8"</code></td>
            </tr>
            <tr>
                <td><code>stroke-opacity</code></td>
                <td>Stroke transparency</td>
                <td><code>stroke-opacity="0.7"</code></td>
            </tr>
        </tbody>
    </table>

    <!-- ====== SECTION 9: BEST PRACTICES ====== -->
    <h2>9. Best Practices</h2>

    <div style="background: #d4edda; padding: 20px; border-radius: 8px; border-left: 4px solid #28a745;">
        <h3 style="margin-top: 0; color: #155724;">✅ Do This:</h3>
        <ul>
            <li>Use <strong>inline SVG</strong> for small, reusable graphics</li>
            <li>Use <code>viewBox</code> for <strong>scalability</strong></li>
            <li>Use <strong>CSS classes</strong> for consistent styling</li>
            <li>Add <code>aria-label</code> or <code>title</code> for <strong>accessibility</strong></li>
            <li>Use <strong>semantic shapes</strong> instead of paths when possible</li>
            <li>Optimize SVG files by <strong>minimizing unnecessary code</strong></li>
        </ul>
    </div>

    <div style="background: #f8d7da; padding: 20px; border-radius: 8px; border-left: 4px solid #dc3545; margin-top: 15px;">
        <h3 style="margin-top: 0; color: #721c24;">❌ Don't Do This:</h3>
        <ul>
            <li>Don't use <strong>PNG/JPEG</strong> for graphics that should be scalable</li>
            <li>Don't forget to set <code>viewBox</code> for <strong>proper scaling</strong></li>
            <li>Don't use overly complex paths when simpler shapes work</li>
            <li>Don't use SVG for <strong>complex photographs</strong> (use JPEG instead)</li>
            <li>Don't use too many <strong>nested elements</strong> without optimization</li>
        </ul>
    </div>

</body>
</html>

Quick Reference

Element	Purpose	Key Attributes
`<svg>`	SVG container	`width`, `height`, `viewBox`
`<circle>`	Circle	`cx`, `cy`, `r`
`<rect>`	Rectangle	`x`, `y`, `width`, `height`, `rx`, `ry`
`<polygon>`	Polygon	`points`
`<ellipse>`	Ellipse	`cx`, `cy`, `rx`, `ry`
`<line>`	Line	`x1`, `y1`, `x2`, `y2`

When to Use SVG vs Other Formats

Format	Best For	Why
SVG	Logos, icons, illustrations	Scalable, small size, styleable
PNG	Images with transparency	Raster, good for web
JPEG	Photographs	Good compression
WebP	Web images	Modern, better compression

Pro Tip: Use inline SVG for icons and simple graphics. It’s more performant than loading external files and allows for easy styling and interactivity. Remember to add viewBox to your SVG elements so they scale properly in different contexts!

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!

What is SVG?

Key Benefits:

Adding SVG to HTML

1. Inline SVG (Recommended)

2. Using <img> Tag

3. Using <object> Tag

Basic SVG Attributes

Understanding viewBox:

Common SVG Shapes

Common Styling Attributes

The Circle Element <circle>

Basic Syntax:

Attributes:

The Rectangle Element <rect>

Basic Syntax:

Attributes:

The Polygon Element <polygon>

Basic Syntax:

Attributes:

Complete Example

Quick Reference

When to Use SVG vs Other Formats

Ads Blocker Detected!!!

2. Using `<img>` Tag

3. Using `<object>` Tag

Understanding `viewBox`:

The Circle Element `<circle>`

The Rectangle Element `<rect>`

The Polygon Element `<polygon>`