-->
Showing posts with label svg to draw rectangle. Show all posts
Showing posts with label svg to draw rectangle. Show all posts

HTML with SVG to draw rectangle

<html>

<head>

    <head>
        <title>
            html with SVG tag. It stands for scalable vector graphics.It is used for vector based graphics in XML. We use this tag for graphics on web/page.
        </title>
    </head>

    <body>
        <svg width="100" height="100">
            <!--we always use svg for image size. If we donot, it takes 0,0 by default-->

            <rect x="50" y="20" rx="5" ry="9" width="200" height="100" stroke="purple" stroke-width="4px" fill="green"/>
        <!--since we are going to draw rectangle with round corner, we use attributes-->
        <!-- here width is the length ,height is breadth, stroke is boundary color,stroke-width means width of rectangle outline 
            and fill means color inside rectangle-->
            <!--further
            x is x co-ordinate, 
            y is y-co-ordinate
            rx is radius of x co-ordinate
            ry is radius of y-co-ordinate
            -->
        
        
        
        </svg>




    </body>


</html>

HTML with SVG to draw rectangle

<html>

<head>

    <head>
        <title>
            html with SVG tag. It stands for scalable vector graphics.It is used for vector based graphics in XML. We use this tag for graphics on web/page.
        </title>
    </head>

    <body>
        <svg width="100" height="100">
            <!--we always use svg for image size. If we donot, it takes 0,0 by default-->

            <rect width="300" height="200" stroke="purple" stroke-width="4px" fill="green"/>
        <!--since we are going to draw rectangle, we use attributes-->
        <!-- here width is the length ,height is breadth, stroke is boundary color,stroke-width means width of rectangle outline 
            and fill means color inside rectangle-->
        
        
        
        </svg>




    </body>


</html>