Home > Article > Web Front-end > What is the difference between SVG and HTML5 Canvas?

What is the difference between SVG and HTML5 Canvas?

PHPzforward: 2023-09-18 22:49:021145browse

SVG和HTML5 Canvas之间有什么区别？

HTML

SVG	HTML Canvas
SVG has better scalability. So you can print with high quality at any resolution	Canvas is less scalable. Therefore, it is not suitable for printing at higher resolution
SVG for smaller numbers of objects or larger surfaces.	Canvas provides better performance on smaller surfaces or larger numbers of objects.
SVG can be modified through scripts and CSS	Canvas can only be modified through scripts
SVG is vector based and consists of shapes.	The canvas is based on raster and consists of pixels.

Example

You can try running the following code to add Scalable Vector Graphics (SVG) to a web page-

<!DOCTYPE html>
<html>
   <head>
      <style>
         #svgelem {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
      <title>HTML5 SVG</title>
   </head>
   <body>
      <h2 align = "center">HTML5 SVG Circle</h2>
      <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
         <circle id = "bluecircle" cx = "60" cy="60" r = "50" fill = "blue" />
      </svg>
   </body>
</html>

Example

You can try running the following code to learn how to draw a rectangle using HTML5 Canvas:

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 Canvas Tag</title>
   </head>
   <body>
      <canvas id = "newCanvas" width = "200" height = "100" style = "border:1px solid #000000;"></canvas>
      <script>
         var c = document.getElementById(&#39;newCanvas&#39;);
         var ctx = c.getContext(&#39;2d&#39;);
         ctx.fillStyle = &#39;#7cce2b&#39;;
         ctx.fillRect(0,0,300,100);
      </script>
   </body>
</html>

The above is the detailed content of What is the difference between SVG and HTML5 Canvas?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript html5 css html xml 对象 canvas

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to define a definition list in HTML?Next article：How to define a definition list in HTML?

See more

What is the difference between SVG and HTML5 Canvas?

Example

Example

Related articles