HTML5 SVG

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> 元素的属性 x1x2y1y2(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> 元素的属性 xy 定义了矩形的左上角的坐标。属性 widthheight 指定形状的宽度和高度。

画一个圆圈

你可以使用 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> 元素的属性 cxcy 指定了圆的中心的坐标,属性 r 指定了圆的半径。如果属性 cxcy 被省略或没有指定,则圆的中心被设定为 (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> 元素的属性 xy 定义了左上角的绝对位置,而属性 dxdy 指定相对位置。

你还可以使用 <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 修改 仅通过脚本修改
使用较少数量的对象或较大的表面或两者都能提供更好的性能 使用较小的表面或较大数量的对象或两者都能提供更好的性能
更好的可扩展性 - 可以在任何分辨率下以高质量打印 可扩展性差 - 不适合在更高分辨率下打印