迹忆客 专注技术分享

本文介绍了使用 HTML 和 CSS 在网页上嵌入 SVG 图像。

SVG 文件是矢量图像，使用它比使用 png、jpeg、jpg 或其他图像文件有很多好处。 SVG 文件的主要优点是它与分辨率无关，这意味着当我们将它缩放到任何尺寸时，图像的分辨率或质量保持不变。

此外，SVG 文件大小非常紧凑，从而减少了网页的加载时间。 我们还可以在文本编辑器中编辑 SVG 文件，并通过添加一些与关键字相关的文本使其对 SEO 友好。

此外，我们可以通过脚本为 SVG 文件添加动画，这也是使用 SVG 文件的最大优势之一。

使用 <img> 标签将 SVG 文件添加到网页

在本节中，我们使用了 HTML 的 <img> 标签在网页上渲染 SVG 图像文件。 我们从 svgrepo 中获取了两个不同的图标，并将其 URL 嵌入到 <img> 标签的 src 标签中。

示例代码：

<img src="https://www.demo.com/show/426102/camera.svg" alt="camera icon">
<img src="https://www.demo.com/show/426942/transport.svg" alt="car icon">

在上面的输出图像中，用户可以看到相机和汽车的 SVG 图标。

使用 <object> 标签将 SVG 文件添加到网页

<object> HTML 标签允许用户在网页上呈现音频、视频或 PDF 等多媒体。

我们使用了对象标签的两个属性来显示 SVG 文件。 <object> 的数据属性采用 SVG 文件的本地路径或 URL。

<object> 标签的 type 属性采用文件类型，我们将使用 image/svg+xml 作为其值来渲染 SVG 文件。

在这里，我们使用对象标签渲染了相机和汽车图标。

<object data="https://www.demo.com/show/426102/camera.svg" type="image/svg+xml"></object>
<object data="https://www.demo.com/show/426942/transport.svg" type="image/svg+xml">

我们还可以在 <object> 标签内添加后备图像。 在下面的示例中，我们采用了损坏的相机图标 URL 并添加了后备图像。

现在，当用户执行以下代码时，他们只会看到后备图像，因为 SVG 文件的 URL 已损坏。

<object data="https:/w.demo.com/show/426102/camera.svg" type="image/svg+xml">
    <img src="https://yt3.test.com/ytc/AMLnZu-K8Cu9BcdyoXT2AeAi7TJ744ADUCQyYblAoH9F=s900-c-k-c0x00ffffff-no-rj"
    style="height: 50px;width: 50px;" />
</object>
<object data="https://www.demo.com/show/426942/transport.svg" type="image/svg+xml" >

在上面的输出中，用户可以看到它显示了 DelftStack 的标志，这是一个后备图像而不是相机图标。

使用 <embed> 标签将 SVG 文件添加到网页

<embed> 标签允许我们将其他应用程序嵌入到网页中。 我们将使用带有 <embed> 标签的 src 和 type 属性将 SVG 文件嵌入到网页中。

src 属性采用 SVG 文件的 URL 或路径，type 定义多媒体类型。

在这里，我们使用 <embed> 标签将两个 SVG 图标嵌入到网页中。

<embed src="https://www.demo.com/show/426102/camera.svg" type="image/svg+xml">
<embed src="https://www.demo.com/show/426942/transport.svg" type="image/svg+xml" >

使用 <iframe> 标签将 SVG 文件添加到网页

<iframe> 标签允许开发人员将内联框架嵌入到文档中。 它为音频、视频或多媒体等外部资源提供不同的框架或块。

在这里，我们使用了 <iframe> 标签并在 src 属性中添加了 SVG 文件的 URL。 此外，我们不需要在此处指定要显示的多媒体类型，例如和

<iframe src="https://www.demo.com/show/426102/camera.svg" height="50px">

上面的输出显示相机图标被嵌入到单独的块或帧中。

使用 CSS background-image 属性添加 SVG 文件作为背景

background-image CSS 属性允许我们为特定元素设置背景图像。 在这里，我们将 SVG 文件设置为背景图像。

在下面的示例中，我们创建了 <h3> 标签并添加了一些文本。 此外，我们还使用 CSS 的 background-image 属性为其添加了背景 SVG 图像。

此外，我们还为 <h3> 的文本添加了颜色，并设置了 background-repeat: no-repeat; 避免背景图片重复。

<h3>welcome to jiyik.com!</h3>
h3{
  background-image: url("https://www.demo.com/show/426102/camera.svg");
  background-repeat: no-repeat;
  color: red;
}

在本文中，我们了解了使用 HTML 和 CSS 呈现 SVG 文件的不同方法。 但是，用户也可以直接使用 HTML 的 <SVG> 标签将 SVG 文件添加到网页中。

<img> 和 <object> 标签允许用户在加载 SVG 文件失败时设置回退图像。 用户可以使用 <embed> 或 <iframe> 标签将 SVG 图像文件嵌入到单独的块中。

但是，不建议使用 <iframe>，因为它会影响网页的 SEO，但用户可以使用 <object> 或内联 <svg> 代替。