Best HTML5 SVG Rectangle Tutorials with Examples

 Courses / Web Development /HTML5 Tutorials

Welcome to the world of design in HTML5 SVG Rectangle

HTML5 has lots of new features for modern web designing. we can make shapes & images by the use of SVG. In SVG , web designer can make Rectangle.

Some examples of SVG Shape Rectangle

1.First Example of SVG Rectangle

Coding of this example

<svg height="200" width="200">
<rect height="200" width="200" style="fill:red;"/>
</svg>

2.Second Example of SVG Rectangle with Stroke

Coding of this example

<svg height="200" width="200">
<rect height="200" width="200" style="fill:red;stroke:black;stroke-width:20"/>
</svg>

3.Third Example of SVG half Rectangle

   

Coding of this example

<style>
.size2{ position:absolute;
left:30px;
top:30px;
}
</style>
<svg>
<rect width="300" height="100" style="fill:red"/>
</svg>
<svg class="size2">
<rect width="250" height="50" style="fill:white"/>
</svg>



4.Forth Example of SVG Rectangle with half Stroke

 

Coding of this example

<svg width="300" height="300">
<rect X="20" Y="-20" width="300" height="300" style="fill:red;stroke-width:20;stroke:black"/>
</svg>

HTML5 SVG Rectangle in Delhi