HTML 5 TutorialsSVG in HTML5


In this tutorial we are going to learn a new topic SVG. Today we will have some introduction on SVG and then try it practically in next tutorial.

  • What is SVG?
    • Full form of SVG is “Scalable Vector Graphics”.
    • SVG is used to define vector-based graphics on a web page.
    • Graphics in SVG are defined in XML(Extensive Markup Language).
    • Vector graphics do not lose any quality if zoomed in, stretched, scaled or resized.
    • Elements can be animated.
    • SVG is a w3c recommendation.
    • SVG is mostly used for vector type diagrams like Pie charts, two-dimensional graphs in an X, Y coordinate system etc. However, it can be used for other diagrams also.
    • Most of the web browsers can display SVG just like they can display PNG, GIF and JPG.
  • Embeding SVG in HTML5:
    • You can use SVG in HTML5.
    • HTML5 allows embeding SVG directly using


    • It has a simple syntax, which is shown below:
    • <svg xmlns=””>
              //content here
  • Difference between SVG and Canvas:
    • SVG is a language for describing 2D graphics in XML while Canvas draws 2d graphics on the fly using javascript.
    • Each shape in SVG is looked at as an object.
    • If its attributes are changed, the browser can automatically re-render the shape.
    • On the other hand, Canvas is pixel by pixel. Once the graphic is drawn, the browser forgets it. If its position is changed, the entire scene needs to be redrawn.
    • SVG has support for event handlers and Canvas does not have support for event handlers.
    • SVG is not for graphic – intensive games and applications. Canvas is well suited for intense graphics.
  • Advantages for Raster – Based Images:
    • Raster – based images are the standard images that when stretched or resized get distorted.
    • SVG graphics are created using mathematical formulas that need far less data to be stored in the source file because you don’t have to store the data for each individual pixel like standard images.
    • Vector images scale much better. Trying to scale a standard image up from its original size can result in distorted (or pixilated) images.
    • The source file for an SVG image is a text – based file, so it’s both accessible and search engine friendly.

    This was a short intro about SVG. We will learn it practically in the next session.


Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article


More article

- Advertisement -