canvas 与 svg

最新推荐文章于 2025-06-07 10:33:23 发布

原创最新推荐文章于 2025-06-07 10:33:23 发布 · 429 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 3 个专栏收录

26 篇文章

订阅专栏

svg

1 篇文章

订阅专栏

canvas

1 篇文章

订阅专栏

本文对比分析了HTML5的canvas和SVG两种绘图技术。canvas是2D绘图API，通过JavaScript实现动态绘图和动画，适合复杂交互场景。SVG是基于XML的矢量图形语言，支持高保真静态图片和简单的动画，适用于需要缩放不失真的图形展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

canvas

canvas 是 HTML 5 新出的图片元素，它是 2d 绘图 API，使用 JavaScript 调用API 可以画 lines, shapes, images, text 甚至其他你想话的，并且不需要什么插件。

它是作为一个画布存在在网页中，画布上有你绘制的图案，利用 js 你可以实时的改变画布上的图案，以实现动画。

它的支持性也挺好，IE 9 开始支持，Chrome和Opera 9+ 也支持。

svg

SVG 可缩放矢量图形，是 XML 用来描述二维图形和绘图程序的语言。目前SVG在Firefox、Opera、Webkit浏览器、IE等浏览器中已经部分实现。

什么是 XML
它是一种类似于 HTML 的标记语言，设计宗旨在于传输数据而不是显示数据。
XML 数据以纯文本格式进行存储，因此提供了一种独立于软件和硬件的数据存储方法。通过读取你可以获取存储于其中的数据

SVG可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。图形和其组成部分可以变形，可以合成，还可以通过滤镜完全改变外观。

SVG提供了一些元素，用于定义圆形、矩形、简单或复杂的曲线，以及其他形状。
一个简单的SVG文档由 <svg> 根元素和基本的形状元素构成。另外还有一个g元素，它用来把若干个基本形状编成一个组。

eg:

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" fill="red" />

  <circle cx="150" cy="100" r="80" fill="green" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>

可以看到 svg 是在内部组合各种元素绘制形成相应的图案。并且矢量顾名思义是可以自由缩放的，根据屏幕像素点进行缩放，保留了图案的高清晰度。

总结

通过以上，我们可以知道 svg 和 canvas 的相同点，它们都是可以绘图的元素，并有自身的用法。
canvas 是一块画布，纯用 js 去画画的。根据你的 js 编写，动态去渲染画布上的图案，适用一些大量数据交互修改的，比较复杂的动画。由于它仅仅是根据你设定的大小，它是依赖于分辨率的。
而 svg 是一个个元素组成在一起的，包含 animate 元素，可做一些小小的动画，它的矢量优点也更适合做一些高保真的静态图片。