HTML SVG

SVG（可伸缩矢量图形）用于创建 2D 图形，如形状、徽标、图表等。

HTML <svg> 标签用于在网页中嵌入 SVG 图形。例如：

<svg width="100" height="100" style="border:1px solid black;">
    <circle cx="50" cy="50" r="30" fill="blue" />
</svg>

浏览器输出

在上面的示例中，代码创建了一个宽度为 **100** 像素，高度为 **100** 像素的 SVG 元素。该 SVG 元素有一个实心黑色边框。

在 <svg> 元素内部，我们使用 <circle> 元素创建了一个圆形。cx 和 cy 属性定义了圆心的 **x** 和 **y** 坐标，而 r 属性定义了 **半径**。fill 属性决定了圆形的颜色，在此示例中设置为 blue。

这些元素共同创建了一个蓝色圆形，带有黑色边框，并居中于 <svg> 容器内。

SVG 的属性

SVG 有各种属性。它们如下所示：

• preserveAspectRatio
• 视口 (viewport) 和 viewBox

preserveAspectRatio

preserveAspectRatio 属性用于 SVG 元素中，指定元素在视口中如何缩放和对齐。此属性决定了当元素被调整大小或拉伸时，元素的宽高比（宽度与高度的比率）如何保持不变。例如：

<svg width="100" height="150" viewBox="0 0 100 100" preserveAspectRatio="none" style="border: 1px solid black">
    <circle cx="50" cy="50" r="50" />
</svg>

浏览器输出

在此示例中，preserveAspectRatio 属性设置为 none，因此圆形将被拉伸以适应视口的尺寸。结果，圆形看起来会变形。让我们看另一个例子。

<svg width="100" height="150" viewBox="0 0 100 100" preserveAspectRatio="meet" style="border: 1px solid black">
  <circle cx="50" cy="50" r="50" />
</svg>

浏览器输出

在此示例中，preserveAspectRatio 属性设置为 meet，因此圆形将（如果需要）缩小以适应视口。结果，圆形周围有空白区域。

视口 (viewport) 和 viewBox

SVG 视口

视口是 SVG 的可见区域。我们使用 width 和 height 属性来定义 SVG 的视口。例如：

<svg width="100" height="100" style="border: 1px solid black">
  <circle cx="50" cy="50" r="50" fill="blue" />
</svg>

浏览器输出

在上面的示例中，我们创建了一个高宽都为 **100** 像素的 SVG。

SVG viewBox

viewBox 属性在用户空间中定义了 SVG 视口的位置和尺寸。可以把它想象成一个用于观察 SVG 内部元素的望远镜。我们可以左右移动 viewBox，也可以放大和缩小。让我们看一个例子：

<svg width="100" height="100" viewbox = "50 50 50 50"style="border: 1px solid black">
  <circle cx="50" cy="50" r="50" fill="blue" />
</svg>

浏览器输出

这里，viewBox 的前两个参数分别是 min-x 和 min-y。它们定义了 viewBox 的左上角。

min-x 的值将我们的 viewBox 向右移动 **50** 像素。同样，min-y 的值将我们的 viewBox 向下移动 **50** 像素。这就是为什么我们只能看到圆的右下部分。

第三和第四个参数分别表示 viewBox 的 width 和 height。它们也可以用于放大和缩小。

使用 SVG viewBox 缩小

如果 viewbox 的大小大于视口，则 circle 将缩小。让我们看一个例子：

<svg width="100" height="100" viewbox = "0 0 1000 1000"style="border: 1px solid black">
  <circle cx="50" cy="50" r="50" fill="blue" />
</svg>

浏览器输出

在上面的示例中，viewbox 的 height 和 width 值大于视口大小，因此圆形已缩小。

使用 SVG viewBox 放大

如果 viewbox 的大小小于视口，则圆形将放大。例如：

<svg width="100" height="100" viewbox = "0 0 25 25"style="border: 1px solid black">
  <circle cx="50" cy="50" r="50" fill="blue" />
</svg>

浏览器输出

在上面的示例中，viewbox 的 height 和 width 值小于视口大小，因此圆形已放大。

为什么选择 SVG？

使用 SVG 的优点是：

• 即使调整大小，SVG 也能保持其质量和轻量级。
• 它们具有一致的文件大小，并且可以用简单的代码轻松创建和编辑。
• SVG 代码是人类可读的，不需要任何专用软件。