SVG和HTML5画布有什么区别?他们似乎都对我做了同样的事情。基本上,它们都是使用坐标点绘制矢量图片。
我遗漏了什么?SVG和HTML5画布的主要区别是什么?为什么我应该选择一个而不是另一个?
发布于 2011-02-19 11:15:35
SVG就像一个“绘图”程序。绘图被指定为每个形状的绘图说明,并且任何形状的任何部分都可以更改。绘图是以形状为导向的。
Canvas就像一个“画图”程序。一旦像素出现在屏幕上,这就是你的图画。您不能更改形状,除非使用其他像素覆盖它们。绘画是面向像素的。
能够改变绘图对于一些程序来说是非常重要的;例如绘图应用程序,绘图工具等。所以SVG在这方面有优势。
对于一些艺术节目来说,能够控制单个像素非常重要。
使用Canvas比使用SVG更容易获得通过鼠标拖动进行用户操作的出色动画性能。
计算机屏幕上的一个像素通常会消耗4个字节的信息,而现在一个计算机屏幕需要几兆字节。因此,如果您想让用户编辑图像,然后再次上传它,Canvas可能会很不方便。
相比之下,使用SVG绘制覆盖整个屏幕的几个形状只占用几个字节,下载速度很快,并且可以很容易地再次上传,并且在该方向上的优势与在另一个方向上的优势相同。所以SVG可以比Canvas更快。
Google使用SVG实现了Google Maps。这使得这款web应用程序的性能更快,滚动也更流畅。
发布于 2012-10-13 03:00:18
SVG和Canvas给我的印象最深的两件事是,
能够在没有DOM的情况下使用Canvas,因为SVG在很大程度上依赖于DOM,并且随着复杂性的增加,性能会降低。就像游戏设计一样。
使用SVG的好处是分辨率在不同平台上保持相同,这在Canvas中是不存在的。
这个网站提供了更多的详细信息。http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/
发布于 2017-12-13 01:23:56
SVG
是图形的规范,类似于文件格式。SVG是一种文档。您可以像交换HTML文件一样交换SVG文件。此外,因为SVG元素和HTML元素共享相同的DOM,所以可以使用JavaScript以与创建HTML DOM相同的方式生成SVG DOM。但是你不需要JavaScript来生成SVG文件。一个简单的文本编辑器就足以编写SVG。但您至少需要一个计算器来计算绘图中形状的坐标。
CANVAS
只是一个绘图区域。有必要使用JavaScript来生成画布的内容。您不能交换画布。它不是文档。并且画布的元素不是DOM树的一部分。不能使用DOM来操作画布的内容。相反,您必须使用专用的canvas API将形状绘制到画布中。
SVG
的优点是,您可以将图形作为文档进行交换。CANVAS
的优点是,生成内容的JavaScript应用编程接口不太冗长。
下面是一个示例,它表明您可以实现类似的结果,但在JavaScript中如何实现这一点却非常不同。
// Italic S in SVG
(function () {
const ns='http://www.w3.org/2000/svg';
let s = document.querySelector('svg');
let p = document.createElementNS (ns, 'path');
p.setAttribute ('id', 'arc');
p.setAttribute ('d', 'M 0.9 -0.9 a 0.8,0.4 -10 0,0 -0.9,0.9');
s.appendChild (p);
let u = document.createElementNS (ns, 'use');
u.setAttribute ('href', '#arc');
u.setAttribute ('transform', 'rotate(180)');
s.appendChild (u);
})();
// Italic S in CANVAS
(function () {
let c = document.querySelector('canvas');
let w = c.width = c.clientWidth;
let h = c.height = c.clientHeight;
let x = c.getContext('2d');
x.lineWidth = 0.05 * w;
x.moveTo (w/2, h/2);
x.bezierCurveTo (w*0.02, h*0.4,
w*0.4, -h*0.02,
w*0.95, h*0.05);
x.moveTo (w/2, h/2);
x.bezierCurveTo (w*(1-0.02), h*(1-0.4),
w*(1-0.4), h*(1+0.02),
w*(1-0.95), h*(1-0.05));
x.stroke();
})();
svg, canvas {
width: 3em;
height: 3em;
}
svg {
vertical-align: text-top;
stroke: black;
stroke-width: 0.1;
fill: none;
}
canvas {
vertical-align: text-bottom;
}
div {
float: left;
}
<div><svg viewBox="-1 -1 2 2"></svg>VG</div>
<div>CANVA<canvas></canvas></div>
如您所见,结果几乎相同,但JavaScript代码完全不同。
SVG是通过DOM使用createElement
、setAttribute
和appendChild
创建的。所有图形都在属性字符串中。SVG有更强大的原语。例如,画布没有任何等同于SVG圆弧路径的东西。画布示例尝试使用Bezier曲线模拟SVG圆弧。在SVG中,您可以重用元素以对其进行转换。在画布中,您不能重用元素。相反,您必须编写一个JavaScript函数才能调用它两次。SVG有一个viewBox
,它允许使用标准化的坐标,这简化了旋转。在画布中,您必须根据clientWidth
和clientHeight
自己计算坐标。您可以使用CSS设置所有SVG元素的样式。在画布中,您不能使用CSS设置任何样式。因为SVG是一个DOM,所以您可以将事件处理程序分配给所有SVG元素。画布中的元素没有DOM和DOM事件处理程序。
但另一方面,画布代码更容易阅读。您不需要关心XML名称空间。而且您可以直接调用图形函数,因为您不需要构建DOM。
教训很清楚:如果您想快速绘制一些图形,请使用画布。如果需要共享图形,比如使用CSS设置样式,或者希望在图形中使用DOM事件处理程序,则构建一个SVG。
https://stackoverflow.com/questions/4996374
复制相似问题