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>



Output



Click to Enlarge


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>





Click to Enlarge


Browser support


Internet ExplorerFirefoxChromeSafariOperaEdge
9.03.04.03.210.1Yes



Posted By  -  Karan Gupta
 
Posted On  -  Wednesday, September 06, 2017
 
Updated On  -  Friday, September 15, 2017

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250