Canvas 和 SVG 都允许您在浏览器中创建图形，但是它们在根本上是不同的。
SVG
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas
Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
Canvas 与 SVG 的比较
下表列出了 canvas 与 SVG 之间的一些不同之处。
Canvas
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序（比如谷歌地图）
- 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
- 不适合游戏应用
HTML5 支持内联 SVG。
什么是SVG？
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用于定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
- SVG 是万维网联盟的标准
SVG 的优势
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
- SVG 图像可通过文本编辑器来创建和修改
- SVG 图像可被搜索、索引、脚本化或压缩
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。
把 SVG 直接嵌入 HTML 页面
在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中：
实例
<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>
结果：
如需学习更多有关 SVG 的知识，请阅读我们的 SVG 教程。
相关推荐
在Web开发中，HTML5引入了两种强大的技术来处理图形：Canvas和SVG。这两种技术虽然都可以用于创建丰富的2D图形，但它们的实现方式和适用场景有着显著的差异。 SVG，全称为Scalable Vector Graphics（可缩放矢量图形...
在给定的资源中，我们看到了三个JavaScript文件：`html2canvas.js`、`html2canvas.svg.js`和`bluebird.min.js`。`html2canvas.js`是核心库，用于处理HTML到Canvas的转换；`html2canvas.svg.js`可能是一个扩展，专门...
在SVG转IMG的场景下，我们首先需要将SVG元素转换为HTML，然后用`html2canvas`将HTML元素渲染到Canvas上，最后再将Canvas转换为图片（例如JPEG或PNG）。 使用步骤如下： - 引入`html2canvas`库：在HTML文件中通过`...
当`html2canvas`遇到SVG元素时，通过先用`canvg`将SVG渲染到Canvas，然后再让`html2canvas`处理，可以有效地解决SVG截图不完整的问题。 下面是一个结合`html2canvas`和`canvg`来完整截图包含SVG元素的流程： 1. ...
这个JavaScript库允许开发者将网页的HTML结构及其CSS样式转换为Canvas元素，进而可以进一步转化为图像，例如JPEG、PNG或者SVG格式，这一过程被称为屏幕截图或网页快照。 **html2canvas.js的原理与优势** ...
HTML5是现代网页开发的重要标准，它引入了许多新特性，如Canvas、SVG（Scalable Vector Graphics）以及Web Storage等，极大地丰富了网页的表现力和交互性。SVG是一种用于创建可伸缩矢量图形的XML标记语言，它可以...
接下来就是调用该插件的canvg(canvasId,svgHtml)方法来转成canvas，这个方法第一个参数就是canvas标签的id，第二个自然就是svg标签内容了，就这样，svg转成了canvas 然后就是将canvas转成图片了，这个更加简单了 ...
1. **html2canvas.svg.js** 和 **html2canvas.svg.min.js**：这两个文件可能包含了SVG相关的支持，使得HTML2Canvas能够更好地处理SVG元素，提供更高质量的图像转换。 2. **html2canvas.js**：这是未压缩的源代码版本...
`html2canvas`是一个非常实用的JavaScript库，它能够将HTML元素转换为canvas元素，进一步可以将其转化为图片（如JPEG、PNG或SVG）。这个过程通常称为“屏幕抓取”或“页面截图”。`html2canvas`能够处理大部分CSS...
如果html标签里有svg标签， 目前htm2canvas不支持svg标签。 这个情况下就需要先把svg处理成html2canvas能处理标签。 策略是 svg 转换成 canvas ，html2canvas 转换完成，再恢复svg。这里需要这个插件canvg（svg转...
Canvas2Svg 该库使用JavaScript将Canvas转换为SVG。 换句话说，该库使您可以使用canvas api构建SVG文档。 为什么要使用它？ 您有一个要作为SVG文件保留的画布图形。 您喜欢导出内容。 因为您不想将自定义文件...
svg转为canvas
这样的需求通常出现在需要在不支持SVG的浏览器（如早期版本的IE）中显示矢量图，或者在需要与HTML5 Canvas进行交互或利用其特性（如绘图、滤镜或动态效果）时。本篇将详细解释这个过程，并提供在IE环境下实现的方法...
在现代Web开发中，SVG（Scalable Vector Graphics）和Canvas是两种强大的图形渲染技术，它们各有特色且常被用于创建动态、交互式的视觉效果。本项目“酷炫的svg与canvas结合动画”旨在探索如何将这两者巧妙融合，以...
HTML5是现代网页开发的重要标准，它引入了许多新的特性，其中SVG（Scalable Vector Graphics）和Canvas是用于创建动态图形的两个关键工具。本文将深入探讨如何利用这两个技术以及CSS3背景技术来创建各种图像和填充...
《html2canvas@1.0.0-rc.4：网页截屏库的详细解析》 html2canvas是一个JavaScript库，它的主要功能是允许在浏览器环境中将HTML元素转化为Canvas图像，进而可以进行保存或者进一步的图像处理。这个库在前端开发中...
HTML5 Canvas 和 SVG 是两种强大的Web图形技术，用于在网页上创建动态、交互式的图形内容。这个名为"HTML5 Canvas+SVG实现的彩色水泡分裂动画特效源码"的压缩包，显然包含了一个利用这两种技术制作的动画效果，具体...
jsMind is mind map library built by javascript, it base on html5 canvas and svg. jsMind is released under the BSD license, you can embed it in any project as long as you abide by the license.