Post
Ask Question

HTML Graphics With SVG

Facts About SVG

  • The main challenging drawing program for SVG is FLASH.
  • Flash depends on other technologies like XSL and DOM. In that case, SVG plays a role like an open source drawing program.
  • SVG images are scalable, zoomable and  can be printed with high quality at any resolution.
  • SVG files are complete XML files, so it can be easily developed with the help of HTML and Basic XML knowledge.
  • SVG can be created with any text editor, but Inkscape is a more convenient drawing program for it.

How to Code SVG?

 
An SVG image begins with <svg> tag and closing with </svg> tag. Make sure all the elements in SVG can be closed properly because it is written in XML.
 

Example 1 - DRAW A CIRCLE

 
Let’s draw a circle with SVG element,
 
Firstly, to draw any shape we need to create an SVG element with two attributes: width and height.
  1. <html>  
  2.    <head>  
  3.       <title> Draw a Circle Using SVG</title>  
  4.    </head>  
  5.    <body>  
  6.       <svg width=”1050” height=”1050”>  
  7.       </svg>  
  8.    </body>  
  9. </html>  
Still there is nothing going to be applied on an output screen.
 
Add a <circle> tag,
  1. <html>  
  2.    <head>  
  3.       <title> Draw a Circle Using SVG</title>  
  4.    </head>  
  5.    <body>  
  6.       <svg width="2050" height="2050">  
  7.       <circle cx= "80" cy="80" r="50" fill="blue" stroke="red"/></svg>  
  8.    </body>  
  9. </html>  
Note
In SVG file there is every element and any attribute can be animated.
 
In this code, there are a few attributes which are new for us,
  • cx:x coordinate, cy:y coordinate, r:radius , fill, stroke
  • cx: it defines the center of the circle from the right of the screen
  • cy: it defines the center of the circle from the top the screen
  • r: it is the radius of the circle
  • fill: it is used to color the circle
  • stroke: it is used to give an outline to the circle.

Output

 
HTML Graphics With SVG
 
Note
With the use of<ellipse> element, we can create an oval shape.
 

Example 2 - DRAW A RECTANGLE

 
In this example, we will see two more attributes of the rectangle shape: width and height. It defines the width and height of the rectangle.
 
Add a <rect> tag,
 
Let’s draw a rectangle with SVG element,
  1. <html>  
  2.    <head>  
  3.       <title> Draw a Rectangle Using SVG</title>  
  4.    </head>  
  5.    <body>  
  6.       <svg width="2050" height="2050">  
  7.       <rect width="250" height="100" fill="blue" stroke="red"/></svg>  
  8.    </body>  
  9. </html>  
Output
 
HTML Graphics With SVG 
 

Example 3 - DRAW A ROUNDED RECTANGLE

 
In the previous example, we have seen attributes of rectangle shapes: width and height. It defines the width and height of the rectangle. Now, we will see two more attributes: rx: horizontal radius and ry: vertical radius, to draw rounded corners of the rectangle.
 
Add a <rect> tag,
 
Let’s draw a rounded rectangle with SVG element,
  1. <html>  
  2.    <head>  
  3.       <title> Draw a Rounded Rectangle Using SVG</title>  
  4.    </head>  
  5.    <body>  
  6.       <svg width="2000" height="2000">  
  7.          <rect x="70" y="20" rx="20" ry="20" width="210" height="140"  
  8.          style="fill:blue;stroke:red;stroke-width:3;opacity:0.5" />  
  9.       </svg>  
  10.    </body>  
  11. </html>  
Output
 
HTML Graphics With SVG
 
Note
With the help of <rect> element we can also draw a square shape.
 

Example 4 - DRAW A LINE

 
To draw a line on a screen  we have to focus on the coordinates of the screen with the measurements: (x1,y1) these are the start coordinates of the line, and (x2,y2) are the end coordinates of the line.
 
Add a <line> tag,
 
Let’s draw a line with <line> SVG element,
  1. <html>  
  2.    <head>  
  3.       <title> Draw a Line Using SVG</title>  
  4.    </head>  
  5.    <body>  
  6.       <svg width="500" height="500">  
  7.          <line x1="30" y1="10" x2="200" y2="100"  
  8.          style="stroke:#0000ff; stroke-linecap:round; stroke-width:20" />  
  9.       </svg>  
  10.    </body>  
  11. </html>  
Output
 
HTML Graphics With SVG
 

Example 5 - DRAW A POLYLINE

 
Polyline is a shape that is built from multiple lines. Polyline seems like a check sign. In this element, we will introduce an attribute point: which is polyline’s coordinates.
 
Add a <polyline> tag,
 
Let’s draw a polyline with <polyline> SVG element,
  1. <html>  
  2.    <head>  
  3.       <title> Draw a Polyline Using SVG</title>  
  4.    </head>  
  5.    <body>  
  6.       <svg width="2000" height="2000">  
  7.          <polyline style="fill:none;stroke:blue;stroke-width:10;stroke-linejoin:miter"  
  8.          points="90 110, 160 160, 200 100" />  
  9.       </svg>  
  10.    </body>  
  11. </html>  
Output
 
HTML Graphics With SVG
 

Example 6 - DRAW A STAR

 
As we saw in the previous SVG <ployline> element, with the help of Points of the <polygon> element we can create a star shape according to our assumptions and requirements of choices. Again Points are the coordinates of the star.
 
Add a <polygon> tag,
 
Let’s draw a star with <polylgon> SVG element,
  1. <html>  
  2.    <head>  
  3.       <title> Draw a Star Using SVG</title>  
  4.    </head>  
  5.    <body>  
  6.       <svg width="2000" height="2000">  
  7.          <polygon points="100,9 50,200 180,75 10,75 160,200"  
  8.          style="fill:blue;stroke:red;stroke-width:5;fill-rule:evenodd;" />  
  9.       </svg>  
  10.    </body>  
  11. </html>  
Output
 
HTML Graphics With SVG 
 

Summary

 
In this article, we learned about the HTML Graphics: SVG with different shapes using the different elements of SVG.
 
References
 
https://www.w3schools.com/html/html5_svg.asp
https://www.w3schools.com/graphics/svg_intro.asp


Similar Articles