HTML SVG-基础知识

什么是SVG？

• SVG 代表可缩放矢量图形。
• 它基本上定义了 XML 格式的基于矢量的图形。
• SVG 图形在缩放或调整大小时不会失去任何质量。
• SVG 文件中的每个元素和每个属性都可以设置动画。

SVG有什么优点？
与其他图像格式（如 JPEG 和 GIF）相比，使用 SVG 的优点是：

• 可以使用任何文本编辑器创建和编辑 SVG 图像。
• 可以搜索、索引、编写脚本和压缩 SVG 图像。
• SVG 图像是可缩放的。
• SVG 图像可以在任何分辨率下以高质量打印。

HTML SVG 和 HTML Canvas 之间的差异

1. SVG 是一种用 XML 描述 2D 图形的语言，而 Canvas 使用 JavaScript 动态绘制 2D 图形。
2. 如果更改了 SVG 对象的属性，浏览器可以自动重新渲染形状，而 Canvas 是逐像素渲染的。在 canvas 中，一旦绘制图形，浏览器就会忘记它。
3. SVG 与分辨率无关，而 CANVAS 与分辨率有关。
4. SVG 支持事件处理程序，而 CANVAS 不支持事件处理程序。

在 HTML 中绘制一个 SVG 圆
例子：

输出：

在 HTML 中绘制一个 SVG 矩形
输入 ：

输出：

在 HTML 中绘制 SVG 圆角矩形
例子 ：

输出：

在 HTML 中绘制一个 SVG Star
例子：

输出：

使用 SVG 在 HTML 中绘制徽标
例子：

HTML

输出：

支持的浏览器：

• 谷歌浏览器 4.0
• 浏览器 9.0
• 火狐 3.0
• 歌剧 10.1
• Safari 3.2