SVG 和 HTML 5 Canvas 的区别

SVG：可缩放矢量图形 (SVG) 是一种基于 XML 的图像格式，用于为 Web 定义基于二维矢量的图形。与光栅图像（例如 .jpg、.gif、.png 等）不同，矢量图像可以放大或缩小到任何程度，而不会降低图像质量。

使用一系列遵循 XML 模式的语句绘制 SVG 图像——这意味着可以使用任何文本编辑器（例如记事本）创建和编辑 SVG 图像。与其他图像格式（如 JPEG、GIF、PNG 等）相比，使用 SVG 还具有其他几个优点。

例子：

  

    
    

  

    

        SVG Circle(Geeks For Geeks)
    
  
    

  

输出：

Canvas： HTML 元素用于通过脚本（通常是 JavaScript）动态绘制图形。元素只是图形的容器。您必须使用脚本来实际绘制图形。 Canvas 有几种绘制路径、框、圆、文本和添加图像的方法。

例子：

  

    HTML5 Canvas Tag

  

    Canvas Square(Geeks For Geeks)
  
    
    
      
    
        var c = document.getElementById('newCanvas');
        var ctx = c.getContext('2d');
        ctx.fillStyle = '#7cce2b';
        ctx.fillRect(0, 0, 100, 100);
    

  

输出：

SVG 和 HTML5 Canvas 的区别：

SVG	Canvas
Vector based (composed of shapes)	Raster based (composed of pixel)
SVG has better scalability. So it can be printed with high quality at any resolution.	Canvas has poor scalability. Hence it is not suitable for printing on higher resolution.
SVG gives better performance with smaller number of objects or larger surface.	Canvas gives better performance with smaller surface or larger number of objects.
SVG can be modified through script and CSS.	Canvas can be modified through script only.
Multiple graphical elements, which become the part of the page’s DOM tree.	Single element similar to in behavior. Canvas diagram can be saved to PNG or JPG format.