What is the difference between SVG and HTML5 Canvas?-HTML Tutorial-php.cn

What is the difference between SVG and HTML5 Canvas?

PHPz

Release： 2023-09-18 22:49:02

forward

1163 people have browsed it

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>

Copy after login

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>

Copy after login

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!