HTML 5 TutorialsExample of SVG in HTML5

Example of SVG in HTML5

In this post we are going to discuss how to use SVG in HTML5, unlike HTML, HTML5 allows developers to use this interesting feature. SVG stands for Scalable Vector Graphics. It is a language use for describing graphics in XML format. SVG is used to define vector based graphics for the web. Benefits of SVG graphic is, it does not compromise in quality if image is resized or zoomed. It is mostly use for drawing charts, graphs with x,y coordinates also you can animate every element in SVG. SVG is W3C Recommendation. There are various benefits of using SVG, below are few ones that I like the most.

  1. Images are in SVG are scalable
  2. Printing images created using SVG are of high quality, at given any resolution
  3. You do not need to have any software to create images (photoshop, coral etc), they can be created using any simple text editor 🙂
  4. Unlike bitmap images you can zoom it

All latest browsers supports SVG, except in some older version of IE, you might need to install SVG viewer. Now we are only going to focus on drawing in this post.

You can start SVG embedding by using following tag in your HTML file.

<svg xmlns="">

To draw a image this is completely different than any other regular common software, this is done with XML based language, to draw a circle you will have to use circle tag

<svg xmlns="">
<circle id="redcircle" cx="75" cy="75" r="40" fill="green" />

Without Border With Border

To draw a border you can add inside circle tag

stroke="black" stroke-width="2"

There are some SVG element available to draw shapes. Such as line, polyline, rect, circle (in above example), ellipse, polygon and path (wait for my next post about path element).

To draw a line you will have to use line element, but replacing circle element from above code will now work here, you will have to enter proper coordinates in order to draw desired image.

(NOTE – For beginners drawing images using SVG might be tough task since, one has to know about coordinates properly)
For now remember x1 and y1 are starting coordinate and x2 and y2 are ending coordinates.

<line x1=’25’ y1="150" x2=’200′ y2=’150′ style=’stroke:green;stroke-width:10′ />

Output will look like this

Note usage of style attribute inside line tag, this allows you add color and width of the line

To draw a rectangle is easier

<line x1=’25’ y1="150" x2=’200′ y2=’150′ style=’stroke:green;stroke-width:10′ />

Output will look like this

Same goes with ellipse

<ellipse cx="100" cy="50" rx="100" ry="50" fill="green" />

Output will look like this

To draw polyline use below code

<polyline points="0,40 40,40 40,80 80" style="fill:white;stroke:green;stroke-width:4"/>

Output will look like this

And polygone can be drawn like this

<polygon points="20,10 200,20, 100,50" fill="green" />

Output will look like this

Check our next post on more examples on path, filters and gradient element in near future, in this post we have covered basic shapes using SVG using elements like circle, line, rectangle, ellipse, polyline and polygon.

Exclusive content

- Advertisement -

Latest article


More article

- Advertisement -