Skip to main content
SVG stands for Scalable Vector Graphics and it is a language for describing 2D-graphics and graphical applications in XML and the XML is then rendered by an SVG viewer.
SVG is mostly useful for vector type diagrams like Pie charts, Two-dimensional graphs in an X,Y coordinate system etc.
SVG became a W3C Recommendation 14. January 2003 and you can check latest version of SVG specification at SVG Specification.

Viewing SVG Files

Most of the web browsers can display SVG just like they can display PNG, GIF, and JPG. Internet Explorer users may have to install the Adobe SVG Viewer to be able to view SVG in the browser.

Embeding SVG in HTML5

HTML5 allows embeding SVG directly using <svg>...</svg> tag which has following simple syntax −
<svg xmlns="http://www.w3.org/2000/svg">
   ...    
</svg>
Firefox 3.7 has also introduced a configuration option ("about:config") where you can enable HTML5 using the following steps −
  • Type about:config in your Firefox address bar.
  • Click the "I'll be careful, I promise!" button on the warning message that appears (and make sure you adhere to it!).
  • Type html5.enable into the filter bar at the top of the page.
  • Currently it would be disabled, so click it to toggle the value to true.
Now your Firefox HTML5 parser should now be enabled and you should be able to experiment with the following examples.

HTML5 − SVG Circle

Following is the HTML5 version of an SVG example which would draw a circle using <circle> tag −
<!DOCTYPE html>
<html>
   <head>
   
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
         
      <title>SVG</title>
      <meta charset="utf-8" />
      
   </head>
   <body>
   
      <h2 align="center">HTML5 SVG Circle</h2>
  
      <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
         <circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
      </svg>
  
   </body>
</html>
This would produce following result in HTML5 enabled latest version of Firefox.
It will produce the following result −

HTML5 − SVG Rectangle

Following is the HTML5 version of an SVG example which would draw a rectangle using <rect> tag −
<!DOCTYPE html>
<html>
   <head>
   
      <style>
         #svgelem{
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
         
      <title>SVG</title>
      <meta charset="utf-8" />
      
   </head>
   <body>
 
      <h2 align="center">HTML5 SVG Rectangle</h2>
  
      <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
         <rect id="redrect" width="300" height="100" fill="red" />
      </svg>
  
   </body>
</html>
This would produce following result in HTML5 enabled latest version of Firefox.

HTML5 − SVG Line

Following is the HTML5 version of an SVG example which would draw a line using <line> tag −
<!DOCTYPE html>
<html>

   <head>
      
      <style>
         #svgelem{
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
      
      <title>SVG</title>
      <meta charset="utf-8" />
   </head>
 
   <body>
 
      <h2 align="center">HTML5 SVG Line</h2>
  
      <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
         <line x1="0" y1="0" x2="200" y2="100" style="stroke:red;stroke-width:2"/>
      </svg>
  
   </body>
</html>
You can use style attribute which allows you to set additional style information like stroke and fill colors, width of the stroke etc.
This would produce following result in HTML5 enabled latest version of Firefox.

HTML5 − SVG Ellipse

Following is the HTML5 version of an SVG example which would draw an ellipse using <ellipse> tag −
<!DOCTYPE html>
<html>

   <head>
      
      <style>
         #svgelem{
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      
      <title>SVG</title>
      <meta charset="utf-8" />
   </head>
 
   <body>
 
      <h2 align="center">HTML5 SVG Ellipse</h2>
  
      <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
         <ellipse cx="100" cy="50" rx="100" ry="50" fill="red" />
      </svg>
  
   </body>
</html>
This would produce following result in HTML5 enabled latest version of Firefox.

HTML5 − SVG Polygon

Following is the HTML5 version of an SVG example which would draw a polygon using <polygon> tag −
<!DOCTYPE html>
<html>

   <head>
   
      <style>
         #svgelem{
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
      
      <title>SVG</title>
      <meta charset="utf-8" />
   </head>
 
   <body>
 
      <h2 align="center">HTML5 SVG Polygon</h2>
  
      <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
         <polygon  points="20,10 300,20, 170,50" fill="red" />
      </svg>
  
   </body>
</html>
This would produce following result in HTML5 enabled latest version of Firefox.

HTML5 − SVG Polyline

