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开发 之 HTML 5 Canvas vs. SVG.docx
该资源有demo 亲测可用 并且兼容IE 目前所测试浏览器就是 谷歌和IE
保存HTML为图片的js,html2canvas.js/html2canvas.min.js/html2canvas.svg.js/html2canvas.svg.min.js
html2canvas可以截图指定dom元素,但是dom元素中如果含有svg会导致截图不完整,例如使用jsPlumb流程图,其中连线无法截图,所以结合了canvg可以完整截图
svg转img所需 html2canvas方法,svg转canvas所需canvg方法 svg转img所需 html2canvas方法,svg转canvas所需canvg方法
Canvas2Svg 该库使用JavaScript将Canvas转换为SVG。 换句话说,该库使您可以使用canvas api构建SVG文档。 为什么要使用它? 您有一个要作为SVG文件保留的画布图形。 您喜欢导出内容。 因为您不想将自定义文件...
如果html标签里有svg标签, 目前htm2canvas不支持svg标签。 这个情况下就需要先把svg处理成html2canvas能处理标签。 策略是 svg 转换成 canvas ,html2canvas 转换完成,再恢复svg。这里需要这个插件canvg(svg转...
svg转为canvas
HTML5 Canvas+SVG实现的彩色水泡分裂动画特效源码
comic.js, 用于 HTML5 Canvas & Raphael.js & D3.js & SVG.js的卡通样式图 comic.jsJavascript库,用作 Raphael.js,D3.js, SVG.js 或者作为 HTML5 Canvas 插件的插件,提供动画样式绘制的功能。 请在 comic.js ...
接下来就是调用该插件的canvg(canvasId,svgHtml)方法来转成canvas,这个方法第一个参数就是canvas标签的id,第二个自然就是svg标签内容了,就这样,svg转成了canvas 然后就是将canvas转成图片了,这个更加简单了 ...
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.
使用HTML5 canvas和svg从DOM节点生成可打印的分页pdf
html2canvas js 框架 和 java设置代理解决图片跨域访问时不能生成图片的...zip包含:设置代理使用跨域图片.docx,canvas2image.js,canvg.js,html2canvas.js,html2canvas.min.js,html2canvas.svg.min.js共6个文件
HTML5 canvas+svg实现火焰燃烧滤镜动画效果源码.zip
最近在用svg的点击事件做东西,之所以用svg而不用canvas就是因为svg内的元素可以添加点击事件,他们之间详细的区别如下: Canvas 与 SVG 的比较(详见) 下表列出了 canvas 与 SVG 之间的一些不同之处。 Canvas •...
9种不同的图像和填充纹理图片效果,分别使用html5 svg,html5 canvas和css3背景技术完成,想学习的就来吧!
包含 html2canvasv.js html2canvasv.min.js html2canvasv.svg.js html2canvasv.svg.min.js
canvg.js用于帮助将页面svg元素转换为canvas元素,结合rgecolor.js和html2canvas.js来解决截取屏幕中的svg无内容问题。