SVG stands for Scalable Vector Graphics. It is an XML-based format used to draw 2D graphics, such as shapes, lines, icons, and illustrations directly inside web pages.
Basic Syntax of SVG
<svg width="200" height="200">
<circle cx="100" cy="100" r="50" fill="skyblue" />
</svg>Common SVG Elements
| Element | Description |
|---|---|
<svg> | Defines the main SVG container — the drawing area for all shapes. |
<circle> | Draws a circle using center coordinates (cx, cy) and radius (r). |
<rect> | Draws a rectangle using position (x, y), width, and height. |
<ellipse> | Draws an ellipse (oval) shape with horizontal and vertical radii. |
<line> | Draws a straight line between two points (x1, y1 → x2, y2). |
<polygon> | Creates a multi-sided closed shape (e.g., triangle, hexagon) by connecting points. |
<polyline> | Draws a series of connected straight lines — similar to polygon but not closed. |
<path> | Defines complex custom shapes or curves using path commands (M, L, C, etc.). |
<text> | Adds text inside an SVG canvas, with styling and positioning. |
1. The <circle> Element
<svg width="200" height="200">
<circle cx="100" cy="100" r="80" fill="lightgreen" stroke="black" stroke-width="3" />
</svg>Attributes Explained:
- cx, cy: Center coordinates
- r: Radius
- fill: Color
- stroke: Border color
- stroke-width: Border thickness
2. The <rect> Element
Draws rectangles or squares.
<svg width="250" height="150">
<rect width="200" height="100" x="25" y="25" fill="orange" stroke="black" stroke-width="2" />
</svg>3. The <ellipse> Element
Creates oval shapes.
<svg width="250" height="150">
<ellipse cx="125" cy="75" rx="100" ry="50" fill="lightblue" />
</svg>4. The <line> Element
Used for creating straight lines.
<svg width="200" height="100">
<line x1="10" y1="90" x2="190" y2="10" stroke="blue" stroke-width="3" />
</svg>5. The <polygon> Element
Used to create closed multi-sided shapes.
<svg width="200" height="200">
<polygon points="100,10 40,180 190,60 10,60 160,180" fill="gold" stroke="black" stroke-width="2" />
</svg>6. The <polyline> Element
Creates open shapes with connected lines.
<svg width="200" height="200">
<polyline points="0,100 50,25 100,75 150,0 200,100" fill="none" stroke="red" stroke-width="2" />
</svg>7. The <path> Element (Most Powerful)
<path> lets you draw complex shapes using commands.
<svg width="200" height="200">
<path d="M50 150 Q150 50 250 150" stroke="blue" stroke-width="3" fill="none" />
</svg>8. The <text> Element
Add text inside an SVG.
<svg width="300" height="100"> <text x="50" y="50" font-size="24" fill="purple">Hello SVG!</text>
</svg>Styling SVG with CSS
You can use inline CSS or external stylesheets to style SVG elements.
<style>
circle {
fill: lightcoral;
stroke: black;
stroke-width: 3;
}
</style>
<svg width="150" height="150">
<circle cx="75" cy="75" r="50" />
</svg>
SVG Animation Example
SVG supports animations using the <animate> tag.
<svg width="200" height="200">
<circle cx="50" cy="100" r="30" fill="orange">
<animate attributeName="cx" from="50" to="150" dur="2s" repeatCount="indefinite" />
</circle>
</svg>Example of Complete SVG Graphic
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Complete HTML SVG Graphics tutorial with examples, shapes, styling, and animation for beginners and professionals.">
<meta name="keywords" content="HTML SVG, SVG tutorial, HTML graphics, SVG elements, SVG animation, AdSense safe HTML tutorial">
<meta name="author" content="Dharmesh Kundariya">
<title>HTML SVG Graphics Example</title>
</head>
<body>
<h1>HTML SVG Graphics Example</h1>
<svg width="400" height="300">
<rect x="50" y="50" width="100" height="80" fill="lightblue" stroke="black" stroke-width="2"></rect>
<circle cx="250" cy="100" r="40" fill="tomato" stroke="black" stroke-width="2"></circle>
<text x="120" y="200" font-size="20" fill="green">SVG is Awesome!</text>
</svg>
</body>
</html>