HTML5 SVG Exercise

Draw a square using HTML5 SVG, fill that square with yellow color and make 5px blue stroke width.

Solution

SVG stands for Scalable Vector Graphics. It is W3C recommended. The graphics in SVG are defined in XML format. It is an open standard that has been actively developed by the W3C. SVG generated graphics are vector based that require less storage space and image can be scaled up or down without the loss of quality. It is supported by all major browsers.

Each element of SVG is part of the DOM, it can be styled with CSS and add behavior with the SVG DOM.

This is the following HTML5 code to draw a square with 5px blue stroke width and filled with yellow color.

<!DOCTYPE html>
<html>
<body>
<svg width="200" height="200">
<rect
x="20" y="20"
width="100" height="100"
fill="yellow" stroke="blue"
stroke-width="5px"
rx="8" ry="8"
id="myRect" class="chart" />
</svg>
</body>
</html>

Output of the above code -

Read more articles


General Knowledge



Learn Popular Language