HTML5 SVG 矢量图
在本教程中，您将学习如何使用 HTML5 svg 元素在网页上绘制矢量图形。
什么是 SVG？
可缩放矢量图形 (SVG) 是一种基于 XML 的图像格式，用于为 Web 定义基于二维矢量的图形。 与光栅图像（例如 .jpg, .gif, .png 等）不同，矢量图像可以放大或缩小到任何程度而不会损失图像质量。
使用一系列遵循 XML 模式的语句绘制 SVG 图像 — 这意味着可以使用任何文本编辑器（例如记事本）创建和编辑 SVG 图像。 与 JPEG、GIF、PNG 等其他图像格式相比，使用 SVG 还有其他几个优点。
- 可以搜索、索引、编写脚本和压缩 SVG 图像。
- 可以使用 JavaScript 实时创建和修改 SVG 图像。
- SVG 图像可以在任何分辨率下以高质量打印。
- 可以使用内置动画元素对 SVG 内容进行动画处理。
- SVG 图像可以包含指向其他文档的超链接。
提示：矢量图像由数学定义的一组固定形状组成，而位图或光栅图像由一组称为像素的固定点组成。
将 SVG 嵌入 HTML 页面
您可以使用 HTML5 <svg> 元素将 SVG 图形直接嵌入到文档中。
让我们看一下以下示例，以了解其基本工作原理：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Embedding SVG in HTML</title>
</head>
<body>
<svg width="300" height="200">
<text x="10" y="20" style="font-size:14px;">
Your browser support SVG.
</text>
Sorry, your browser does not support SVG.
</svg>
</body>
</html>注意：所有主要的现代网络浏览器，如 Chrome、Firefox、Safari 和 Opera，以及 Internet Explorer 9 及更高版本都支持内联 SVG 渲染。
使用 SVG 绘制路径和形状
以下部分将向您解释如何使用新引入的 HTML5 <svg> 元素在网页上绘制基于矢量的基本路径和形状。
绘制一条线
用 SVG 绘制的最基本的路径是直线。 以下示例将向您展示如何使用 SVG <line> 元素创建一条直线：
<svg width="300" height="200">
<line x1="50" y1="50" x2="250" y2="150" style="stroke:red; stroke-width:3;" />
</svg><line> 元素的属性 x1, x2, y1 和 y2 画了一条从 (x1,y1) 到 (x2,y2) 的线。
绘制一个矩形
您可以使用 SVG <rect> 元素创建简单的矩形和正方形。 以下示例将向您展示如何使用 SVG 创建和设置矩形形状：
<svg width="300" height="200">
<rect x="50" y="50" width="200" height="100" style="fill:orange; stroke:black; stroke-width:3;" />
</svg><rect> 元素的属性 x 和 y 定义了矩形左上角的坐标。 属性 width 和 height 指定形状的宽度和高度。
绘制一个圆
您还可以使用 SVG <circle> 元素创建圆形。 以下示例将向您展示如何使用 SVG 创建和设置圆形形状：
<svg width="300" height="200">
<circle cx="150" cy="100" r="70" style="fill:lime; stroke:black; stroke-width:3;" />
</svg><circle> 元素的属性 cx 和 cy 定义圆心的坐标，属性 r 指定圆的半径。 但是，如果省略或未指定属性 cx 和 cy，则将圆心设置为 (0,0)。
使用 SVG 绘制文本
您还可以使用 SVG 在网页上绘制文本。 SVG 中的文本呈现为图形，因此您可以对其应用所有图形转换，但它仍然像文本一样运行 — 这意味着它可以被用户选择并复制为文本。 让我们尝试一个例子来看看它是如何工作的：
<svg width="300" height="200">
<text x="20" y="30" style="fill:purple; font-size:22px;">
Welcome to Our Website!
</text>
<text x="20" y="30" dx="0" dy="20" style="fill:navy; font-size:14px;">
在这里你会发现很多有用的信息。
</text>
</svg><text> 元素的属性 x 和 y 以绝对值定义左上角的位置，而属性 dx 和 dy 指定相对位置。
您甚至可以使用 <tspan> 元素重新格式化或重新定位 <text> 元素中包含的文本范围。 包含在单独 tspan 中的文本，但在同一个文本元素中可以一次全部选择 — 当您单击并拖动以选择文本时。 但是，不能同时选择单独文本元素中的文本。 让我们看一个例子：
<svg width="300" height="200">
<text x="30" y="15" style="fill:purple; font-size:22px; transform:rotate(30deg);">
<tspan style="fill:purple; font-size:22px;">
Welcome to Our Website!
</tspan>
<tspan dx="-230" dy="20" style="fill:navy; font-size:14px;">
在这里你会发现很多有用的信息。
</tspan>
</text>
</svg>SVG 和 Canvas 的区别
HTML5 引入了两个新的图形元素 <canvas> 和 <svg>，用于在 web 上创建丰富的图形，但它们有着根本的不同。
下表总结了这两个元素之间的一些基本区别，这将帮助您了解如何有效和适当地使用这些元素。
| SVG | Canvas |
|---|---|
| 基于向量（由形状组成） | 基于光栅（由像素组成） |
| 多个图形元素，成为页面 DOM 树的一部分 | 行为上类似于 <img> 的单个元素。 画布图可以保存为PNG或JPG格式 |
| 通过脚本和CSS修改 | 仅通过脚本修改 |
| 良好的文本渲染能力 | 文本渲染能力差 |
| 使用更少的物体或更大的表面，或两者兼而有之，提供更好的性能 | 在物体数量更多或表面更小或两者兼有的情况下提供更好的性能 |
| 更好的可扩展性。 可以在任何分辨率下以高质量打印。 不会出现像素化 | 可扩展性差。 不适合以更高的分辨率打印。 可能会出现像素化 |