Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Difference between SVG and Canvas

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 508
    Comment on it

    SVG

    An XML-based image format is the Scalable Vector Graphics (SVG) that is used to define 2D vector based graphics for the Web. We can scale up or down a vector image to any extent without losing the image quality.

    • SVG is Object Model-based.
    • The Document Object Model (DOM) has the subpart as multiple graphical elements.
    • With markup, Visual presentation is created and by CSS it is modified or programmatically through the script.
    • Accessibility is supported by SVG markup and object model directly.
    • With a smaller number of objects or larger surface, it gives better performance.
    • Good scalability — at any resolution it can be printed with high quality.

     

    Drawing rectangle with SVG

    <!DOCTYPE html>
    <html>
    <body>
    
    <svg width="600" height="200">
      <rect width="400" height="200" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)">
      Sorry, your browser does not support inline SVG.  
    </svg>
     
    </body>
    </html>
    

     

    Canvas

    Alike other HTML elements which you can place anywhere on your page the canvas has the same flexibility.

    We can accomplish drawing part using either a 2D or 3D drawing context.

    • Canvas is pixel based.
    • It is only HTML element which is identical to <img> in behavior.
    • Through script, we can create visual presentation and modified programmatically.
    • Accessibility is not supported by API ;   In addition to canvas, markup-based techniques must be used.
    • With a smaller number of objects or larger surface, it gives better performance.
    • Worst scalability — for printing on the higher resolution it is not suitable.

     

    Drawing rectangle with Canvas

    <!DOCTYPE html>
    <html>
    <body>
    
    <canvas id="drawCanvas" width="400" height="250" style="border:1px solid #0693CA;">
    </canvas>
    
    <script>
    
    var ca = document.getElementById("drawCanvas");
    var cnt = ca.getContext("2d");
    cnt.rect(22, 22, 152, 102);
    cnt.stroke();
    
    </script> 
    
    </body>
    </html>
    

     

 0 Comment(s)

Sign In
                           OR                           
                           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: