Monday, 13 February 2017

HTML 5 SVG

SVG is a standard for drawing shapes in browsers. However, SVG is at a fundamentally higher level because each drawn shape is remembered as an object in a scene graph or DOM, which is subsequently rendered to a bit map. This means that if attributes of an SVG object are changed, the browser can automatically re-render the scene.
SVG images are represented in XML, and complex scenes can be created and maintained with XML editing tools
svg graphics

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8">
      <title>Girfa : Student Help SVG</title>
   </head>
<body>       
     <h1 align="center">Girfa : Student Help SVG </h1><hr>

 <svg id="svgelem" height="160" xmlns="http://www.w3.org/2000/svg">
         <circle id="redcircle" cx="60" cy="60" r="60" fill="blue" stroke-width="2" stroke="red" />        
  </svg>
      <br />
<svg width="200" height="80">
  <rect width="200" height="80" style="fill:rgb(255,242,0);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>    
<br />
<svg width="200" height="100">
  <rect x="50" y="20" rx="20" ry="20" width="75" height="75"
  style="fill:green;stroke:black;stroke-width:5;opacity:0.5" />
</svg> <br />
</body>  

</html>