Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to draw shapes using SVG in HTML5?
SVG (Scalable Vector Graphics) is a language for describing 2D graphics and graphical applications in XML format. The XML is rendered by an SVG viewer, and most modern web browsers can display SVG just like they display PNG, GIF, and JPG images. SVG graphics are vector-based, making them scalable without quality loss at any size.
You can draw various shapes like circles, rectangles, lines, polygons, and more using SVG in HTML5. SVG elements are embedded directly in HTML and can be styled with CSS or manipulated with JavaScript.
Syntax
Following is the basic syntax for embedding SVG in HTML5 −
<svg width="width" height="height" xmlns="http://www.w3.org/2000/svg"> <!-- SVG shapes go here --> </svg>
Each shape element has its own syntax and attributes for positioning, sizing, and styling.
Drawing Basic Shapes
Rectangle
The <rect> element creates rectangular shapes. Following example demonstrates drawing a rectangle −
<!DOCTYPE html>
<html>
<head>
<title>SVG Rectangle</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>HTML5 SVG Rectangle</h2>
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="20" width="200" height="100" fill="green" stroke="black" stroke-width="2"/>
</svg>
</body>
</html>
The output displays a green rectangle with a black border −
HTML5 SVG Rectangle [A green rectangle with black border, positioned at coordinates (50,20)]
Circle
The <circle> element creates circular shapes. Following example shows how to draw a circle −
<!DOCTYPE html>
<html>
<head>
<title>SVG Circle</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>HTML5 SVG Circle</h2>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="80" fill="blue" stroke="red" stroke-width="3"/>
</svg>
</body>
</html>
The output displays a blue circle with a red border centered in the SVG canvas −
HTML5 SVG Circle [A blue circle with red border, centered at (100,100) with radius 80]
Line
The <line> element draws straight lines between two points −
<!DOCTYPE html>
<html>
<head>
<title>SVG Line</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>HTML5 SVG Line</h2>
<svg width="250" height="150" xmlns="http://www.w3.org/2000/svg">
<line x1="20" y1="20" x2="200" y2="120" stroke="purple" stroke-width="4"/>
</svg>
</body>
</html>
The output shows a purple line drawn from point (20,20) to point (200,120) −
HTML5 SVG Line [A diagonal purple line from top-left to bottom-right]
Advanced Shapes
Polygon
The <polygon> element creates multi-sided shapes using a series of connected points −
<!DOCTYPE html>
<html>
<head>
<title>SVG Polygon</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>HTML5 SVG Triangle</h2>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<polygon points="100,20 40,180 160,180" fill="orange" stroke="black" stroke-width="2"/>
</svg>
</body>
</html>
The output displays an orange triangle with black borders −
HTML5 SVG Triangle [An orange triangle pointing upward with black border]
Path
The <path> element is the most powerful SVG shape, allowing complex curves and shapes using path data commands −
<!DOCTYPE html>
<html>
<head>
<title>SVG Path</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>HTML5 SVG Curved Path</h2>
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
<path d="M 50 150 Q 150 50 250 150" stroke="teal" stroke-width="3" fill="none"/>
</svg>
</body>
</html>
The output shows a curved path using quadratic Bézier curve commands −
HTML5 SVG Curved Path [A teal curved line forming an arch shape]
Multiple Shapes in One SVG
You can combine multiple shapes within a single SVG element to create complex graphics −
<!DOCTYPE html>
<html>
<head>
<title>Multiple SVG Shapes</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>HTML5 SVG House</h2>
<svg width="300" height="250" xmlns="http://www.w3.org/2000/svg">
<!-- House base -->
<rect x="50" y="150" width="200" height="80" fill="brown" stroke="black" stroke-width="2"/>
<!-- Roof -->
<polygon points="40,150 150,80 260,150" fill="red" stroke="black" stroke-width="2"/>
<!-- Door -->
<rect x="130" y="180" width="40" height="50" fill="darkbrown" stroke="black" stroke-width="1"/>
<!-- Window -->
<circle cx="90" cy="180" r="15" fill="lightblue" stroke="black" stroke-width="1"/>
</svg>
</body>
</html>
The output displays a simple house made from multiple SVG shapes −
HTML5 SVG House [A simple house drawing with brown walls, red triangular roof, dark door, and circular window]
Common SVG Shape Attributes
Following are the most commonly used attributes across SVG shapes −
| Attribute | Description | Applies To |
|---|---|---|
fill |
Sets the interior color of the shape | All shapes |
stroke |
Sets the outline/border color | All shapes |
stroke-width |
Sets the thickness of the stroke | All shapes |
x, y |
Sets the position coordinates | rect, text |
cx, cy |
Sets the center coordinates | circle, ellipse |
width, height |
Sets dimensions | rect, svg |
r |
Sets the radius | circle |
points |
Defines coordinate points | polygon, polyline |
Conclusion
SVG provides a powerful way to create scalable vector graphics directly in HTML5. You can draw basic shapes like rectangles, circles, and lines using dedicated elements, or create complex graphics using the path element. SVG shapes can be styled with CSS and manipulated with JavaScript, making them ideal for interactive web graphics.
2K+ Views