Following is the HTML5 version of an SVG example which would draw a polyline using <polyline> tag −
<!DOCTYPE html>
<html>
   
   <head>
      
      <style>
         #svgelem{
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      
      <title>SVG</title>
      <meta charset="utf-8" />
   </head>
 
   <body>
 
      <h2 align="center">HTML5 SVG Polyline</h2>
  
      <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
         <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="red" />
      </svg>
  
   </body>
</html>
This would produce following result in HTML5 enabled latest version of Firefox.

HTML5 − SVG Gradients

Following is the HTML5 version of an SVG example which would draw a ellipse using <ellipse> tag and would use <radialGradient> tag to define an SVG radial gradient.
Similar way you can use <linearGradient> tag to create SVG linear gradient.
<!DOCTYPE html>
<html>

   <head>
   
      <style>
         #svgelem{
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      
      <title>SVG</title>
      <meta charset="utf-8" />
   </head>
 
   <body>
 
      <h2 align="center">HTML5 SVG Gradient Ellipse</h2>
  
      <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
  
         <defs>
   
            <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
               <stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0"/>
               <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/>
            </radialGradient>
    
         </defs>
   
         <ellipse cx="100" cy="50" rx="100" ry="50" style="fill:url(#gradient)" />
   
      </svg>
  
   </body>
</html>
This would produce following result in HTML5 enabled latest version of Firefox.

HTML5 − SVG Star

Following is the HTML5 version of an SVG example which would draw a star using <polygon> tag.
<html>
   
   <head>
   
      <style>
         #svgelem{
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      
      <title>SVG</title>
      <meta charset="utf-8" />
   </head>
   <body> 
   
      <h2 align="center">HTML5 SVG Star</h2>
      
      <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
         <polygon points="100,10 40,180 190,60 10,60 160,180" fill="red"/>
      </svg>
      
    </body>
</html>
This would produce following result in HTML5 enabled latest version of Firefox.

Comments

Post a Comment

Popular posts from this blog

In this chapter, we will see how to enable remote desktop application. It is important because this enables us to work remotely on the server. To do this, we have the following two options. For the first option, we have to follow the steps given below. Step 1  − Go to Start → right click “This PC” → Properties. Step 2  − On Left side click “Remote Setting”. Step 3  − Check radio button “Allow Remote connection to this computer” and Check box “Allow connection only from computers running Remote Desktop with Network Level Authentication (recommended)” → click “Select Users”. Step 4  − Click Add. Step 5  − Type user that you want to allow access. In my case, it is administrator → click OK. For the  second option , we need to follow the steps given below. Step 1  − Click on “Server Manage” → Local Server → click on “Enable” or Disable, if it is Disabled.
Post a Comment
Read more
The table creation command requires: Name of the table Names of fields Definitions for each field Syntax: Here is generic SQL syntax to create a MySQL table: CREATE TABLE table_name ( column_name column_type ); Now, we will create following table in  TUTORIALS  database. tutorials_tbl ( tutorial_id INT NOT NULL AUTO_INCREMENT , tutorial_title VARCHAR ( 100 ) NOT NULL , tutorial_author VARCHAR ( 40 ) NOT NULL , submission_date DATE , PRIMARY KEY ( tutorial_id ) ); Here few items need explanation: Field Attribute  NOT NULL  is being used because we do not want this field to be NULL. So if user will try to create a record with NULL value, then MySQL will raise an error. Field Attribute  AUTO_INCREMENT  tells MySQL to go ahead and add the next available number to the id field. Keyword  PRIMARY KEY  is used to define a column as primary key. You can use multiple columns separated by comma to define...
Post a Comment
Read more
The Windows Firewall with Advanced Security is a firewall that runs on the Windows Server 2012 and is turned on by default. The Firewall settings within Windows Server 2012 are managed from within the  Windows Firewall Microsoft Management Console . To set Firewall settings perform the following steps − Step 1  − Click on the Server Manager from the task bar → Click the Tools menu and select Windows Firewall with Advanced Security. Step 2  − To see the current configuration settings by selecting  Windows Firewall Properties  from the MMC. This  allows access to modify the settings  for each of the three firewall profiles, which are –  Domain, Private and Public  and IPsec settings. Step 3  − Applying custom rules, which will include the following two steps − Select either  Inbound Rules  or  Outbound Rules  under  Windows Firewall with Advanced Security  on the left side of the management console...
Post a Comment
Read more