Articles → HTML 5 → SVG Rectangle In Html5
SVG Rectangle In Html5
Purpose
Syntax
<svg width="" height="">
<rect width="" height=""></rect>
</svg>
Example
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<svg width="100" height="100">
<rect width="70" height="70"></rect>
</svg>
</body>
</html>
Try It
Output
Rounded Rectangle
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<svg width="100" height="100">
<rect width="70" height="70" rx="20" ry="20"></rect>
</svg>
</body>
</html>
Try It
Browser Support
| Internet Explorer | Firefox | Chrome | Safari | Opera | Edge |
|---|
| 9.0 | 3.0 | 4.0 | 3.2 | 10.1 | Yes |