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

Wednesday, July 22, 2020

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>