Welcome Guest! (App Version 3.1)

websitnero logo name

SVG

SVG introduction in HTML5

Unlike canvas, SVG does not solely depend on JavaScript. SVG in itself is a language. In Canvas you would not be able to do anything without using JavaScript, but in SVG, it has got its own dedicated tags. There were no such tags in canvas. SVG makes use of tags like Circle, rect, line, etc. which makes it much simpler to draw graphs using SVG. You just need to provide a basic height & width to the SVG tag. Then you can add you items within it and draw beautiful charts & graphs.

Following is the example of making a circle in SVG:

Example

<svg width="200px" height="200px" 
style="border:1px solid #000">

  <circle cx="100" cy="100" r="50" stroke="blue" 
  stroke-width="5" fill="pink">
  </circle>

</svg>

Following example shows making a rectangle with SVG:

Example

<svg width="200px" height="200px" 
style="border:1px solid #000">

  <rect width="150" height="100" x="20" y="20" 
  style = "fill:blue; stroke-width:5; stroke:red">
  </rect>

</svg>

Following example shows making a filled rectangle with SVG:

Example

<svg width="200px" height="200px" 
style="border:1px solid #000">
  
  <rect width="150" height="100" x="20" y="20" 
  style="fill:blue; stroke-width:5; stroke:red">
  </rect>

</svg>
WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.