SVG 变得简单

SVG 无处不在。几乎每个网站都包含 SVG 图像，而且它的受欢迎程度还在持续增长。

本文将尝试揭开 SVG 的神秘面纱，弥合与 SVG 相关的一些概念的差距，并最后通过使用 SVG 作为背景创建网页来进行一些实践。

内容

SVG图像
为什么使用 SVG
Viewport 和 viewBox
3D 查看器玩具类比
向网页添加 SVG 背景
SVG 的有用资源

SVG图像

SVG 代表缩放矢量图形。它是一种使用数学公式计算的图像格式。其优点是，它可以缩放而不会损失任何分辨率。

要创建 SVG 图像，请使用标签来描述图像的形状。

为什么使用 SVG

使用 SVG 的原因有很多。最明显的一点是，它可以缩放而不损失质量，图像的清晰度保持不变。

这引出了我们的下一点。

你曾经浏览过背景是曲线形状的网站吗？你觉得开发者会用 png、jpg 还是其他图片格式？为什么不呢？

SVG 使用数学公式来绘制其形状。因此，与其他图像格式相比，其文件大小相对较小。

在进一步讨论之前，我们需要进一步了解 SVG 是如何改变其大小和位置的。这就是 Viewport 和 viewBox 发挥作用的地方。

Viewport 和 viewBox

视口 (Viewport) 定义了 SVG 图像中可见的部分。可以将其视为窗口框架。不要将其误解为图片的内容。通常，你会将其定义为标签的 width 和 height 属性。

如果您现在还不明白，请不要担心；下一节中的类比将使您明白。

ViewBox 被视为一个视口 (viewport)。它提供了定位和描述可感知单位数量的能力。与视口相比，它是一个需要以下值的属性：min-x、min-y、width 和 height。x 和 y 用于移动视口位置。width 和 height 用于“放大”和“缩小”。

标签中的 viewBox 属性示例：

<svg viewBox="0 0 100 100">

3D 查看器玩具类比

你还记得小时候玩的3D电视吗？你会把眼睛贴在两个视角上观看3D图像吗？有时你还会拉下手柄来切换画面。

你猜怎么着？当你拉下手柄来切换图片时，图片的位置也会随之改变。这样你就能查看不同的图片了。就 viewBox 而言，min-x 和 min-y 的值就是你在 SVG 图像中定义的形状之间移动时需要更改的值。

3D 查看器的另一个组件是位于其中间的圆形轮子，它可以将图像移近或移远我们的视野。因此，当我谈论 viewBox 时，我指的是宽度和高度值，它允许它放大和缩小。

如果你考虑这两个镜头，那么在 3D 查看器的情况下，你看到的就是这两个镜头。viewBox 有其视口，SVG 图像的视口也是通过标签上的 width 和 height 来定义的。

向网页添加 SVG 背景

现在，准备好创建一些有趣的独特背景吧！在本例中，我们将创建一个包含两幅 SVG 图像的背景。这些图像可以从 blobapp.com 生成并下载。

步骤 1：创建 HTML 文件

创建一个 index.html 文件。在其中添加以下 HTML5 代码。如果您使用的是 VScode，可以通过输入来添加代码片段html:5。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG blob example</title>
</head>
<body>

</body>
</html>

步骤 2：为 SVG 图像添加两个 DIV

在 body 标签中，添加两个 DIV，其类名如下。bg-blob 类选择器继承了样式，用于移动 DIV。另一个类用于指定 Blob 图像的精确位置。

<body>
    <div class="bg-blob bg-medium-blob"></div>    
    <div class="bg-blob bg-large-blob"></div>    
</body>

步骤 3：下载并保存 blob 图像

前往 blobs.app 生成您喜欢的随机 blob 图像并将其保存到 index.html 所在的本地目录中。

步骤 4：添加 CSS 样式

首先，给你的身体添加背景颜色，让它更有吸引力。

body {
    background-color: #e2e8f0;
}

接下来，添加 bg-blob 类，将位置设置为绝对位置，以便移动 DIV。同时，它的 z-index 设置为 -1，以便其他内容显示在图像之上。

.bg-blob {
    position: absolute;
     z-index: -1;
     box-sizing: content-box;
     height: 0;
     padding: 0;
     background-size: cover;
     background-repeat: no-repeat;
}

要使用 SVG 图像作为背景，我们需要一种巧妙的 padding 方法，这样 DIV 的内容就不会被视为 HTML 文档流的一部分。因此，我们将 box-sizing 和 height 设置为 0。

接下来，为我们的 blob 图像的位置添加以下 CSS 样式。

.bg-large-blob {
    top: 0;
    left: 0;
    width: 70%;
    padding-bottom: 70%;
    background-image: url(./large-blob.svg);
}

使用 width 和 padding-bottom 来决定 SVG 在屏幕上的渲染尺寸。然后，根据您的喜好，使用 top、left 或 right 来调整 SVG 的位置。最后，将 SVG 文件导入为背景图像。

步骤 5：编辑 SVG 图像

大多数情况下，为了用 Blob 创建漂亮的背景，我们倾向于稍微裁剪一下形状。只需使用 viewBox 的 mix-x 和 mix-y 值，我们就能实现这种效果。

对于我的一张图片，我按如下方式设置 viewBox，使形状在网页中向左下方移动。viewBox 的第一个值 150 表示将图片向左移动 150 个单位。一个单位是 px。第二个值 200 也同样如此。

<svg viewBox="150 200 500 500" width="500" xmlns="http://www.w3.org/2000/svg" id="blobSvg">
    <path id="blob"  d="M482,295.5Q471,341,405.5,340.5Q340,340,330.5,381Q321,422,285.5,449.5Q250,477,222,431.5Q194,386,144,396Q94,406,69.5,370.5Q45,335,48,292.5Q51,250,40.5,204.5Q30,159,92.5,157Q155,155,161,102Q167,49,208.5,55Q250,61,293,52Q336,43,369.5,70Q403,97,394,145.5Q385,194,439,222Q493,250,482,295.5Z" fill="#7fd1ae"></path>
</svg>

SVG 应该如下所示：

SVG 的有用资源

Blob Maker和Blobs - 用于创建 Blob 形状的 SVG 生成器
获取波浪- 用于创建波浪形状的 SVG 生成器
缩放 SVG 元素- 关于 viewBox 如何工作的交互式演示

如果您想查看我的GitHub 存储库上的源代码，这里是结果。

下面是我使用 SVG 为文件模拟器项目创建背景的另一个示例。

我希望现在你没有理由不让你的下一个项目背景变得独一无二。如果你喜欢这篇文章，请在Twitter上关注我，获取更多类似的技巧和窍门。

文章来源：https://dev.to/dinmon/svg-made-easy-517i