How to draw a rectangle inside a rectangle using svg?

html, rectangles, svg

Solution

Just draw a rectangle on the top of another: They will be drawn in the same order as you write in your code.

<html>
    <body>
        <h1>My first SVG</h1>
        <svg width="700" height="200">
            <rect height="100" width="600" style="fill:rgb(255,255,255);stroke-width:3;stroke:rgb(0,0,0)"></rect>
            <rect height="50" width="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"></rect>
        </svg>
    </body>
</html>

Problem

I am trying to draw a rectangle inside a rectangle using svg, but I am not seeing the inner rectangle. Could somebody help me what is the mistake I am doing ?? The code is as below. ``` <html> <body> <h1>My first SVG</h1> <svg width="700" height="200"> <rect height="100" width="600" style="fill:rgb(255,255,255);stroke-width:3;stroke:rgb(0,0,0)"> <rect height="50" width="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"/> </rect> </svg> </body> </html> ``` Thanks in advance

Original source