Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to work with Scalable Vector Graphics (SVG) in HTML 5

In this article I will discuss how to start working with HTML5-SVG. Starting from basics, will cover drawing the Line (SVG-Line), Circle (SVG-Circle), Rectangle (SVG-Rectangle), Ellipse (SVG-Ellipse) and Polygon (SVG-Polygon).

Introduction:

SVG stand for Scalable Vector Graphics. This is a HTML5 tag to draw a vector graphics. You just have to define the XML properties and will get the corresponding graphics element.

To start with the SVG first add a tag in the HTML body. Just like other HTML tags, you can add an ID to SVG tag for example add id="svgTutorial". To add a border properties to SVG add a style attribute like style="border-style:solid;border-width:2px;". The SVG have common properties like other HTML tags. You can add the height and width also by height="100px" width="200px".

Now we added the SVG element in our HTML code, It’s time to add the some graphics into it. The SVG provide number of shapes like Line, Circle, and Polygon etc. Let’s start with the Line and then will cover all.

SVG Line:

The SVG line defined by tag. and inside this you can specify the other properties.

tag have properties like start coordinates (x1, y1) and end coordinates (x2, y2). Specify the line start and end position by assigning the values to x1, y1, x2, y2. After specifying the coordinates, lets add some style to line, Give line color by specifying the “stroke: Green;” inside the style property. You can also set the line width by stroke-width:2; property.

Listing 1: HTML Script to draw a SVG Line

 
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
</head>
<body>
<h2>HTML5 SVG Line Example</h2>
<svg id="svgLineTutorial" style="border-style:solid;border-width:2px;" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg">
  <!--<line x1="0" y1="0" x2="50" y2="200" style="stroke:rgb(100,100,0);stroke-width:5"/>-->
   <line x1="10" y1="20" x2="100" y2="200" style="stroke:Green;stroke-width:2"/>
</svg>
</body>
</html>

A green color line is painted by specifying the XML tags

Figure 1: A green color line is painted by specifying the XML tags

SVG Circle:

The SVG provide a different tag to draw a circle. As you can see in the code below, the circle has an id, in this case I given it "myCircle". To define a circle you need a circle center and a radius. So let’s give circle center as cx="55" cy="55" and circle radius as r="50". It’s done. The circle is ready. Now fill the circle with some color, we are using here a hexadecimal color fill="#219E3E". You can define the circle outer line and width by stroke="#17301D" stroke-width="2".

Listing 2: HTML Script to draw a Circle

 
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
</head>
<body>
<h2>HTML5 SVG Circle Example</h2>
<svg id="svgCircleTutorial" height="250" xmlns="http://www.w3.org/2000/svg">
    <circle id="myCircle" cx="55" cy="55" r="50" fill="#219E3E" stroke="#17301D" stroke-width="2" />
</svg>
</body>
</html>
A green color circle is painted by specifying the above XML tag and properties

Figure 2: A green color circle is painted by specifying the above XML tag and properties

SVG Rectangle:

tag is used to draw the rectangle in SVG. Similar to other SVG tag the have id property. I gave it "myRectangle" in this case. Define the rectangle height and width by width="300" height="100". To fill the color in rectangle use ‘fills’ property and assign a color. You can define the border by giving the stroke. One more thing, I added here is opacity. You can give the opacity for stroke as well as for filling also.

Listing 3: HTML Script to draw a Rectangle

 
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Rectangle Example</h2>
<svg id="svgRectangleTutorial" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect id="myRectangle" width="300" height="100" stroke="#17301D" stroke-width="2"  fill="#0E4E75" fill-opacity="0.5" stroke-opacity="0.5"/>          
</svg>
</body>
</html>
A rectangle is painted by specifying the above XML tag and properties

Figure 3: A rectangle is painted by specifying the above XML tag and properties

SVG Ellipse:

Now we will try to draw an ellipse using the SVG tag. tag is used to draw a ellipse in SVG. Give an id to this tag, id="myEllipse". Now to draw a ellipse you have to give center coordinates of ellipse (cx, cy) and x- radius and y- radius (rx, ry). Now you can add the style properties to add the stroke color and stroke width by "stroke:black;stroke-width:3". You can also fill the ellipse by "fill:#3F5208;".

Listing 4: HTML5 Script to draw an Ellipse
 
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Ellipse Example</h2>
<svg id="svgEllipseTutorial" height="150" xmlns="http://www.w3.org/2000/svg">
    <ellipse id="myEllipse" cx="120" cy="60" rx="100" ry="50" style="fill:#3F5208;stroke:black;stroke-width:3"/>    
</svg>
</body>
</html>
A Ellipse is painted by specifying the above XML tag and properties

Figure 4: A Ellipse is painted by specifying the above XML tag and properties

SVG Polygon:

The HTML5-SVG provide different tag to draw a polygon. As you can see in below code, the tag is used here to draw it. The properties of this tag is similar to other tags as we discussed, except this tag have a property 'points', The points are the coordinates of the polygon. So you have to specify the coordinates in pair of (x, y), the two points should have a gap in between. for example - the below polygon have first point as (10,10), second point as (75,150) and third point as (150,60).

After running the below program you can see the output, its same as expected.

Similarly for polygon also you can define the stroke color, stroke width, fill color etc.

Listing 5: HTML5 Script to draw an Polygon

 
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Polygon Example</h2>
<svg id="svgPolygonTutorial" height="200" xmlns="http://www.w3.org/2000/svg">
    <polygon id="myPolygon" points="10,10 75,150 150,60" style="fill:#63BCF7;stroke:black;stroke-width:3"/> 
</svg>
</body>
</html>
A Polygon is painted by specifying the above XML tag and properties

Figure 5: A Polygon is painted by specifying the above XML tag and properties

Conclusion:

I have covered the SVG-Line, SVG-Circle, SVG-Rectangle, SVG-Ellipse and SVG-Polygon, these are the basic shapes of SVG. In my next tutorial I will cover the more advance SVG topics.

As always, Please comment here to clear your doubts and ask your questions, we will be happy to assist you by answering the queries.



I am having total 7+ years of experience in developing applications using C#, VB.NET, ASP.NET, Silverlight, WCF, SQL Server and Oracle. I am holding a M.Tech degree in Intelligent systems. For more information, visit my Linkedin p...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login