programplug Logo




HTML5 SVG

SVG stands for Scalable Vector Graphics is a XML- based image format which gives us two dimensional vector based graphic for the web. A quality of vector is based on when you scaled up and down the image the quality of image doesn't lose to any extent. SVG is preferly used for vector type diagrams like pie charts,2 dimensional graphs in an x and y coordinates systems etc.

HTML5 − SVG Circle:
Let's demonstrate that how SVG circle work :
<!DOCTYPE html>
<html>
<body>
<svg width="300" height="150">
<circle cx="60" cy="60" r="60" stroke="black" stroke width="5" fill="yellow"/>
</svg>
</body>
</html>

		  
Result:

HTML5 − SVG Rectangle Example:
Let see how to make the SVG rectangle to draw and insert the <rect> tag for thier attributes.
<!DOCTYPE html>
<html>
<body>
<svg width="110" height="90">
<rect width="300" height="150" stroke="yellow" stroke-width="4" fill="blue" />
</svg>
</body>
</html>
  
Result:

HTML5 − SVG Line:
SVG line draw a line by using <line>tag.
<!DOCTYPE html>
<html>
<body>

 <svg id = "svgline" height = "200" xmlns = "">
  <line x1 = "5" y1 = "4" x2 = "150" y2 = "90" 
  style = "stroke:blue;stroke-width:5"/>
</svg>
</body>
</html>
  
Result:

HTML5- SVG polygon:
To draw SVG polygon you need to give the tag of <polygon> with the points attribute.
<!DOCTYPE html>
<html>
<body>
<svg width="350" height="250">
 <polygon points="90,15, 50,190 192,76 15,80 162,196"
  style="fill:green;stroke:red;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>
  
Result:








Our Services

Developing Cheapest Websites
Offer Digital Marketing
Provide College Projects
Attractive Website Developing
Summer Training,Industrial Training
SCO,SMO

Contact Us

Dehradun Uttarakhand India
www.programplug.com
info@programplug.com
08534019974
Designed By : Mridul Gupta

Other Link

About Us

Contact Us

Disclaimer

Privacy Policy