0

0

SVG 与 HTML5 的 canvas 各有什么优点,哪个更有前途?

php中文网

php中文网

发布时间:2016-06-07 08:42:11

|

2715人浏览过

|

来源于php中文网

原创

回复内容:

Canvas是使用JavaScript程序绘图(动态生成),SVG是使用XML文档描述来绘图。
从这点来看:SVG更适合用来做动态交互,而且SVG绘图很容易编辑,只需要增加或移除相应的元素就可以了。
同时SVG是基于矢量的,所有它能够很好的处理图形大小的改变。Canvas是基于位图的图像,它不能够改变大小,只能缩放显示;所以说Canvas更适合用来实现类似于Flash能做的事情(当然现在Canvas与Flash相比还有一些不够完善的地方)。
关于最后一点二者谁更有前途:从上面我们可以知道二者是有不同用途的,作为一个开发者,你应该做的是理解应用程序的具体需求并选择正确的技术来实现它。

这两种技术都搞过,几年前写过svg,最近研究canvas,两者各有各的适用范围:

Canvas适用场景Canvas提供的功能更原始,适合像素处理,动态渲染和大数据量绘制SVG适用场景SVG功能更完善,适合静态图片展示,高保真文档查看和打印的应用场景

下面的内容引自:HTML5之图形绘制技术(Canvas Vs SVG)


Canvas和SVG是HTML5中主要的2D图形技术,前者提供画布标签和绘制API,后者是一整套独立的矢量图形语言,成为W3C标准已经有十多年(2003.1至今),总的来说,Canvas技术较新,从很小众发展到广泛接受,注重栅格图像处理,SVG则历史悠久,很早就成为国际标准,复杂,发展缓慢(Adobe SVG Viewer近十年没有大的更新)

SVG 与 HTML5 的 canvas 各有什么优点,哪个更有前途?

Canvas vs SVG

都是HTML5推荐使用的图形技术,Canvas基于像素,提供2D绘制函数,是一种HTML元素类型,依赖于HTML,只能通过脚本绘制图形;SVG为矢量,提供一系列图形元素(Rect, Path, Circle, Line …),还有完整的动画,事件机制,本身就能独立使用,也可以嵌入到HTML中,SVG很早就成为了国际标准,目前的稳定版本是1.1 – Scalable Vector Graphics (SVG) 1.1 (Second Edition),两者的主要特点见下面的表格:

知鹿匠
知鹿匠

知鹿匠教师AI工具,新课标教案_AI课件PPT_作业批改

下载

立即学习前端免费学习笔记(深入)”;

SVG 与 HTML5 的 canvas 各有什么优点,哪个更有前途?

SVG与Canvas主要特点

根据两者的不同特点,Canvas和SVG有各自的适用范围

Canvas适用场景Canvas提供的功能更原始,适合像素处理,动态渲染和大数据量绘制SVG适用场景SVG功能更完善,适合静态图片展示,高保真文档查看和打印的应用场景 SVG 与 HTML5 的 canvas 各有什么优点,哪个更有前途? 对于开发人员而言,最直观的区别在于:
1.对于画在Canvas上的部件,你需要处理重绘。而SVG则不用,你修改svg dom则系统会自动帮你重绘
2.Hittest,即canvas不负责帮你侦测鼠标/触摸事件发生在哪一个图形元件上;而svg可以。
3.Canvas效率高得多

如果还不够直观,可以找一些类比:
canvas的工作方式就像传统的2d图形引擎比如GDI;而SVG的工作方式更像WPF(XAML)、HTML/CSS这类由标记控制的绘图引擎 存在意味着合理 不如问两者分别适合什么场景 canvas是个像素库 绘制完了基本不记录过程 更快 svg建立了一大堆可交互对象 本性长于交互 但性能会弱些 但这种界限也在被一些js库打破 如fabric.js 以及百度林峰的zRender 这些库在canvas上构建一层mvc层 可以如svg一样操作和交互 性能上往往比原生svg要好一些 正如此 在基于zRender的可视化库可以绘制数万个点 倘使用svg 早挂了。而webgl-canvas实时绘点是百万级的 所以看你的场景 如果pc端强交互少元素 svg胜出 | pc端弱交互而强性能 用canvas | pc端超强性能 webgl-canvas | 移动端弱交互 原生canvas挺好(木有ie的世界真好) | 移动端强交互 刚才提到的一些基于canvas的库不错(svg性能很挫) sorry这是个设备和需求的二维表 偷懒了。 个人的经验 有误请拍 msdn.microsoft.com/zh-c Canvas
  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏,其中的许多对象会被频繁重绘
SVG
  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序(比如谷歌地图)
  • 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
  • 不适合游戏应用
总结来w3shool. 手机上可能还是SVG更合适一些。 我是这样理解的:浏览器就是一个自动化的canvas 实时渲染svg格式图形
以canvas为基础开发的图表插件 也是对内部矢量图形格式进行渲染
做图表
想要折腾就用canvas
简单美观
就用svg
另外svg当然不适合做游戏
万一哪天 浏览器直接进化为3d渲染引擎 直接拖个3d格式文件进来就能看 也未尝不可
现阶段只是用canvas来做渲染引擎 我觉得SVG在"遥远"的将来更有前途 SVG跟Canvas的关系就像几何与美术
So,你觉得哪个更有前途?
HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

32

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

30

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

33

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

7

2026.01.31

漫画防走失登陆入口大全
漫画防走失登陆入口大全

2026最新漫画防走失登录入口合集,汇总多个稳定可用网址,助你畅享高清无广告漫画阅读体验。阅读专题下面的文章了解更多详细内容。

11

2026.01.31

php多线程怎么实现
php多线程怎么实现

PHP本身不支持原生多线程,但可通过扩展如pthreads、Swoole或结合多进程、协程等方式实现并发处理。阅读专题下面的文章了解更多详细内容。

1

2026.01.31

php如何运行环境
php如何运行环境

本合集详细介绍PHP运行环境的搭建与配置方法,涵盖Windows、Linux及Mac系统下的安装步骤、常见问题及解决方案。阅读专题下面的文章了解更多详细内容。

0

2026.01.31

php环境变量如何设置
php环境变量如何设置

本合集详细讲解PHP环境变量的设置方法,涵盖Windows、Linux及常见服务器环境配置技巧,助你快速掌握环境变量的正确配置。阅读专题下面的文章了解更多详细内容。

0

2026.01.31

php图片如何上传
php图片如何上传

本合集涵盖PHP图片上传的核心方法、安全处理及常见问题解决方案,适合初学者与进阶开发者。阅读专题下面的文章了解更多详细内容。

2

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号