SVG 与 Canvas 的 6 大区别比较表
作者:admin 时间:2022-8-10 17:55:34 浏览:SVG 缩写为 Scalable Vector Graphics。它是一种基于矢量的图形，使用基于 XML 的图形格式为交互提供支持。SVG 图像比位图图像要好得多。在 SVG 图像中，矢量图像由一组固定的形状组成，在缩放这些图像时，它会保留图像的形状。
Canvas 是一个 HTML 元素，用于在网页上绘制图形。它被称为具有用于在其上绘图的即时模式图形应用程序编程接口的位图。元素 Canvas 用作图形的容器。在 Canvas 中，我们需要脚本来绘制图形。
以下是 SVG 与 Canvas 的 6 大区别比较表
| 比较基础 | SVG | Canvas |
|---|---|---|
| 定义 | 它是一种基于 XML 的交互性矢量图像格式。 | 它是 HTML 中用于在网页上绘制图形的元素。 |
| 格式 | 它使用矢量图像格式。 | 它使用位图图像格式。 |
| 灵活性 | SVG 更加灵活，因为我们可以将尺寸扩展到其自然之外 | Canvas图像不是那么灵活。 |
| 事件处理程序 | 它为事件处理程序提供任何支持。 | 它不提供对事件处理程序的支持。 |
| 应用 | 它不适合任何游戏应用程序。 | 这些非常适合游戏应用。 |
| 程序 | SVG是指绘制程序。 | Canvas是指绘制程序。 |
除此之外，你还可以看看前文SVG 与 Canvas 的五大区别。
详细了解一下 SVG 与 Canvas
W3C 开发了 SVG。它最初于 2001 年发布。文件扩展名为 .svg 和 .svgz。它的网络媒体类型是image/svg+xml，统一类型标识符是public.svg-image。位图图像由一组固定的像素组成，在缩放位图时，它会向我们显示图像的像素。可以借助 Inkscape、adobe illustrator、adobe flash 等矢量图形编辑器生成 SVG 图像。
由于 Internet Explorer 等浏览器不支持矢量图像，因此网络上的 SVG 使用受到限制。Konqueror 是 2004 年第一个支持 SVG 图像的浏览器。此后，慢慢地，Google 宣布支持 Web 内容中的矢量图像。SVG 现在也支持原生浏览器、插件和移动浏览器。
Canvas 非常具有交互性，它可以响应用户与任何触摸事件、关键字和鼠标的交互。Canvas 允许选择将图像保存为 .png 或 .jpeg。Canvas 在一次处理多个元素方面非常高效，并且在画布上绘制的对象可以进行动画处理。
Canvas 主要依赖于分辨率，并且它具有复杂的可视化效果，因为有时绘制大面积区域可能会很慢。有几种策略可用于绘制不同的形状，如路径、框、圆、文本和添加图像。
示例
SVG
<body>
<svg width="300" height="300">
<circle cx="100" cy="100" r="50" stroke="red" fill="blue" />
SVG image not supported!
</svg>
</body>
输出
Canvas
<body>
<canvas id="Rectangle" width="210" height="120" style="border: 3px solid green">
<script>
var canRect = document.getElementById("Rectangle");
var objContext = canRect.getContext("2d");
objContext.fillStyle='red';
objContext.fillRect(15,15,175,85);
</script>
</body>
输出
总结
SVG 与 Canvas 都用于创建或开发图像和形状。开发人员根据要求使用 SVG 和 Canvas 来解决他们的目的，例如 SVG 不用于创建游戏等动态应用程序，而 canvas 不用于文本渲染不佳和缺乏动画。SVG 和 Canvas 都用于在 Web 上创建丰富的图形，但它们有着根本的不同。
SVG主要依赖文件，而canvas主要使用脚本。SVG 被认为更易于访问，因为它们支持文本，而 Canvas 依赖于 Javascript。因此，浏览器不支持 SVG 但仍然可以显示文本的事件。如果 Javascript 已被禁用，则设备无法解释 javascript 输出。因此，始终有必要根据需求及其用途来选择技术。
你还可以看看前文SVG 与 Canvas 的五大区别。
相关文章
- 站长推荐
