Q:

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

belongs to collection: HTML5 programming Exercises

0

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

 

All Answers

need an explanation for this answer? contact us directly to get an explanation for this answer

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 -

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

Draw an semi arc using HTML5 canvas... >>
<< Write HTML code to place the following web page in...