How to draw a Sine Wave using SVG in HTML5


In our blog today you will learn to create a Sine wave image using SVG. SVG stands for Scalable Vector Graphics. These are defined in the XML format. Every attribute in a SVG file can be animated by the user. The main and important point regarding the use of SVG is the SVG graphics do not loses Quality even if they are zoomed IN or Zoomed OUT.

Other important features for SVG are:
SVG image can be designed and edited in any text editor.
We can take printout of any SVG image at any resolution, Quality remains same.
One Drawback of SVG is that we can not use The SVG in graphical GAMES.

Step 1

Open a text editor and create a new HTML file lets name it sine.html

Step 2

Write the header for the file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sine wave</title>

Step 3

Create the body as follows

<svg width="190px" height="160px" version="1.1" xmlns="">
  <path d="M10 80  C 40 10, 65 10, 95 80 S 150 150, 180 80 Z" stroke="black" fill="transparent"/>

Let look into the code and see what we have done here. We started by defining the Width and Height. Try and change it and see the effect on the image. In the above code we have used the Command ‘S’. S command is always followed with another S command or c command.if none of them is followed then system automatically takes both these as a same point.This command is basically used to Produce the mirror image.

The Z is used to produce the closed path means to join the starting and ending point of the curve. Simply by changing the coordinate we can change the size and shape.M is used for move to initial point that we can defined. Try chnaging the values and see the effect on your image.

The output of our code will be