Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Difference between Graphics tags Canvas and svg tags

    @siddharth.shahi
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 150
    Comment on it

    HTML5 has tags for graphics like:
    1. Canvas
    2. SVG

    There are certain differences between the two:
    1. SVG is resolution independent while canvas is resolution dependent.
    2. SVG supports event handlers while canvas doesnot support event handlers
    3. SVG is suited for larger redering area while canvas doesn't have that capability.
    4. SVG is not suited for game application while canvas is suited for graphic intensive games.
     

    Syntax of SVG:
    HTML:

    <svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="red" />
</svg>


    Syntax of canvas:
    HTML:
     

    <canvas id="demo" width="300" height="300" style="1px solid #333;"></canvas>

    JS:

    var element = document.getElementById("demo");
var graphic = element.getContext("2d");
element.font = "30px Arial";
element.strokeText("See the change.......",10,50);
element.fillstyle="#ddd";
element.fillRect(0,0,200,50);

     

    Hope this will make you understand more about graphic tag.

    HTML5 Graphics Svg Canvas javascript Blog difference
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: