HTML SVG - 介绍

概述

SVG (Scalable Vector Graphics) 是一种基于 XML 的图像格式，用于描述二维矢量图形。

SVG 格式的图像绝对大小和相对大小都可以被指定，并且能够被放大或缩小而不失真。因此，它们通常用于各种类型的图像，从简单的图标到复杂的图表。

SVG 图像可以通过以下三种方式添加到 HTML 页面：

• 使用 <img> 标签。
• 使用 CSS 的 background-image 属性。
• 直接在 HTML 中使用 SVG 代码。

在本篇介绍中，我们将主要关注最后一种方式，即直接在 HTML 中使用 SVG 代码。

添加 SVG 代码到 HTML 页面

要在 HTML 中添加 SVG 代码，可以使用 <svg> 标签，如下所示：

<svg>
  <!-- SVG 代码将在此处添加 -->
</svg>

SVG 代码应该放在 <svg> 标签内部。在 SVG 中，所有可用的元素都必须被包含在 <svg> 标签中。

为了确保 SVG 图像具有良好的可伸缩性和响应性，我们可以使用如下的一些属性：

• viewBox - 定义 SVG 图像的视口。
• width 和 height - 定义 SVG 图像的宽度和高度。

例如：

<svg viewBox="0 0 100 100" width="50%" height="50%">
  <!-- SVG 代码将在此处添加 -->
</svg>

创建 SVG 形状

要在 SVG 中创建形状，可以使用各种形状元素。下面是一些常用的形状元素：

• <rect> - 创建矩形。
• <circle> - 创建圆形。
• <ellipse> - 创建椭圆。
• <line> - 创建直线。
• <polyline> - 创建多边形折线。
• <polygon> - 创建多边形。

例如，要创建一个绿色的圆形，可以编写以下代码：

<svg viewBox="0 0 100 100" width="50%" height="50%">
  <circle cx="50" cy="50" r="40" fill="green" />
</svg>

在这个例子中，我们使用了 <circle> 元素来创建一个圆形。cx 和 cy 属性分别指定圆心的 x 和 y 坐标，r 属性指定圆的半径，fill 属性指定填充颜色。

创建 SVG 路径

路径元素是 SVG 中最灵活的元素，可以用于创建各种形状，例如直线、曲线等等。要创建路径，可以使用 <path> 元素。例如，下面的代码将创建一个由直线和曲线组成的简单路径：

<svg viewBox="0 0 100 100" width="50%" height="50%">
  <path d="M 10 30 L 30 10 Q 60 40 90 10 L 90 90 Z" stroke="black" fill="transparent" />
</svg>

在这个例子中，我们使用了 d 属性来定义路径的形状。M 和 L 分别表示起点和终点，Q 表示二次贝塞尔曲线，Z 表示闭合路径。

使用 SVG 图标

SVG 图标非常流行，可以在各种设备和屏幕上进行缩放，并且可以通过 CSS 进行样式化。SVG 图标通常是基于路径元素创建的。

例如，我们可以使用 Font Awesome 提供的 SVG 图标，将其添加到 HTML 页面中：

<svg viewBox="0 0 512 512" width="50%" height="50%">
  <path fill="currentColor" d="M65 410.13a32 32 0 0 1-26-13L7 352.9a40 40 0 0 1 0-56.17l32-32a40 40 0 0 1 56.56 0L97 276.84a8 8 0 0 0 11.31 0l56.55-56.56a40 40 0 0 1 56.56 0l32 32a40 40 0 0 1 0 56.17l-32 32a40 40 0 0 1-56.57 0l-36.11-36.12a8 8 0 0 0-11.31 0l-56.57 56.57a32 32 0 0 1-25.99 12.69zM240 344a23.94 23.94 0 0 1-24 24h-88a23.94 23.94 0 0 1-24-24v-88a23.94 23.94 0 0 1 24-24h88a23.94 23.94 0 0 1 24 24z"/>
</svg>

在这个例子中，我们使用了 currentColor 关键字来指定填充颜色，这将使用当前文本颜色。

总结

SVG 是一种非常有用的图像格式，非常适合用于各种类型的图像，从简单的图标到复杂的图表。在 HTML 中，可以使用 <svg> 标签和各种形状和路径元素来创建 SVG。

使用 SVG 可以提供良好的可伸缩性和响应性，并且可以在各种设备和屏幕上进行缩放。SVG 图标特别受欢迎，因为它们可以通过 CSS 进行样式化。