HTML5 SVG

Created: October-16, 2018

SVG 代表可缩放矢量图形。

什么是 SVG

可缩放矢量图形（SVG）是一种基于 XML 的图像格式，用于为 Web 定义基于二维矢量的图形。矢量图像可以放大或缩小到任何程度而不会丢失图像质量。

SVG 图像及其行为在 XML 文件中定义 - 这意味着可以使用任何文本编辑器创建和编辑 SVG 图像。与其他图像格式（如 JPEG，PNG，GIF 等）相比，使用 SVG 还有其他一些优点。

可以搜索、索引、编写脚本和压缩 SVG 图像。
可以使用 JavaScript 实时创建和修改 SVG 图像。
SVG 图像可以任何分辨率高质量打印。
可以使用内置动画元素对 SVG 内容进行动画处理。
SVG 图像可以包含指向其他文档的超链接。

提示： 矢量图像由一组由数学定义的固定形状组成，而位图或光栅图像由一组称为像素的固定点组成。

将 SVG 嵌入到 HTML 页面中

你可以使用 HTML5 <svg> 元素将 SVG 图形直接嵌入到文档中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 SVG</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>

注意： 所有主要的现代 Web 浏览器（如 Firefox，Chrome，Safari，Opera 和 Internet Explorer 9+）都支持内联 SVG 渲染。

使用 SVG 绘制路径和形状

以下部分将介绍如何使用 HTML5 <svg> 元素在网页上绘制基本的基于矢量的路径和形状。

划线

Line 是你可以使用 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;">
        Here you will find lots of useful information.
    </text>
</svg>

<text> 元素的属性 x 和 y 定义了左上角的绝对位置，而属性 dx 和 dy 指定相对位置。

你还可以使用 <tspan> 元素重新格式化或重新定位 <text> 元素中包含的文本范围。文本包含在单独的 tspans 中，但在同一文本元素中可以一次选择 - 当你单击并拖动以选择文本时。但是，无法同时选择单独文本元素中的文本。

<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;">
            Here you will find lots of useful information.
        </tspan>
    </text>
</svg>

SVG 和 Canvas 之间的差异

HTML5 引入了两个图形元素 Canvas 和 SVG，用于在 Web 上创建丰富的图形，但它们有着根本不同。下表总结了这两个元素之间的一些基本差异，这将有助于你了解如何有效和适当地使用 Canvas 和 SVG 元素。

SVG	画布
基于矢量（由形状组成）	基于光栅（由像素组成）
多个图形元素，它们成为 DOM 的一部分	单个 HTML 元素类似于行为 `<img>`
通过脚本和 CSS 修改	仅通过脚本修改
使用较少数量的对象或较大的表面或两者都能提供更好的性能	使用较小的表面或较大数量的对象或两者都能提供更好的性能
更好的可扩展性 - 可以在任何分辨率下以高质量打印	可扩展性差 - 不适合在更高分辨率下打印