Introduction to SVG vector graphics drawing using HTML5

Time:2021-9-10

VG represents scalable vector graphics, which is a language used to describe 2D graphics. Graphics applications are written in XML, and then XML is presented by SVG reader program.

SVG is mainly used for vector charts, such as pie charts, two-dimensional charts in X and Y coordinate systems, etc.

Svg became a W3C recommendation on January 14, 2003. You can view the latest version of SVG specification on the SVG specification page.

View SVG files
Most web browsers can display SVG just as they can display PNG, GIF, and JPG graphics. Ie users may need to install Adobe SVG reader so that they can view SVG in their browser.

Embedding SVG in HTML5
HTML5 allows us to use it directly__< Svg >… < / SVG > tags are embedded in SVG. The following is a simple syntax:

XML/HTML CodeCopy contents to clipboard
  1. <svg xmlns=“http://www.w3.org/2000/svg”>  
  2. …       
  3. </svg>  

HTML5 – SVG circle
The following is the HTML5 version of an SVG example, drawing a circle with the < circle > tag:

XML/HTML CodeCopy contents to clipboard
  1. <!DOCTYPE html>  
  2. <head>  
  3. <title>SVG</title>  
  4. <meta charset=“utf-8” />  
  5. </head>  
  6. <body>  
  7. <h2>HTML5 SVG Circle</h2>  
  8. <svg id=“svgelem” height=“200” xmlns=“http://www.w3.org/2000/svg”>  
  9.     <circle id=“redcircle” cx=“50” cy=“50” r=“50” fill=“red” />  
  10. </svg>  
  11. </body>  
  12. </html>  

In the latest version of Firefox with HTML5 enabled, the following results will be generated:
2016219112130340.jpg (223×186)

HTML5 – SVG rectangle
The following is the HTML5 version of an SVG example, drawing a rectangle with the < rect > tag:

XML/HTML CodeCopy contents to clipboard
  1. <!DOCTYPE html>  
  2. <head>  
  3. <title>SVG</title>  
  4. <meta charset=“utf-8” />  
  5. </head>  
  6. <body>  
  7. <h2>HTML5 SVG Rectangle</h2>  
  8. <svg id=“svgelem” height=“200” xmlns=“http://www.w3.org/2000/svg”>  
  9.     <rect id=“redrect” width=“300” height=“100” fill=“red” />  
  10. </svg>  
  11. </body>  
  12. </html>  

In the latest version of Firefox with HTML5 enabled, the following results will be generated:
2016219112200272.jpg (316×152)

HTML5 – SVG line
The following is the HTML5 version of an SVG example, drawing a line with the < line > tag:

XML/HTML CodeCopy contents to clipboard
  1. <!DOCTYPE html>  
  2. <head>  
  3. <title>SVG</title>  
  4. <meta charset=“utf-8” />  
  5. </head>  
  6. <body>  
  7. <h2>HTML5 SVG Line</h2>  
  8. <svg id=“svgelem” height=“200” xmlns=“http://www.w3.org/2000/svg”>  
  9.     <line x1=“0” y1=“0” x2=“200” y2=“100”  
  10.           style=“stroke:red;stroke-width:2”/>  
  11. </svg>  
  12. </body>  
  13. </html>  

You can use the style attribute to set additional style information, such as stroke, fill color, stroke width, etc.

In the latest version of Firefox with HTML5 enabled, the following results will be generated:
2016219112220725.jpg (217×159)

HTML5 – SVG ellipse
The following is the HTML5 version of an SVG example, drawing an ellipse with the < ellipse > tag:

XML/HTML CodeCopy contents to clipboard
  1. <!DOCTYPE html>  
  2. <head>  
  3. <title>SVG</title>  
  4. <meta charset=“utf-8” />  
  5. </head>  
  6. <body>  
  7. <h2>HTML5 SVG Ellipse</h2>  
  8. <svg id=“svgelem” height=“200” xmlns=“http://www.w3.org/2000/svg”>  
  9.     <ellipse cx=“100” cy=“50” rx=“100” ry=“50” fill=“red” />  
  10. </svg>  
  11. </body>  
  12. </html>  

In the latest version of Firefox with HTML5 enabled, the following results will be generated:
2016219112240763.jpg (225×148)

HTML5 – SVG polygon
The following is the HTML5 version of an SVG example, drawing a polygon with the < polygon > tag:

XML/HTML CodeCopy contents to clipboard
  1. <!DOCTYPE html>  
  2. <head>  
  3. <title>SVG</title>  
  4. <meta charset=“utf-8” />  
  5. </head>  
  6. <body>  
  7. <h2>HTML5 SVG Polygon</h2>  
  8. <svg id=“svgelem” height=“200” xmlns=“http://www.w3.org/2000/svg”>  
  9.     <polygon  points=“20,10 300,20, 170,50” fill=“red” />  
  10. </svg>  
  11. </body>  
  12. </html>  

In the latest version of Firefox with HTML5 enabled, the following results will be generated:
2016219112258796.jpg (310×118)

HTML5 – SVG polyline
The following is the HTML5 version of an SVG example. Draw a line chart with the < polyline > tag:

XML/HTML CodeCopy contents to clipboard
  1. <!DOCTYPE html>  
  2. <head>  
  3. <title>SVG</title>  
  4. <meta charset=“utf-8” />  
  5. </head>  
  6. <body>  
  7. <h2>HTML5 SVG Polyline</h2>  
  8. <svg id=“svgelem” height=“200” xmlns=“http://www.w3.org/2000/svg”>  
  9.  <polyline points=“0,0 0,20 20,20 20,40 40,40 40,60” fill=“red” />  
  10. </svg>  
  11. </body>  
  12. </html>  

In the latest version of Firefox with HTML5 enabled, the following results will be generated:
2016219112318049.jpg (245×114)

HTML5 – SVG gradient
The following is the HTML5 version of an SVG example. Draw an ellipse with the < ellipse > tag and define an SVG radial gradient with the < RadialGradient > tag.

We can create SVG linear gradients with < LinearGradient > tags in a similar way.

XML/HTML CodeCopy contents to clipboard
  1. <!DOCTYPE html>  
  2. <head>  
  3. <title>SVG</title>  
  4. <meta charset=“utf-8” />  
  5. </head>  
  6. <body>  
  7. <h2>HTML5 SVG Gradient Ellipse</h2>  
  8. <svg id=“svgelem” height=“200” xmlns=“http://www.w3.org/2000/svg”>  
  9.    <defs>  
  10.       <radialGradient id=“gradient” cx=“50%” cy=“50%” r=“50%”  
  11.       fx=“50%” fy=“50%”>  
  12.       <stop offset=“0%” style=”stop-color:rgb(200,200,200);   
  13.       stop-opacity:0″/>  
  14.       <stop offset=“100%” style=”stop-color:rgb(0,0,255);   
  15.       stop-opacity:1″/>  
  16.       </radialGradient>  
  17.    </defs>  
  18.    <ellipse cx=“100” cy=“50” rx=“100” ry=“50”    
  19.       style=“fill:url(#gradient)” />  
  20. </svg>  
  21. </body>  
  22. </html>  

In the latest version of Firefox with HTML5 enabled, the following results will be generated:
2016219112338977.jpg (319×157)