Post
Ask Question

SVG Element in HTML5

Creating an interface element in HTML5 by using SVG

 
In this article, SVG uses a standard HTML5 header, <!doctype html> so that browsers can distinguish it as part of the HTML5 specification. Not all browsers support this aspect of HTML5, where SVG tags are treated as they are HTML tags. This is called i"nline SVG".
 
The SVG tag is included in the body. You must specify the width and height of the SVG drawing container shape. Inside the SVG container, you must add a circle shape element. An ID is assigned to the circle tag so that it can be part of the document object model. You must specify the starting location for the circle and the radius. You should also specify which function is called when the circle is clicked.
 
You should be careful about that; unlike the Canvas, you can process click events on only the circle and not the entire SVG . All the user interface elements are created in the body and not by using JavaScript.
 
The script section has only one function that processes the click event when you click it, displaying an alert.
 
Browser Support
 
It is supported in all major browsers.
 
Example
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>SVG Interface</title>  
  7.     <script type="text/javascript">  
  8.         // This function is called when the circle is clicked.  
  9.         function clickMe()  
  10.         {  
  11.             // Display the alert.  
  12.             alert("SVG User Interface element is clicked.");  
  13.         }  
  14.     </script>  
  15. </head>  
  16. <body>  
  17.     <h1>SVG User Interface  
  18.     </h1>  
  19.     <!-- Create the SVG. -->  
  20.     <svg height="200" width="200">  
  21.         <!-- Create the circle. -->  
  22.         <circle cx="100" cy="100" r="50" fill="red" id="SVGUI" onclick="clickMe();" />  
  23.     </svg>  
  24.     <p>  
  25.         Click on the red circular user interface element.  
  26.     </p>  
  27. </body>  
  28. </html>  
Output
 
Before the element is clicked we get:
 
uisvg.jpg
After clicking the Red circular element we get:
 
uisvg1.jpg

Creating a rectangle with a rounded corner in HTML5 by using SVG

 
The <rect> element creates a rectangle. In this example, I will be creating a rounded corner rectangle. I have taken another rounded corner rectangle without filling it, I made to rotate it.
 
Code explanation:
  • The width and height attributes of the rect element define the height and the width of the rectangle
  • The style attribute is used to define CSS properties
  • The CSS fill property defines the fill color of the rectangle
  • The CSS stroke-width property defines the width of the border of the rectangle
  • The CSS stroke property defines the color of the border of the rectangle
  • The rx and the ry attributes rounds the corners of the rectangle
Browser Support
 
It is supported in all major browsers.
 
Example
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>Rounded corner Rectangle</title>  
  7. </head>  
  8. <body>  
  9.     <h3>Implementation of Rounded corner Rectangle</h3>  
  10.     <?xml version="1.0" standalone="no" ?>  
  11.     <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"  
  12. "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  
  13.     <svg width="12cm" height="4cm" viewbox="0 0 1200 400"  
  14.         xmlns="http://www.w3.org/2000/svg" version="1.1">  
  15.   <desc>Example rounded rectangles</desc>  
  16.    
  17.   <!-- Show outline of canvas using 'rect' element -->  
  18.   <rect x="1" y="1" width="1198" height="398"  
  19.         fill="none" stroke="blue" stroke-width="2"/>  
  20.    
  21.   <rect x="100" y="100" width="400" height="200" rx="50"  
  22.         fill="blue" />  
  23.    
  24.   <g transform="translate(700 210) rotate(-30)">  
  25.     <rect x="0" y="0" width="400" height="200" rx="50"  
  26.           fill="none" stroke="red" stroke-width="30" />  
  27.   </g>  
  28. </svg>  
  29. </body>  
  30. </html> 
Output 
 
roundrect.jpg
 

SVG Polygon in HTML5

 
The <polygon> element is used to create a graphic that contains at least three sides. You can create polygons with any number of sides by adding x and y pairs. You can create polygons by defining pairs of x and y coordinates using the points attribute. Polygon is a Greek word ."Poly" means "many" and "gon" means "angle".
 
Browser Support
 
It is supported in all major browsers.
 
Example
  1. <!DOCTYPE html>  
  2.    
  3. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <title>SVG Polygon</title>  
  7. </head>  
  8. <body>  
  9.     <h3>Implementation of HTML5 SVG Polygon </h3>  
  10.     <?xml version="1.0" standalone="no" ?>  
  11.     <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"  
  12.   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  
  13.     <svg width="12cm" height="4cm" viewbox="0 0 1200 400"  
  14.         xmlns="http://www.w3.org/2000/svg" version="1.1">  
  15.   <desc>Example polygon01 - star and hexagon</desc>  
  16.    
  17.   <!-- Show outline of canvas using 'rect' element -->  
  18.   <rect x="1" y="1" width="1198" height="398"  
  19.         fill="none" stroke="blue" stroke-width="2" />  
  20.    
  21.   <polygon fill="red" stroke="blue" stroke-width="10"  
  22.             points="350,75  379,161 469,161 397,215  
  23.                     423,301 350,250 277,301 303,215  
  24.                     231,161 321,161" />  
  25.   <polygon fill="lime" stroke="blue" stroke-width="10"  
  26.             points="850,75  958,137.5 958,262.5  
  27.                     850,325 742,262.6 742,137.5" />  
  28. </svg>  
  29. </body>  
  30. </html> 
Output
 
poly.jpg


Similar Articles